绿色链接 - 缩略语和首字母缩略词公开

gggustafson

4.83/5 (13投票s)

2011年6月22日

CPOL

5分钟阅读

33722

201

描述了一种方法，当用户将鼠标悬停在特殊显示的缩写或首字母缩略词上时，可以显示其定义。

下载源文件 - 61.97 KB

引言

本文介绍了一种方法，可以在用户将鼠标悬停在缩略语或首字母缩略词上时提供其定义。

背景

在我写的大部分文章中，我发现我使用了相当多的缩略语和首字母缩略词。我通常会在缩略语或首字母缩略词后面加上括号写出完整的短语。例如，我会写

多年前，位于加利福尼亚州圣地亚哥的美国海军水下中心 (NUC) 需要一种更好的方式来访问数据。夏威夷大学在夏威夷群岛收集了大量的海洋生物学数据。这些数据集被称为夏威夷沿海区数据库 (HCZDB)，其中包含 6500 万个关于夏威夷周边水域海洋生物的个体观测记录……

然后，在文档的某个更后面的地方，我会使用“NUC”或“HCZDB”。但定义与其后续使用之间可能会出现大量段落。因此，除非读者熟悉该主题，否则他将不得不搜索 HCZDB 的含义。

解决方案

我们可能都熟悉网络上出现的“绿色链接”。链接通常是绿色的，带有双下划线。当鼠标悬停在其上时，通常会出现一个弹出窗口，显示一些广告。例如，

所以这就是我的解决方案。将缩略语或首字母缩略词替换为“绿色链接”，当鼠标悬停在缩略语上时，该链接会提供定义。例如，

概述

实现绿色链接除了 HTML 文件外，还需要 CSS 和 JavaScript 文件。

在页面的 HTML 中，无论何时需要绿色链接，都会插入一个形式为...的 `` 标签...

<span class="green_link">;Abbreviation;Definition</span>

...。在这种情况下，前导分号指定了将用于缩略语与其定义之间的分隔符。不出现在缩略语或定义中的任何可打印字符都可以用作分隔符。提醒读者，如果缩略语或定义中包含 HTML 特殊字符（例如 &, ", <, > 等），分号不是一个有效的分隔符。请使用其他分隔符，例如“!”。

为了让文档中出现绿色链接，需要进行预处理。预处理在页面加载后启动，由 `` 的 `onload` 事件处理程序触发。

<body onload="initialize_green_links();">

JavaScript 函数将原始的“`green_link`” `` 替换为

<span class="revised_green_link">
  <span class='abbreviation_alone'>
    Abbreviation
  </span>
  <span class='abbreviation_definition'>
    <a id='greenlink_1'></a>
    <a href='#greenlink_1' 
       style='text-decoration:none; 
              font-weight:bold;'>
      <span class='abbreviation'>
        Abbreviation
      </span>
      <span class='definition'>
        Definition
      </span>
    </a>
  </span>
</span>

此外，该脚本还会创建一个“删除/恢复绿色链接”的链接，允许读者禁用（或启用）页面上的绿色链接。

实现

在 *GreenLinks.js* 文件中，需要三个 JavaScript 全局变量来维护状态。

var abbreviation_alone_rule = null;
var abbreviation_definition_rule = null;
var green_links_displayed = false;

前两个指向确定绿色链接显示方式的 CSS 规则。布尔值记录了绿色链接的显示状态。

JavaScript 函数 `initialize_green_links()` 控制整个过程。

function initialize_green_links ( ) 
  {
  var found = false;
  
  if ( !green_links_found ( ) )
    {
    
    }
  else
    {
    abbreviation_alone_rule = green_links_rule_retrieved ( 
                                '.abbreviation_alone' );
    if ( abbreviation_alone_rule == undefined )
      {
      
      }
    else
      {
      abbreviation_definition_rule = green_links_rule_retrieved ( 
                                       '.abbreviation_definition' );
      if ( abbreviation_definition_rule == undefined )
        {
        
        }
      else if ( !initialize_green_link_action ( ) )
        {
        
        }
      else if ( !revise_green_links ( ) )
        {
        
        }
      else
        {
        abbreviation_alone_rule.style.display = 'none';
        abbreviation_definition_rule.style.display = 'inline';
        }
      }
    }
  
  return ( found );
  }

