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
'<div/>'
自從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老技術和堆代碼