jQuery tools 的 tooltip 教學

轉貼自：http://inspire.twgg.org/programming/jquery/item/165-jquery-tools-of-tooltip-teaching.html

接著上次tabs的學習，今天繼續jquery tools六大功能的第二個功能——tooltip的學習。 如tabs的學習，首先給出操作的html目標代碼：

<form id="myform"> 
<h3> Registration Form</h3> 
<!-- username --> 
<label for="username">Username</label> 
<input id="username" /> 
<div class="tooltip">Must be at least 8 characters.</div><br/> 
<!-- password --> 
<label for="password">Password</label> 
<input id="password" type="password" /> 
<div class="tooltip">Try to make it hard to guess.</div><br /> 
<!-- email --> 
<label for="username">Email</label> 
<input id="email" /> 
<div class="tooltip">We won't send you any marketing material.</div><br /> 
<!-- message --> 
<label for="body">Message</label> 
<textarea id="body"></textarea> 
<div class="tooltip">What's on your mind?</div><br /> 
</form> 

該功能是通過jqueryObject.tooltip()方法來實現的，其中tabs方法提供以下兩種方式：
1. $("#myform :input").tooltip()//該方法能採用默認方法顯示提示信息欄
2. $("#myform :input").tooltip({config object}) //該方法通過配置對像將來靈活組織提示信息欄的顯示。
以下代碼為第二種方式的配置參數實現（只需將該實現放於jquery的ready方法中即可）：

$("#myform :input").tooltip({ 
position:['center','right'], 
offset:[-2,10], 
effect:'fade', 
fadeInSpeed:300//此屬性只有在effect為fade時有效 
delay:0, 
opacity:1, 
tip:"", 
api:false, 
onBeforeShow:function(){ 
//alert(this.getTip().html());//this在該回調函數代表即將顯示的tooltip對像 
//，關於該api對象的操作參見獲取tolltip對象的方法 
}, 
onShow:function(){ 
//alert(this.getTip().html()); 
}, 
onBeforeHide:function(){ 
//alert(this.getTip().html()); 
}, 
onHide:function(){ 
//alert(this.getTip().html()); 
} 
}); 

下面就以上配置參數說明描述如下：

屬性	默認值	描述
effect	slideup'	設置提示框出項和隱藏方式，系統提供提供三種effect:toggle，fade，slideup，當然用戶也可以定製所需的effect。對於系統提供的三種effect，系統也提供了與其對應的配置參數，這裡會在下面單獨仔細描述。
delay	30	設置鼠標離開觸發提示框的觸發器後提示框顯示時間
offset	[0, 0]	精確的調整提示框的位置，該屬性具體使用將在下面提示框位置說明中詳細描述。
opacity	1	設置提示框的透明度，取值為0-1，值越大表示提示框透明度越低，0為完全透明，此時提示框如同不顯示，為1則提示框完全不透明如果背景圖片設置為PNG24圖形格式，則可以設置背景圖片的透明度
position	['top', 'center']	初略的設置提示框位置，如需精確控制提示框位置，需配合offset使用，該屬性具體使用將在下面提示框位置說明中詳細描述。
tip		設 置存儲提示框信息的頁面元素，tip值格式為jquery選擇器格式.默認情況下，提示框信息存放於觸犯器元素的下一個緊鄰的兄弟節點處,如果該處選擇器 選擇的是頁面元素id的話，那麼該頁面元素將成為所有觸發器的提示信息；否則，如果選擇器選擇出多個結果，那麼，每個觸發器都會找到其後第一個符合的頁面 元素作為提示信息.如果沒有的話，就從觸發器父親節點重新檢索。
api	FALSE	設置當前tooltip所在容器的返回類型類型。如果為false(默認值)，以jquery對像返回；否則，以js對像返回。如果存在多個值，返回最後一個值。
onBeforeShow		提示信息出現之前調用該屬性觸發的函數，如果該回調函數返回false,那麼就會阻止提示信息顯示。
onShow		提示信息顯示後調用該屬性觸發的函數
onBeforeHide		提示信息顯示後調用該屬性該屬性觸發的函數,如果該回調函數返回false,那麼就會阻止提示信息隱藏
onHide		提示信息隱藏後調用該屬性該屬性觸發的函數

 

提示框位置說明

提示框位置通過config配置對象的position和offset屬性來設置實現。這兩個屬性都是用js數組進行值存放的。

Position屬性用來設置提示信息相對於它的觸發元素位置。比如說，如果該屬性值為[『bottom','center']，那麼提示信息將會出現在其觸發元素的正下方（垂直位置為下方，水平位置為中間）。下圖能很好的描述觸發元素與提示信息的位置關係：

 

offset屬性用來進一步精確的調整提示框的位置。比如：[10,-20]表示提示信息向下10px並向左偏移20px。數組的前一個值用於描述提示框距其上邊框向下偏移的值；數組的後一個值 用於描述提示框距其左邊框向右偏移的值。

系統內置effect描述

系統內置的三種effect及其參數設置說明：

toggle:一種簡單的顯示/隱藏效果，這裡tooltip沒有提供與之對應的配置參數

fade:一種逐漸顯示/逐漸隱藏的效果，這裡tooltip提供了兩個與其對應的配置參數：

fadeInSpeed——默認值為200ms，用於設置提示信息逐漸顯示的速度。

fadeUotSpeed——默認值為200ms，用於設置提示信息逐漸隱藏的速度。

slideup:一種逐漸向上/下滑動的效果，這裡tooltip提供了三個與其對應的配置參數：

slideOffset——默認值為10，用於描述提示信息在垂直方向上滑動到距觸發元素的距離，如果為正值，那麼就是向上滑動，否則為向下滑動。

slideInSpeed——默認值為200ms。用於設置提示信息滑動顯示的速度（時間）

slideOutSpeed——默認值為200ms。用於設置提示信息滑動消失的速度（時間）

此外，tooltip還提供了一系列獲取tooltip對象的方法，具體實現描述如下：

var tooltip=$("#myform input").tooltip(2);//取第3個tooltip對像 
tooltip.show(); 
tooltip.hide(); 
//alert(tooltip.isShown()); 
//alert(tooltip.getTip().html()); 
//alert(tooltip.getTrigger().next().html()); 
//alert(tooltip.getConf().effect); 
tooltip.onBeforeShow=function() 
//alert(this.getTip().html()); 
} 
tooltip.onShow=function(){ 
alert(this.getTip().html()); 
} 
tooltip.onBeforeHide=function(){ 
alert(this.getTip().html()); 
} 
tooltip.onHide=function(){ 
alert(this.getTip().html()); 
} 

下面就以上獲取tooltip對象的方法說明描述如下：

方法名	返回值	描述
show()	API	顯示提示信息，如果取到多個tooltip對象，默認顯示第一個tooltip對像提示信息
hide()	API	隱藏提示信息
isShown()	boolean	該tooltip對象的提示信息是否處於顯示狀態
getTip()	jQuery	將當前tooltip對像轉換為jquery對像
getTrigger()	jQuery	將當前tooltip的觸發器對像轉換為jquery對像
getConf()	Object	getConf()獲取當前觸發器器配置對象，對於對像內的每個屬性調用只需直接取屬性名即可
onBeforeShow	API	同Config參數配置對像中的onBeforeShow
onShow	API	同Config參數配置對像中的onShow
onBeforeHide	API	同Config參數配置對像中的onBeforeHide
onHide	API	同Config參數配置對像中的onHide

 

最後，以jquery tools上幾個demo的截圖為結尾：