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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
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与ASP
2006/10/09 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
javascript中对对层的控制
2006/12/29 Javascript
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
Js动态创建div
2008/09/25 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
DOM 事件流详解
2015/01/20 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
浅析python中的迭代与迭代对象
2018/10/08 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
销售代理协议书
2014/09/30 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
毕业证明模板
2015/06/19 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
课改心得体会范文
2016/01/25 职场文书
JS setTimeout与setInterval的区别
2022/04/20 Javascript