jQuery Tools tooltip使用說(shuō)明
更新時(shí)間：2012年07月14日 11:15:12 作者：
老規(guī)矩，先上html和css,還是用官方的，只是去掉了些東西
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可以不需要，這樣顯示的樣子惡心了點(diǎn)。
關(guān)鍵代碼：
// 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
});
使用
這里是可能存在的最簡(jiǎn)單的工具提示的初始化:
$("#myform :input").tooltip();配置
事件
確保你已經(jīng)閱讀 大約 事件 jQuery工具 。 所有事件監(jiān)聽(tīng)器接收 這個(gè) 事件 對(duì)象 作為第一個(gè)參數(shù)。
下面的示例是一個(gè)onShow 回調(diào)函數(shù), 淡出觸發(fā)器元素當(dāng)工具提示顯示:
$("label").tooltip({
// change trigger opacity slowly to 0.8
onShow: function() {
this.getTrigger().fadeTo("slow", 0.8);
}
});
事件管理
jQuery工具提示可以讓你完全控制 當(dāng) 工具提示 將顯示或隱藏。 您可以指定不同的事件 不同類型的元素。 你可以控制這種行為 這個(gè) 事件 配置變量,它具有以下 默認(rèn)值:
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
首先確保你已經(jīng)了解你自己 與 jQuery工具 腳本 。
以下列出的是所有API方法:
內(nèi)置的效果: fade
內(nèi)置的效果“漸”有它自己的一組配置選項(xiàng) 如下:
下面有個(gè)自定義事件的例子：http://jquerytools.org/demos/tooltip/custom-effect.htm
tab：傳送門
tab(幻燈片)：傳送門
tooltip：傳送門
overlay：傳送門
dateinput：傳送門
在攜程做著framework2.0，研究的卻是framework4.0，當(dāng)時(shí)是怎么想的T.T。全是TMD老技術(shù)和堆代碼
復(fù)制代碼 代碼如下:
<!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
復(fù)制代碼 代碼如下:
/* 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可以不需要，這樣顯示的樣子惡心了點(diǎn)。
關(guān)鍵代碼：
復(fù)制代碼 代碼如下:
// 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
});
使用
這里是可能存在的最簡(jiǎn)單的工具提示的初始化:
$("#myform :input").tooltip();配置
| 屬性 | 默認(rèn)值 | 描述 |
|---|---|---|
| cancelDefault | true |
自從1.1.0版。 當(dāng)工具提示內(nèi)容抓取 從 標(biāo)題 觸發(fā)器元素的屬性 這個(gè)屬性取消默認(rèn)工具提示執(zhí)行的行為 瀏覽器。 這是通過(guò)簡(jiǎn)單的移除 這個(gè) 標(biāo)題 屬性從觸發(fā)器。
你仍然可以檢索/修改標(biāo)題值通過(guò)調(diào)用 jQuery的 數(shù)據(jù)('title') 方法為觸發(fā)。 |
| effect | 'toggle' |
指定了如何顯示和隱藏的提示。 有兩個(gè) 內(nèi)置的效果,可以用作值:
toggle 。 一個(gè)簡(jiǎn)單的顯示/隱藏效果。 這是 默認(rèn) fade 。 一個(gè)簡(jiǎn)單的淡入/淡出效果 還有一個(gè) 幻燈片效果 不 包括在該工具本身。 你可以 構(gòu)建 你自己的。 |
| delay | 30 |
指定工具提示依然可見(jiàn)多久后鼠標(biāo) 葉子觸發(fā)器。 這是必需的,如果tootip已 互動(dòng)的內(nèi)容和用戶將需要時(shí)間去 tootip區(qū)域。 通過(guò)設(shè)置0工具提示也會(huì)消失 鼠標(biāo)離開(kāi)就從觸發(fā)器元素。 |
| events | Object |
一個(gè)配置對(duì)象,它指定當(dāng)工具提示會(huì) 顯示和隱藏。 您可以指定不同的事件不同 類型的元素。 這里有默認(rèn)值為這個(gè) 屬性:
events: {JavaScript 你可以閱讀更多關(guān)于這方面的內(nèi)容這個(gè) 事件管理 一章。 |
| layout | '<div/>' |
自從1.2.0 HTML布局為生成的工具提示。 可以很復(fù)雜的HTML布局如你所愿。 你可以,例如,添加一個(gè)嵌套的 跨度 元素作為箭的占位符。 |
| offset | [0, 0] |
精細(xì)地調(diào)節(jié)工具提示指定位置這個(gè) 位置 屬性。 看到這個(gè) 定位細(xì)節(jié) 更多的信息。 |
| opacity | 1 |
透明的工具提示。 例如,0意味著不可見(jiàn), 1意味著沒(méi)有透明度(完全可見(jiàn))和0.4意味著40% 工具提示顯示的。 如果你的工具提示使用CSS背景圖像,你可以設(shè)置透明度的形象,如果它已經(jīng)保存在PNG24圖形格式。 記住,互聯(lián)網(wǎng) IE 6不支持原生透明的PNG。 |
| position | 'top center' |
指定位置的工具提示。 看到這個(gè) 定位細(xì)節(jié) 更多的信息。 舊的格式:['top', 'center'] 是廢棄,在未來(lái)將會(huì)被移除。 |
| predelay | 0 |
自從1.1.0版。 指定了延遲(在毫秒)工具提示顯示之前。 默認(rèn)情況下有沒(méi)有延遲。 |
| relative | false |
自從1.1.1。 默認(rèn)情況下,工具提示位置現(xiàn)在決定相對(duì)于文檔(通過(guò)使用這個(gè) relative)的方法。 通過(guò)啟用這個(gè)產(chǎn)權(quán)工具提示的位置是相對(duì)確定的父元素 |
| tip | 一個(gè)jQuery選擇器為一個(gè)單一的工具提示的元素。 對(duì)于示例 # mytip 。 該選項(xiàng)僅有效如果你要手動(dòng)定義一個(gè)工具提示多個(gè)觸發(fā)器同時(shí)元素。 因?yàn)?.2.5 標(biāo)題 屬性仍然可以被用作工具提示內(nèi)容。 | |
| tipClass | 'tooltip' |
自從1.2.0。 CSS類名生成的工具提示的元素。 |
確保你已經(jīng)閱讀 大約 事件 jQuery工具 。 所有事件監(jiān)聽(tīng)器接收 這個(gè) 事件 對(duì)象 作為第一個(gè)參數(shù)。
| 事件 | 觸發(fā)事件 |
|---|---|
| onbeforeshow | 在工具提示顯示。 第二個(gè)參數(shù)是工具提示 要使用位置。 這是一個(gè)對(duì)象的值{top: integer, left: integer} |
| onShow | 在工具提示顯示。 |
| onBeforeHide | 在工具提示是隱藏的 |
| onHide | 當(dāng)這個(gè)工具提示是隱藏的。 |
復(fù)制代碼 代碼如下:
$("label").tooltip({
// change trigger opacity slowly to 0.8
onShow: function() {
this.getTrigger().fadeTo("slow", 0.8);
}
});
事件管理
jQuery工具提示可以讓你完全控制 當(dāng) 工具提示 將顯示或隱藏。 您可以指定不同的事件 不同類型的元素。 你可以控制這種行為 這個(gè) 事件 配置變量,它具有以下 默認(rèn)值:
復(fù)制代碼 代碼如下:
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
首先確保你已經(jīng)了解你自己 與 jQuery工具 腳本 。
以下列出的是所有API方法:
| 方法 | 返回值 | 描述/例子 |
|---|---|---|
| show() | api |
顯示工具提示。 |
| hide() | api |
隱藏工具提示。 |
| isShown(fully) | 布爾 |
返回 真正的 如果這個(gè)工具提示是可見(jiàn)的。 自從1.2.0 你也可以使用一個(gè)布爾型參數(shù),保證了 函數(shù)返回 真正的 只有當(dāng)這個(gè)工具提示是充分的 可見(jiàn)(在它的最終位置和不透明性)。 |
| getTip() | jQuery |
返回tooltip作為一個(gè)jQuery對(duì)象。 |
| getTrigger() | jQuery |
返回元素作為一個(gè)jQuery對(duì)象的觸發(fā)。 |
| getConf() | 對(duì)象 |
返回工具提示配置。 |
內(nèi)置的效果“漸”有它自己的一組配置選項(xiàng) 如下:
| 屬性 | 默認(rèn)值 | 描述 |
|---|---|---|
| fadeInSpeed | 400 | 淡入時(shí)速度顯示工具提示,以毫秒為單位。 |
| fadeoutspeed | 200 | 當(dāng)工具提示的淡出速度是隱藏著的,以毫秒為單位。 |
下面有個(gè)自定義事件的例子：http://jquerytools.org/demos/tooltip/custom-effect.htm
tab：傳送門
tab(幻燈片)：傳送門
tooltip：傳送門
overlay：傳送門
dateinput：傳送門
在攜程做著framework2.0，研究的卻是framework4.0，當(dāng)時(shí)是怎么想的T.T。全是TMD老技術(shù)和堆代碼
您可能感興趣的文章:
- jquery tools之tooltip
- jQuery帶箭頭提示框tooltips插件集錦
- 使用jQuery UI的tooltip函數(shù)修飾title屬性的氣泡懸浮框
- 25個(gè)優(yōu)雅的jQuery Tooltip插件推薦
- 基于jquery的自定義鼠標(biāo)提示效果 jquery.toolTip
- qTip 基于JQuery的Tooltip插件[兼容性好]
- Jquery實(shí)現(xiàn)自定義tooltip示例代碼
- jQuery插件Tooltipster實(shí)現(xiàn)漂亮的工具提示
- jquery插件tooltipv頂部淡入淡出效果使用示例
- jQuery自制提示框tooltip改進(jìn)版
- jQuery實(shí)現(xiàn)ToolTip元素定位顯示功能示例
相關(guān)文章
無(wú)限樹(shù)Jquery插件zTree的常用功能特性總結(jié)
這篇文章主要對(duì)無(wú)限樹(shù)Jquery插件zTree的常用功能特性總結(jié)，ztree的語(yǔ)法結(jié)構(gòu)是基于key-value的形式配置,需要的朋友可以參考下2014-09-09
利用jquery.qrcode在頁(yè)面上生成二維碼且支持中文
這篇文章主要介紹了利用jquery.qrcode在頁(yè)面上生成二維碼且支持中文。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
讀jQuery之七 判斷點(diǎn)擊了鼠標(biāo)哪個(gè)鍵的代碼
jQuery中的which即可以是鍵盤的鍵值，也可以是鼠標(biāo)的鍵值。2011-06-06
隨著DOM結(jié)構(gòu)的復(fù)雜化和Ajax等動(dòng)態(tài)腳本技術(shù)的運(yùn)用，事件委托自然浮出了水面2011-11-11
基于JQuery的列表拖動(dòng)排序?qū)崿F(xiàn)代碼
基于JQuery的拖動(dòng)插件有幾個(gè)都相當(dāng)好用，效果也很好，但再好，還是自己琢磨一個(gè)最好。所以，我的理念就是即使實(shí)際項(xiàng)目中使用別人的程序，自己也得根據(jù)自己的理解和想法寫一個(gè)出來(lái)。那么今天，就來(lái)看看我的思路是不是可以實(shí)現(xiàn)拖動(dòng)排序的功能2013-10-10
jquery實(shí)時(shí)獲取時(shí)間的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery實(shí)時(shí)獲取時(shí)間的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
關(guān)于jQuery里prev()的簡(jiǎn)單操作代碼
這篇文章主要介紹了jQuery里prev()的簡(jiǎn)單操作代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-10-10
分享有關(guān)jQuery中animate、slide、fade等動(dòng)畫的連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的bug
這篇文章主要介紹了分享有關(guān)jQuery中animate、slide、fade等動(dòng)畫的連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的bug的相關(guān)資料,需要的朋友可以參考下2016-01-01
分享精心挑選的12款優(yōu)秀jQuery Ajax分頁(yè)插件和教程
在這篇文章中，我為大家收集了12個(gè)基于 jQuery 框架的 Ajax 分頁(yè)插件，這些插件都提供了詳細(xì)的使用教程和演示2012-08-08
jQuery ajax的功能實(shí)現(xiàn)方法詳解
jQuery的ajax方法非常好用，這么好的東西，你想擁有一個(gè)屬于自己的ajax么？接下來(lái)，我們來(lái)自己做一個(gè)簡(jiǎn)單的ajax吧2017-01-01