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：傳送門(mén)
tab(幻燈片)：傳送門(mén)
tooltip：傳送門(mén)
overlay：傳送門(mén)
dateinput：傳送門(mén)
在攜程做著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：傳送門(mén)
tab(幻燈片)：傳送門(mén)
tooltip：傳送門(mén)
overlay：傳送門(mén)
dateinput：傳送門(mén)
在攜程做著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)文章
利用jquery的獲取JS文件中的字符串內(nèi)容的代碼，需要的朋友可以參考下2012-02-02
這篇文章主要介紹了jquery禁用右鍵示例,需要的朋友可以參考下2014-04-04
使用JavaScript+canvas實(shí)現(xiàn)圖片裁剪
這篇文章主要介紹了使用JavaScript+canvas實(shí)現(xiàn)圖片裁剪的方法,需要的朋友可以參考下2015-01-01
IE下使用jQuery重置iframe地址時(shí)內(nèi)存泄露問(wèn)題解決辦法
這篇文章主要介紹了IE下使用jQuery重置iframe地址時(shí)內(nèi)存泄露問(wèn)題解決辦法,需要的朋友可以參考下2015-02-02
ASP.NET jQuery 實(shí)例5 (顯示CheckBoxList成員選中的內(nèi)容)
這章我們主要看下如何通過(guò)jQuery來(lái)獲取CheckBoxList成員內(nèi)容2012-01-01
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)下載圖片的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
jQuery深拷貝Json對(duì)象簡(jiǎn)單示例
這篇文章主要介紹了jQuery深拷貝Json對(duì)象的簡(jiǎn)單實(shí)現(xiàn)方法,以簡(jiǎn)單示例形式分析了jQuery深拷貝的操作技巧,需要的朋友可以參考下2016-07-07
提交表單的方法有很多，想必大家都知道一些吧，下面為大家講解下使用ajax的方式提交整個(gè)表單，具體實(shí)現(xiàn)如下，有此需求的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
利用javascript/jquery對(duì)上傳文件格式過(guò)濾的方法
jquery中對(duì)上傳文件格式過(guò)濾的方法,需要的朋友參考下。2009-07-07
不知不覺(jué)10月都結(jié)束了，又要到年底了?？纯醋约荷洗螌?xiě)過(guò)的文章后，已經(jīng)2個(gè)月都沒(méi)寫(xiě)東西了2011-11-11