该函数确定页面上是否存在绿色链接。如果不存在，则退出并返回该事实。

我曾想使用 JavaScript 动态创建 Green Links 样式表，从而简化 Green Links 的使用（无需包含 *GreenLinks.css* 文件和 *GreenLinks.js* 文件，只需 *GreenLinks.js* 文件）。不幸的是，Google Chrome 禁止了这种解决方案。因此，样式表必须作为单独的 CSS 文件包含。

控制绿色链接显示方式的两个规则从样式表中检索。这些规则存储在全局变量中，以便快速访问和修改它们的样式（请参阅使用 HTML 和 JavaScript 实现动态字体大小）。检索后，这两个规则的样式被设置为默认值。

“删除/恢复”链接（`green_link_action`）被创建并定位在网页上。该链接是绝对定位的。随着页面的滚动，会重新计算位置，以保持链接在网页左上角的位置。

最后，“`green_link`” `` 被替换为“`revised_green_link`” ``。

Using the Code

使用绿色链接的第一步是在 HTML 页面中包含 CSS 和 JavaScript 文件。按照标准做法，将 CSS 文件放在文档的 `` 中。

    <link type="text/css" 
          rel="Stylesheet" 
          media="screen,print" 
          href="./CSS/GreenLinks.css" />

然后修改 `` 标签，包含 `onload` 处理程序。

<body onload="initialize_green_links();">

`onload` 处理程序可以放在网站的每个页面上，无论页面是否包含绿色链接。用于确定是否存在绿色链接的测试速度非常快，几乎不会影响页面渲染时间。

根据 Google 员工的在线讨论，我将 JavaScript 包含放在 `

` 标签之前。

    <script type="text/javascript" 
            src="./Scripts/GreenLinks.js"></script>

  </body>
</html>

现在是更困难的任务。确定网页是否包含任何可能受益于绿色链接的缩略语或首字母缩略词。对于每个已识别的项目，在项目的位置创建“`green_link`” ``。例如，假设以下文本出现在您的网页上：

<p>
  ICF devices use "drivers" to rapidly heat the outer layers
  of a "target" in order to compress it. The target is a 
  small spherical pellet containing a few milligrams of fusion 
  fuel, typically a mix of D and T. The energy of the laser 
  heats the surface of the pellet into a plasma.
</p>

如果首字母缩略词“`ICF`”和化学符号“`D`”、“`T`”被替换为绿色链接，文本将变为：

</p>
<span class="green_link" >;ICF;Inertial Confinement Fusion</span>
  devices use "drivers" to rapidly heat the outer layers 
  of a "target" in order to compress it. The target is a 
  small spherical pellet containing a few milligrams of 
  fusion fuel, typically a mix of 
<span class="green_link" >;D;deuterium</span>
  and 
<span class="green_link" >;T;tritium;</span>. 
  The energy of the laser heats the surface of the pellet 
  into a plasma. 
</p>

并显示为：

ICF 设备使用“驱动器”来快速加热“目标”的外层，以使其压缩。目标是一个小的球形弹丸，包含几毫克的聚变燃料，通常是 D 和 T 的混合物。激光的能量加热弹丸表面形成等离子体。

当读者将鼠标悬停在绿色链接之一上时，将显示定义（例如，“`ICF`”的“惯性约束聚变”，“`D`”的“氘”，以及“`T`”的“氚”）。

为了查看此技术的成果，请访问实时项目汇总。在该页面上，我使用了绿色链接（可能有点过度使用以强调这一点）。