`

jQuery入门教程-15 Days of jQuery(Day 14) --- Javascript 工具提示

阅读更多
转载自网络
Cody Lindley ,Thickbox的作者,日前发布了 jTip - jQuery 工具提示。

我对其中很多想法和思路拍案叫绝。我知道你已经看过很多类似的工具提示代码了。但是,Cody 的方法已经在我的工作中显露出了闪光点。

当我检查HTML代码时,我发现了一个大问题,可访问性。链接在javascript关闭的时候无法工作。我并不是倾向于一定要实现全面的可访问性,只是在这里我认为可以有其他更具亲和力的方式实现相同的功能。

尤其是,我个人不喜欢那种为了可访问性而去牺牲可用性来实现在提示框上链接另一个页面链接的方法。我喜欢这个提示框 - 不是对Cody不尊重,只是在我这里我“需要”它能够在各种情况下工作。

今天我要提供给大家的是Cody的工具提示代码的小小修改。如果你不是Cody工具提示的爱好者的话,我的改版对你来说也许不是很在意。但如果你喜欢他的作品同时希望它可以在javascript关闭的时候照常工作,这个也许是你需要的。

我的改动

让我产生修改想法的,是他的代码在Yahoo上的应用。我不喜欢他使用的代码:

<a href="yahoo.htm?width=175&amp;link=http://www.yahoo.com"
name="Before You Click..."
id="yahooCopy"
class="jTip">Go To Yahoo</a>

所以我重写了他的部分代码,成了现在这个样子:

<a href="http://www.yahoo.com"
rel="yahoo.htm?width=175&link=yahoo&name=Before%20
%20You%20Click..."
id="yahooCopy"
class="jTip">
Go To Yahoo</a>

我的示例

改进:HTML标准校验

我的代码可以通过w3.org的测试

改进:命名

在我修改Cody的代码的时候我发现他使用了一个用来存储链接名称的叫做“title”的变量名,这会导致一些混淆。

我标出了这个命名问题,即使我认为这不过是个小小的失误。

改进:可用性

使用我的代码,你可以让每个提示框都含有真实链接地址到另一个文档,不管内部的还是外部的。或者你只是想要那个提示框,不想关心可用性,你同样可以让链接部分留空。

选择权在你。

感谢

Cody提供了伟大的代码,帮助我节省了大量的时间和精力。我的修改只是对原有代码的轻微“调整”,希望朋友们喜欢。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics