修改的绿色链接

分享于 

11分钟阅读

Web开发

  繁體

介绍

本文提出了一种改进的方法,用于在用户停止缩写或者initialism时显示缩写或者initialism的定义。

背景

CodeProject之前,我们展示了在中的一个新类,即在用户浏览缩写时显示定义的新类。

方法有许多困难:

  • <span> 文本的语法很复杂,需要指定分隔符字符。 如果未指定分隔符,则可能会出现意外且可能不希望出现的结果。
  • 如果网页阅读器没有启用 JavaScript,那么 <span> 标签的丑陋内容就会显示出来。
  • CSS文件和Javascript文件都需要包含在HTML文档中。
  • <body> 标记需要一个 onload 属性。

这里修订解决了这些问题,并且与原始方法向后兼容。 它还支持另外两个HTML标签。

比较原始的绿色链接和修订后的链接

原始"绿色链接"只支持窗体的<span> 标记:

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

本修订版还接受 <abbr><acromym> 标签,使用以下形式:

<abbrclass="green_link"title="Definition">Abbreviation</abbr><acronymclass="green_link"title="Definition">Abbreviation</acronym>

在绿色链接的<span> 形式中,如果缺少分隔符,则生成的网页可以能采取不需要的外观。 通过使用 <abbr><acronym> 标记,没有分隔符。 因此,标记被简化。 此外,辅助功能也有很大的变化。 如果未启用 JavaScript,<abbr><acronym> 标签将显示它的内容"正常",就好像标签上没有 class="green_link" 属性一样。

修改的绿色链接中只需要包含一个文件( JavaScript文件)。 JavaScript文件动态创建必要的样式表,因此不需要包含外部样式表文件( CSS )。 如果包含 GreenLinks.css 文件,则这里修改方法将忽略该文件。

需要通过 <body> 标记的onload 属性调用处理 revise_green_links的JavaScript函数,如下所示:

<bodyonload="initialize_green_links();">

不再需要这里选项。 JavaScript现在包含一个自调用函数,它在加载页面时解析HTML页面内容。

修改后的绿色链接的工作方式

通过通过标记属性的<body>onload 调用 initialize_green_links 函数来执行早期的绿色链接。 在新版本中,仍然可以这种方式调用该函数;但是,它是不必要的。 当JavaScript文件 GreenLinks.js 包含在HTML页面中时,后面的匿名函数在页面加载时是自调用。

( function ( ) 
{
 initialize_green_links ( );
} ) ( );

这里匿名函数被添加,这样不需要提供 <body> 标记的onload 属性,但是可以在早期版本的绿色链接中提供。 因此,修改后的绿色链接完全向后兼容。 尽管在所有浏览器中不保险执行顺序,但匿名函数通常在任何 <body> 标记 onload 属性的目标之前执行。 匿名函数调用 initialize_green_links

