`

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

相关推荐

    jquery.doc

    在 "15 Days of jQuery (Day 2)" 中,教程展示了如何轻松创建双色表格。传统的 CSS 方法可能需要编写较多的代码,而 jQuery 只需几行就能实现相同的效果。这凸显了 jQuery 在简化任务和提高开发效率方面的价值。 ...

    jQuery计时器插件TimeCircles多种效果

    **jQuery计时器插件TimeCircles:丰富的定时与倒计时解决方案** TimeCircles是一款基于jQuery的轻量级插件,它为开发者提供了一种优雅的方式来创建视觉上吸引人的计时器和倒计时器。这个插件以其灵活性、易用性和...

    【JavaScript源代码】jQuery实现可以扩展的日历.docx

    【JavaScript源代码】jQuery实现可扩展日历 在IT行业中,开发自定义的用户界面组件是一种常见的需求,尤其是在Web开发中。本示例探讨的是如何使用JavaScript和jQuery库创建一个可扩展的日历插件,以满足特定的产品...

    jQuery实现的某酒店预订页面双日期选择框的效果源码.zip

    endDate: moment().add(6, 'days').startOf('day'), minDate: moment(), maxSpan: { days: 30 }, showDropdowns: true, showWeekNumbers: true, timePicker: false, timePickerIncrement: 1, timePicker12...

    javasctipt如何显示几分钟前、几天前等.docx

    ### JavaScript 如何显示几分钟前、几天前等时间差方法详解 #### 标题与描述解析: 标题和描述都提到了“JavaScript如何显示几分钟前、几天前等”。这明确指向了一个功能性的需求——即如何在前端使用JavaScript...

    jQuery时间日期三级联动(推荐)

    1. **jQuery库**:此示例依赖于jQuery库,它是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。在这个例子中,`&lt;script src="js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;`引入了jQuery库。 2. **...

    寒假倒计时

    6. **其他脚本和图片**:`hj.js`可能包含一些自定义的JavaScript逻辑,而`8cm.jpg`和`bg-100day.jpg`则是背景图片,用于美化倒计时的视觉效果。 为了使这个倒计时应用更加通用,开发者可能采用了动态设定目标日期的...

    jQuery日历插件CLNDR特效代码

    **jQuery日历插件CLNDR详解** ...总之,jQuery日历插件CLNDR是一款强大且灵活的前端工具,适用于各种日历应用场景。通过熟练掌握其核心特性和使用方法,开发者能轻松实现富有动态效果的日历界面,提升用户体验。

    JavaScript blog式日历控件

    根据给定的信息,“JavaScript blog式日历控件”是一个用于网页的日历插件或组件,其功能在于提供一个用户友好的界面来展示日期,并允许用户选择特定日期。然而,该日历控件的一个限制是它不能以弹出窗口的形式显示...

    timeago.js自动将时间戳转换为更易读的时间轴

    "timeago.js"正是一款解决此问题的JavaScript库,它专门设计用于将Unix时间戳或者日期对象转换为人类可读的、富有语义的时间描述,比如“5分钟前”或“约3小时前”。这款插件基于广泛使用的jQuery框架,因此在兼容性...

    情人节程序员用HTML网页表白【爱的计时】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

    &lt;script src="./jscss/jquery-1.8.3.min.js" type="text/javascript"&gt; &lt;script type="text/javascript"&gt; $(window).resize(function(){ var containerWidth = $('.container').outerWidth(); var windowWidth =...

    jquery 简单应用示例总结

    jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过减少HTML文档遍历、事件处理、动画和Ajax交互的代码量,使得Web开发变得更加便捷。本文将总结一些在实际应用中常见的jQuery功能片段,并对每个知识点进行...

    日期插件datarangepicker使用demo

    【日期插件datarangepicker使用demo】是一款在前端开发中常用的工具,主要用于用户在Web页面上选择日期或日期范围。这个插件以其易用性、灵活性和丰富的自定义选项而受到开发者们的青睐。下面我们将详细探讨这个插件...

    jQuery 实现倒计时天,时,分,秒功能

    在本文中,我们将探讨如何使用jQuery来实现一个倒计时功能,显示剩余的天数、小时数、分钟数和秒数。这个功能在各种应用场景中都很常见,例如在线考试、活动截止日期提醒或者产品发布的倒计时等。 首先,我们需要...

    html 渲染 vue的日历页面

    &lt;td v-for="day in week.days" :key="day.date"&gt; &lt;!-- 显示日期和签到状态 --&gt; (day)"&gt;{{ day.date }} ``` 在JavaScript部分,我们定义Vue组件的选项,包括数据、方法等: ```javascript export ...

    js简易日历特效原生代码

    "js简易日历特效原生代码"的标题暗示了我们将探讨如何利用纯JavaScript实现一个基本的日历功能,无需依赖任何外部库,如jQuery或其他日期管理库。 首先,让我们了解JavaScript中的日期处理。JavaScript内置了一个`...

    JS秒杀倒计时功能完整实例【使用jQuery3.1.1】

    在本实例中,我们使用了JavaScript和jQuery库来实现一个动态的倒计时功能,具体实现如下: 1. 页面结构设计:使用HTML标签来展示倒计时的时间单位,包括天、小时、分钟和秒。这里利用了四个`&lt;span&gt;`标签,它们的ID...

    基于javascript实现的购物商城商品倒计时实例

    【JavaScript实现购物商城商品倒计时】 在电子商务网站中,商品倒计时是常见的功能,用于展示促销活动剩余时间或预购商品的开启时间。这个功能可以增加用户的紧迫感,促进销售。本文将深入讲解如何使用JavaScript来...

    mini_clndr:迷你日历,用于使用下划线js,jquery和clndr.js显示事件

    1. Underscore.js:这是一个轻量级的JavaScript实用工具库,提供了许多函数式编程的帮助方法,如数组操作、对象处理等。在创建日历时,我们可以利用Underscore.js来处理和格式化日期数据。 2. jQuery:这是一个广泛...

    JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享

    var halfAMonth = day * 15; var month = day * 30; function getDateDiff(dateTimeStamp) { var now = new Date().getTime(); var diffValue = now - dateTimeStamp; // ...后续的逻辑处理... } ``` 在这个`...

Global site tag (gtag.js) - Google Analytics