jQuery Tools tooltip使用说明


Posted in Javascript onJuly 14, 2012

HTML

<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Tools standalone demo</title> 
<!-- include the Tools --> 
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> 
<link rel="stylesheet" type="text/css" 
href="./tooltip-generic.css"/> 
<style> 
#myform { 
border:1px outset #ccc; 
background:#fff repeat-x; 
padding:20px; 
margin:20px auto; 
width:350px; 
font-size:12px; 
-moz-border-radius:4px; 
} 
#myform h3 { 
text-align:center; 
margin:0 0 10px 0; 
} 
/* http://www.quirksmode.org/css/forms.html */ 
#inputs label, #inputs input, #inputs textarea, #inputs select { 
display: block; 
width: 150px; 
float: left; 
margin-bottom: 20px; 
} 
#inputs label { 
text-align: right; 
width: 75px; 
padding-right: 20px; 
} 
#inputs br { 
clear: left; 
} 
</style> 
</head> 
<body><form id="myform" action="#"> 
<h3>Registration Form</h3> 
<div id="inputs"> 
<!-- username --> 
<label for="username">Username</label> 
<input id="username" title="Must be at least 8 characters."/> 
<br /> 
<!-- password --> 
<label for="password">Password</label> 
<input id="password" type="password" title="Make it hard to guess." /> 
<br /> 
<!-- email --> 
<label for="email">Email</label> 
<input id="email" title="We won't send you any marketing material." /> 
<br /> 
<!-- message --> 
<label for="body">Message</label> 
<textarea id="body" title="What's on your mind?"></textarea> 
<br /> 
<!-- message --> 
<label for="where">Select one</label> 
<select id="where" title="Select one of these options"> 
<option>-- first option --</option> 
<option>-- second option --</option> 
<option>-- third option --</option> 
</select> 
<br /> 
</div> 
<!-- email --> 
<label> 
I accept the terms and conditions 
<input type="checkbox" id="check" title="Required to proceed" /> 
</label> 
<p> 
<button type="button" title="This button won't do anything"> 
Proceed 
</button> 
</p> 
</form> 
<!-- javascript coding --> 
<script> 
// execute your scripts when the DOM is ready. this is a good habit 
$(function() { 
// select all desired input fields and attach tooltips to them 
$("#myform :input").tooltip({ 
// place tooltip on the right edge 
position: "center right", 
// a little tweaking of the position 
offset: [-2, 10], 
// use the built-in fadeIn/fadeOut effect 
effect: "fade", 
// custom opacity setting 
opacity: 0.7 
}); 
}); 
</script> 
</body> 
</html>

CSS
/* simple css-based tooltip */ 
.tooltip { 
background-color:#000; 
border:1px solid #fff; 
padding:10px 15px; 
width:200px; 
display:none; 
color:#fff; 
text-align:left; 
font-size:12px; 
/* outline radius for mozilla/firefox only */ 
-moz-box-shadow:0 0 10px #000; 
-webkit-box-shadow:0 0 10px #000; 
}

CSS可以不需要,这样显示的样子恶心了点。
关键代码:
// select all desired input fields and attach tooltips to them 
$("#myform :input").tooltip({ 
// place tooltip on the right edge 
position: "center right", 
// a little tweaking of the position 
offset: [-2, 10], 
// use the built-in fadeIn/fadeOut effect 
effect: "fade", 
tipClass:'tooltip', // 省却值:tooltip,少了这一行效果也是一样 
// custom opacity setting 
opacity: 0.7 
});

使用
这里是可能存在的最简单的工具提示的初始化:

$("#myform :input").tooltip();配置

