20151217jqueryUI学习笔记
工具提示(tooltip),是一个非常实用的 UI。它彻底扩展了 HTML 中的 title 属性,让
提示更加丰富,更加可控制,全面提升了用户体验。
一. 调用 tooltip()方法
在调用 tooltip()方法之前,首先需要针对元素设置相应 title 属性。
<input type="text" name="user" class="text" id="user" title="请输入帐号, 不小于 2 位! " />
$('#user').tooltip();
二. 修改 tooltip()样式
在弹出的 tooltip 提示框后,在火狐浏览器中打开 Firebug 或者右击->查看元素。这样,
我们可以看看 tooltip 的样式,根据样式进行修改。
//无须修改 ui 里的 CSS,直接用 style.css 替代掉
.ui-tooltip {
color:red;
}
注意:其他修改方案类似。
三. tooltip()方法的属性
对话框方法有两种形式: 1.tooltip(options), options 是以对象键值对的形式传参,每个
键值对表示一个选项; 2.tooltip('action', param), action 是操作对话框方法的字符串, param
则是 options 的某个选项。
$('[title]').tooltip({
disabled : false,
content : '改变文字',
items : 'input',
tooltipClass : 'reg_tooltip'
});
$('#user').tooltip({
position : {
my : 'left center',
at : 'right+5 center'
}
});
$('#user').tooltip({
show : false,
hide : false,
});
注意: 设置 true 后, 默认为淡入淡出, 如果想使用别的特效, 可以使用以下表格中的字
符串参数。
$('#user').tooltip({
show : 'blind',
hide : 'blind',
});
$('#user').tooltip({
track : true,
});
四. tooltip()方法的事件
除了属性设置外, tooltip()方法也提供了大量的事件。这些事件可以给各种不同状态时
提供回调函数。这些回调函数中的 this 值等于对话框内容的 div 对象, 不是整个对话框的 div。
//当创建工具提示时
$('#user').tooltip({
create : function () {
alert('创建触发! ');
}
});
//当工具提示关闭时
$('#user').tooltip({
close : function () {
alert('关闭触发');
}
});
//当工具提示打开时
$('#user').tooltip({
open : function () {
alert('打开触发');
}
});
//打开工具提示
$('#user').tooltip('open');
//关闭工具提示
$('#user').tooltip('close');
//禁用工具提示
$('#user').tooltip('disable');
//启用工具提示
$('#user').tooltip('enable');
//删除工具提示
$('#user').tooltip('destroy');
//获取工具提示 jQuery 对象
$('#user').tooltip('widget');
//获取某个 options 的 param 选项的值
var title = $('#user').tooltip('option', 'content');
alert(title);
//设置某个 options 的 param 选项的值
$('#reg').dialog('option', 'content', '提示内容');
五. tooltip()中使用 on()
在 tooltip 的事件中,提供了使用 on()方法处理的事件方法。
$('#reg').on('tooltipopen', function () {
alert('打开时触发! ');
});
20151217jqueryUI学习笔记的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
- DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记
今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...
随机推荐
- org.apache.hadoop.io.LongWritable cannot be cast to org.apache.hadoop.io.Text
代码缺少这一行:job.setInputFormatClass(KeyValueTextInputFormat.class);
- JSP-讲解(生成java类、静态导入与动态导入)
一.JSP技术简介 JSP是Java Server Page的缩写,它是Servlet的扩展,它的作用是简化网站的创建和维护. JSP是HTML代码与Java代码的混合体. JSP文件通常以JSP或J ...
- 五指cms标签说明汇总
1.栏目列表标签 只有一级导航: {wz:content action="category" cid="0" pagesize="100" ...
- Linux中link,unlink,close,fclose详解
每一个文件,都可以通过一个struct stat的结构体来获得文件信息,其中一个成员st_nlink代表文件的链接数. 当通过shell的touch命令或者在程序中open一个带有O_CR ...
- hibernate4.0+版本和3.0+版本的区别总结
自己总结下hibernate4.1版本中的新特性和hibernate3.3做区别 1.数据库方言设置 <property name=”dialect”>org.hibernate.dial ...
- RIA算法解决最小覆盖圆问题
一.概念引入 最小包围圆问题:对于给定的平面上甩个点所组成的一个集合P,求出P的最小包围圆,即包含P中所有点.半径最小的那个圆.也就是求出这个最小 包围圆的圆心位置和半径. ...
- Android:从程序员到架构师之路Ⅰ
一般而言,人们大多先学开发(代码)的技术,随后才学(架构)设计的方法.然而,在实际做事时,却是先设计,随后才写出代码来.敏捷过程则让设计与写码迭代循环下去,一直到完成为止.在本课程里,就遵循敏捷的迭代 ...
- 学习Visitor Pattern 有感而发!override and overload
通过阅读各位前辈写的博文,像吕震宇,idior,李建忠WebCast等,对Visitor模式有一定的了解,有感而记录下来,以备忘. Visitor Pattern 假设了这样一个场景,在一个类型层次中 ...
- common
lexical_cast 提供string2int, int2string, #define(...) 可变宏:-和__VA_ARGS__ 宏定义中参数列表的最后一个参数为省略号(三个英文句号,省略 ...
- DevExpress GridControl 显示行号、设置行号宽
显示行号类 /// <summary> /// GridView 显示行号 设置行号列的宽度 /// </summary> /// <param name="g ...