jQuery Tools——不可错过的jQuery UI库(三)
2021年1月12日 | by tgcode
上一篇讲解了jQuery Tools中Tabs选项卡的用法和示例,本篇继续以示例的形式讲解Jquery Tools中的另两个组件tooltips(提示工具条)和expose(突出效果)。
-
Tooltips(提示工具条)
Tooltips(提示工具条),就是当把鼠标放在网页某个元素上时,显示某个提示信息,用以解释或提示当前操作。它是改善用户体验的一种方式,也是网页设计中经常用到的。
下面首先看一个最简单的应用示例(将鼠标移动到下面图片上):
The Tooltip
提示内容
HTML代码:
id="trigger">>
将鼠标移动到我的上面可以看到提示条
>Javascript代码:
$("#trigger").tooltip(); //为页面中id为trigger的区域添加tooltip效果
示例说明:
- CSS样式完全由你控制,这里是上面提示条的css,供你参考
- 上面是tooltip最简单的调用方法,没有配置任何参数。默认情况下:使用$(elements).tooltip();为页面所有elements元素绑定tooltip效果;tooltip显示的内容为elements后面紧跟的节点元素;提示条默认在触发元素的上方中央位置,以向上滑动的效果出现;
- 第二条中所提到的参数都是可以配置的,用以改变tooltip效果
下面再来看一个在表单中应用Tooltip的示例:
注册表单
HTML代码:
tgcodeid="myform">
>
注册表单>
用户名>
id="username" />
class="tooltip">用户名至少8个字母>
/>
密码>
id="password" type="password" />
class="tooltip">密码强度不够>
/>
邮箱>
id="email" />
class="tooltip">请输入合法格式Email>
/>
>Javascript代码
// 在id为myfortgcodem元素中的所有input输入框上应用tooltip效果
$("#myform :input").tooltip({
// 设置tooltip出现的位置
position: ['center', 'right'],
// 进一步微调tooltip的位置
offset: [-2, 10],
// 设置tooltip的显示/消失效果
effect: 'toggle',
// 设置tooltip透明度
opacity: 0.7
});使用方法比较简单,示例说明见代码注释。
-
Expose(突出效果)
Expose(我把它翻译成突出效果,可能不准确),好像在网页设计中比较少见,但用好了也是个相当人性化的设计。
下面先用一个最简单的例子看它是怎么回事:
鼠标点击这个区域看Expose效果,再点击方框以外区域或Esc键取消Expose效果在我看来,Expose效果的应用是为了让用户专注于页面的某个区域,浏览信息或完成某项工作,而不受其它干扰。例如,填写某个重要表单,更例如观看视频(下面的例子介绍)。
HTML代码:
id="test">>
鼠标点击这个区域看Expose效果点击方框以外区域或Esc键取消Expose效果
Javascript代码
// 在要添加效果元素的点击事件中调用expose的load方法,绑定效果。
$("#test").click(function() {
// 在点击事件中绑定expose效果,{api: true}是允许访问expose aptgcodei,以在后面调用load()方法
$(this).expose({api: true}).load();
});使用方法很简单,示例说明看代码注释。
本系列文章导航
jQuery Tools——不可错过的jQuery UI库(一)
jQuery Tools——不可错过的jQuery UI库(二)
jQuery Tools——不可错过的jQuery UI库(三)
jQuery Tools——不可错过的jQuery UI库(四)
本系列文章导航
jQuery Tools——不可错过的jQuery UI库(一)
jQuery Tools——不可错过的jQuery UI库(二)
jQuery Tools——不可错过的jQuery UI库(三)
jQuery Tools——不可错过的jQuery UI库(四)
jQuery Tools——不可错过的jQuery UI库(五)
jQuery Tools——不可错过的jQuery UI库(六)
本文写给那些像几年前的我一样刚刚走出校门,及一些未使用过tgcode这些高级些的调试技巧的人。 记得刚刚毕业的时候,自己连断点也不会打,当时还在用JCreate ,就连毕业设计也是用 System.out 找 Bug 的,想想真的很笨。开始工作后,一个…