转载自网络
Cody Lindley ,Thickbox的作者,日前发布了 jTip - jQuery 工具提示。
我对其中很多想法和思路拍案叫绝。我知道你已经看过很多类似的工具提示代码了。但是,Cody 的方法已经在我的工作中显露出了闪光点。
当我检查HTML代码时,我发现了一个大问题,可访问性。链接在javascript关闭的时候无法工作。我并不是倾向于一定要实现全面的可访问性,只是在这里我认为可以有其他更具亲和力的方式实现相同的功能。
尤其是,我个人不喜欢那种为了可访问性而去牺牲可用性来实现在提示框上链接另一个页面链接的方法。我喜欢这个提示框 - 不是对Cody不尊重,只是在我这里我“需要”它能够在各种情况下工作。
今天我要提供给大家的是Cody的工具提示代码的小小修改。如果你不是Cody工具提示的爱好者的话,我的改版对你来说也许不是很在意。但如果你喜欢他的作品同时希望它可以在javascript关闭的时候照常工作,这个也许是你需要的。
我的改动
让我产生修改想法的,是他的代码在Yahoo上的应用。我不喜欢他使用的代码:
<a href="yahoo.htm?width=175&;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提供了伟大的代码,帮助我节省了大量的时间和精力。我的修改只是对原有代码的轻微“调整”,希望朋友们喜欢。
分享到:
相关推荐
JavaScript/CSS/DOM基础 第0课 - 内容概述 - [精通JavaScript+jQuery] 第1课 - JavaScript背景知识-[精通JavaScript+jQuery] 第2课 - JavaScript基础 - [精通...第15课 - jQuery插件 - [精通JavaScript+jQuery]
<script type="text/javascript" src="${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"> <script type="text/javascript" src="${ctx}/plugins/jquery-ui-1.11.2/jquery-ui-timepicker-zh-CN.js"></script>
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 ...<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-...
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
jQuery入门级---经典课程,详细讲述了jQuery的编写,适合零基础初学者,更适合培训没学明白的学生
jquery插件jquery-ui-1.8.2.custom.min.js
jQuery入门汇总---无私奉献!希望对你有帮助
jquery-1.3.2-vsdoc.js jquery-1.8.3.min.js jquery-1.3.2.min.js jquery-1.4.1-vsdoc.js jquery-1.4.1.min.js jquery-1.4.2-vsdoc.js jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js ...
jQuery入门篇-主要介绍了jQuery的一些基本功能,和使用方法,马上会上传他的核心代码!
jquery-ui-1.7.3.custom 完整开发包
jquery-ui-1.9.2.custom.min.js
jquery-1.11.0 + jquery-UI-1.10.4
jquery-migrate-1.2.1.min.js 可以更好的帮助 jqury-jqprint 兼容性问题
jquery.editable-select插件
jquery-ui-1.9.2.(免费),适合javascript开发者参考,包含各种美观的用户交互界面
呵呵,jquery-ui-1.7.1开发包!好就顶!
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
jquery-1.4.2.jsjquery-1.4.2-vsdoc.js Jquery-1.4.2及vs智能提示插件,内涵最新版Jquery包以及vs智能提示包。