function initialize_green_links ( ) 
{
 var found = false;
 // test the guard Booleanif ( initialize_green_links_invoked )
 {
 // the anonymous function has // probably been invoked, so // this invocation is probably // from an onload attribute // that is attached to the // <body> tag so return true // so that the page will load found = true;
 }
 else {
 // set the guard Boolean initialize_green_links_invoked = true;
 // create and fill the //"green_links" array with // nodes that are ACRONYM, // ABBR and SPAN tags with a // class of"green_link" green_links = new Array ( );
 green_links = elements_by_class_name ( 'green_link', 
 document, 
 'abbr' ).concat ( 
 elements_by_class_name ( 'green_link', 
 document, 
 'acronym' ).concat ( 
 elements_by_class_name ( 'green_link', 
 document, 
 'span' ) ) );
 if ( green_links.length <= 0 )
 {
 // nothing to do - there are // no Green Links in the // document }
 else {
 if ( DYNAMICALLY_CREATE_STYLESHEET )
 {
 create_green_links_stylesheet ( );
 }
 abbreviation_alone_rule = 
 green_links_rule_retrieved ( 
 '.green_link_abbreviation_alone' );
 if ( abbreviation_alone_rule == undefined )
 {
 }
 else {
 abbreviation_definition_rule = 
 green_links_rule_retrieved ( 
 '.green_link_abbreviation_definition' );
 if ( abbreviation_definition_rule == undefined )
 {
 }
 elseif (!initialize_green_link_action ( ) )
 {
 }
 elseif (!revise_green_links ( ) )
 {
 }
 else {
 abbreviation_alone_rule.style.display = 'none';
 abbreviation_definition_rule.style.display = 'inline';
 found = true;
 }
 }
 }
 }
 return ( found );
}

调用 initialize_green_links 时,它会测试全局布尔保护的值。 如果guard是 true,initialize_green_links 返回 true ( 如果通过 <body> 标记的onload 属性调用 initialize_green_links,则需要)。 如果guard值不是 true,initialize_green_links 将全局布尔guard设置为 true,并:

  • green_link<acronym> 或者 <span>的形式收集所有文档树节点,它的标记为 <abbr>
  • 如果存在任何这样的节点,创建支持绿色链接的样式表。 可以通过将全局变量 DYNAMICALLY_CREATE_STYLESHEET 设置为 false 来抑制样式表的创建。 在这种情况下,HTML页面必须包含 GreenLinks.css 文件。 ( GreenLinks.css 包含在下载文件的CSS目录中。)
  • 查找 .green_link_abbreviation_alone.green_link_abbreviation_definition 规则并将它们保存在全局变量中。 这两条规则决定了绿色链接是否要显示。
  • 如果找到这两个规则:
    • initialize_green_link_action 被调用以创建和定位指定是否显示绿色链接的控件。 它还为窗口和文档建立了事件处理程序来处理 onscroll 事件。
    • 调用 revise_green_links 来处理文档(。例如,<abbr><acronym><span> ) 中前面发现的所有绿色链接。
    • 将默认值分配给 .green_link_abbreviation_alone.green_link_abbreviation_definition 规则。

在绿色链接的处理过程中,添加了一个新特性。 缩略语和定义被收集到词典中。 对于以下任何绿色链接窗体,都会发生这里操作:

1 <abbrclass="green_link"title="Tactical Receive Equipment">TRE</abbr>2 <abbrclass="green_link">TRE</abbr>3 <acronymclass="green_link">TRE</acronym>4 <acronymclass="green_link"title="Tactical Receive Equipment">TRE</acronym>5 <spanclass="green_link">;TRE;Tactical Receive Equipment</span>6 <spanclass="green_link">TRE;Tactical Receive Equipment</span>7 <spanclass="green_link">;TRE</span>8 <spanclass="green_link">TRE</span>

请注意,定义缩写后,该定义可以用于页面上所有其他绿色链接标记。 例如,第 1行,上面,定义了在页面( 行 4.5和 6也行) 中显示的绿色链接的所有以下实例的"处理"。 这允许在页面( 比如,行 2,3,7和) 中缩短绿色链接。 当遇到完整绿色链接时,所有前面带有相同缩写或者initialism的绿色链接都会被访问。 如果发现这些绿色链接中任何一个不完整,则完全绿色链接将被完全定义的绿色链接替代。

使用代码

原始绿色链接不同的是获得绿色链接效果,修改后的绿色链接只需要两个。

  • 在HTML页面中包含JavaScript文件。 如前面的文章所述,放置JavaScript包含在 </body> 标记之前:
<scripttype="text/javascript"src="./Scripts/GreenLinks.js"></script></body></html>
  • 确定可以能从绿色链接中获益的任何缩写或者 initialisms,并将它的包装在绿色链接表单中:
<abbrclass="green_link"title="Definition">Abbreviation or Initialism</abbr><acronymclass="green_link"title="Definition">Abbreviation or Initialism</acronym><spanclass="green_link">;Abbreviation or Initialism;Definition</span>

注意 class="green_link" 可能导致错误"。未定义类或者CssClass值。"这个消息是由于类" green_link"将在动态创建的样式表中定义的事实造成的。 如果你对这里消息不满意,解决方案可能是将以下内容添加到页面的<head>

<styletype="text/css">. green_link {
 }</style>

结束语

本文提出了将缩略词和initialisms扩展到它的定义的修订方法。

浏览器已经测试

谷歌 ChromeFirefoxIEOperasafari

所有的浏览器都产生了预期的结果。

历史记录

  • 11/13/2011 - 原始文章。

link  links  gree  
相关文章