属性 默认值 描述
cancelDefault true 自从1.1.0版。 当工具提示内容抓取 从 标题 触发器元素的属性 这个属性取消默认工具提示执行的行为 浏览器。 这是通过简单的移除 这个 标题 属性从触发器。 你仍然可以检索/修改标题值通过调用 jQuery的 数据('title') 方法为触发。
effect 'toggle' 指定了如何显示和隐藏的提示。 有两个 内置的效果,可以用作值: toggle 。 一个简单的显示/隐藏效果。 这是 默认 fade 。 一个简单的淡入/淡出效果 还有一个 幻灯片效果 不 包括在该工具本身。 你可以 构建 你自己的。
delay 30 指定工具提示依然可见多久后鼠标 叶子触发器。 这是必需的,如果tootip已 互动的内容和用户将需要时间去 tootip区域。 通过设置0工具提示也会消失 鼠标离开就从触发器元素。
events Object 一个配置对象,它指定当工具提示会 显示和隐藏。 您可以指定不同的事件不同 类型的元素。 这里有默认值为这个 属性: events: {def: "mouseover,mouseout",input: "focus,blur",widget: "focus mouseover,blur mouseout",tooltip: "mouseover,mouseout"} JavaScript 你可以阅读更多关于这方面的内容这个 事件管理 一章。
layout '' 自从1.2.0 HTML布局为生成的工具提示。 可以很复杂的HTML布局如你所愿。 你可以,例如,添加一个嵌套的 跨度 元素作为箭的占位符。
offset [0, 0] 精细地调节工具提示指定位置这个 位置 属性。 看到这个 定位细节 更多的信息。
opacity 1 透明的工具提示。 例如,0意味着不可见, 1意味着没有透明度(完全可见)和0.4意味着40% 工具提示显示的。 如果你的工具提示使用CSS背景图像,你可以设置透明度的形象,如果它已经保存在PNG24图形格式。 记住,互联网 IE 6不支持原生透明的PNG。
position 'top center' 指定位置的工具提示。 看到这个 定位细节 更多的信息。 旧的格式:['top', 'center'] 是废弃,在未来将会被移除。
predelay 0 自从1.1.0版。 指定了延迟(在毫秒)工具提示显示之前。 默认情况下有没有延迟。
relative false 自从1.1.1。 默认情况下,工具提示位置现在决定相对于文档(通过使用这个 relative)的方法。 通过启用这个产权工具提示的位置是相对确定的父元素
tip   一个jQuery选择器为一个单一的工具提示的元素。 对于示例 # mytip 。 该选项仅有效如果你要手动定义一个工具提示多个触发器同时元素。 因为1.2.5 标题 属性仍然可以被用作工具提示内容。
tipClass 'tooltip' 自从1.2.0。 CSS类名生成的工具提示的元素。  
事件
确保你已经阅读 大约 事件 jQuery工具 。 所有事件监听器接收 这个 事件 对象 作为第一个参数。
事件 触发事件
onbeforeshow 在工具提示显示。 第二个参数是工具提示 要使用位置。 这是一个对象的值{top: integer, left: integer} 
onShow 在工具提示显示。
onBeforeHide 在工具提示是隐藏的
onHide 当这个工具提示是隐藏的。
下面的示例是一个onShow 回调函数, 淡出触发器元素当工具提示显示:
$("label").tooltip({ 
// change trigger opacity slowly to 0.8 
onShow: function() { 
this.getTrigger().fadeTo("slow", 0.8); 
} 
});

事件管理
jQuery工具提示可以让你完全控制 当 工具提示 将显示或隐藏。 您可以指定不同的事件 不同类型的元素。 你可以控制这种行为 这个 事件 配置变量,它具有以下 默认值:
events: { 
def: "mouseenter,mouseleave", // default show/hide events for an element 
input: "focus,blur", // for all input elements 
widget: "focus mouseenter,blur mouseleave", // select, checkbox, radio, button 
tooltip: "mouseenter,mouseleave" // the tooltip element 
}

脚本 api
首先确保你已经了解你自己 与 jQuery工具 脚本 。

以下列出的是所有API方法:

方法 返回值 描述/例子
show() api 显示工具提示。
hide() api 隐藏工具提示。
isShown(fully) 布尔 返回 真正的 如果这个工具提示是可见的。 自从1.2.0 你也可以使用一个布尔型参数,保证了 函数返回 真正的 只有当这个工具提示是充分的 可见(在它的最终位置和不透明性)。
getTip() jQuery 返回tooltip作为一个jQuery对象。
getTrigger() jQuery 返回元素作为一个jQuery对象的触发。
getConf() 对象 返回工具提示配置。
内置的效果: fade
内置的效果“渐”有它自己的一组配置选项 如下:
属性 默认值 描述
fadeInSpeed 400 淡入时速度显示工具提示,以毫秒为单位。
fadeoutspeed 200 当工具提示的淡出速度是隐藏着的,以毫秒为单位。

下面有个自定义事件的例子:http://jquerytools.org/demos/tooltip/custom-effect.htm

tab:传送门

tab(幻灯片):传送门

tooltip:传送门

overlay:传送门

dateinput:传送门
在携程做着framework2.0,研究的却是framework4.0,当时是怎么想的T.T。全是TMD老技术和堆代码

Javascript 相关文章推荐
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
Echarts如何重新渲染实例详解
May 30 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 #Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 #Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 #Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 #Javascript
js原型链原理看图说明
Jul 07 #Javascript
jqTransform form表单美化插件使用方法
Jul 05 #Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 #Javascript
You might like
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
JavaScript Array扩展实现代码
2009/10/14 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
基于python实现计算两组数据P值
2020/07/10 Python
如何写好升职自荐信
2014/01/06 职场文书
美术教师自我鉴定
2014/02/12 职场文书
建筑投标担保书
2014/05/20 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
员工保密协议书
2014/09/27 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
团委副书记工作总结
2015/08/14 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
灵能百分百第三季什么时候来?
2022/03/15 日漫
我的收音机情缘
2022/04/05 无线电
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技