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 相关文章推荐
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 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
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
Python三元运算实现方法
2015/01/12 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
python实现点对点聊天程序
2018/07/28 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
python中uuid模块实例浅析
2020/12/29 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
阿里旅行:飞猪
2017/01/05 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
食品安全工作方案
2014/05/07 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis