20151217jqueryUI學習筆記

破玉發表於2015-12-17
jQueryUI筆記

工具提示（tooltip），是一個非常實用的 UI。它徹底擴充套件了 HTML 中的 title 屬性，讓
提示更加豐富，更加可控制，全面提升了使用者體驗。
一． 呼叫 tooltip()方法
在呼叫 tooltip()方法之前，首先需要針對元素設定相應 title 屬性。

<input type="text" name="user" class="text" id="user" title="請輸入帳號， 不小於 2 位！ " />
$('#user').tooltip();

　　二． 修改 tooltip()樣式
在彈出的 tooltip 提示框後，在火狐瀏覽器中開啟 Firebug 或者右擊->檢視元素。這樣，
我們可以看看 tooltip 的樣式，根據樣式進行修改。

//無須修改 ui 裡的 CSS，直接用 style.css 替代掉
.ui-tooltip {
color:red;
}

　　注意：其他修改方案類似。
三． tooltip()方法的屬性
對話方塊方法有兩種形式： 1.tooltip(options)， options 是以物件鍵值對的形式傳參，每個
鍵值對錶示一個選項； 2.tooltip('action', param)， action 是操作對話方塊方法的字串， param
則是 options 的某個選項。


$('[title]').tooltip({
disabled : false,
content : '改變文字',
items : 'input',
tooltipClass : 'reg_tooltip'
});

　　

$('#user').tooltip({
position : {
my : 'left center',
at : 'right+5 center'
}
});

　　

$('#user').tooltip({
show : false,
hide : false,
});

　　注意： 設定 true 後， 預設為淡入淡出， 如果想使用別的特效， 可以使用以下表格中的字
符串引數。

$('#user').tooltip({
show : 'blind',
hide : 'blind',
});

　　

$('#user').tooltip({
track : true,
});

　　四． tooltip()方法的事件
除了屬性設定外， tooltip()方法也提供了大量的事件。這些事件可以給各種不同狀態時
提供回撥函式。這些回撥函式中的 this 值等於對話方塊內容的 div 物件， 不是整個對話方塊的 div。

//當建立工具提示時
$('#user').tooltip({
create : function () {
alert('建立觸發！ ');
}
});

　　

//當工具提示關閉時
$('#user').tooltip({
close : function () {
alert('關閉觸發');
}
});
//當工具提示開啟時
$('#user').tooltip({
open : function () {
alert('開啟觸發');
}
});

　　

//開啟工具提示
$('#user').tooltip('open');
//關閉工具提示
$('#user').tooltip('close');
//禁用工具提示
$('#user').tooltip('disable');
//啟用工具提示
$('#user').tooltip('enable');
//刪除工具提示
$('#user').tooltip('destroy');
//獲取工具提示 jQuery 物件
$('#user').tooltip('widget');
//獲取某個 options 的 param 選項的值
var title = $('#user').tooltip('option', 'content');
alert(title);
//設定某個 options 的 param 選項的值
$('#reg').dialog('option', 'content', '提示內容');

　　五． tooltip()中使用 on()
在 tooltip 的事件中，提供了使用 on()方法處理的事件方法。

$('#reg').on('tooltipopen', function () {
alert('開啟時觸發！ ');
});

　　





相關文章