首頁 > web前端 > css教學 > jQuery EasyUI 教學-Tooltip(提示框)

jQuery EasyUI 教學-Tooltip(提示框)

黄舟
發布: 2016-12-27 16:48:24
原創
2172 人瀏覽過

上一篇文章給大家介紹了jQuery EasyUI 教學-ProgressBar(進度條),這款組件前端開發人員在工作中普遍能用到,接下來給大家介紹這款jQuery-Tooltip(提示框)組件,在工作過程中也是非常有用的。

本文給大家詳細講述jQuery-Tooltip(提示框)的使用案例,並透過一步一步的程式碼實現過程,不僅讓您掌握Tooltip的實現,還提升您在前端開發工作的程式設計興趣和水平。

使用$.fn.tooltip.defaults重寫預設值物件。 (譯者註:1.3.3版新增的plugin)

當使用者將滑鼠移到元素上的時候,將會顯示一個訊息提示框。提示框的內容可以是頁面中任何一個HTML元素或透過Ajax傳送後台請求以取得提示框內容。

jQuery EasyUI 教學-Tooltip(提示框)

使用案例:

建立提示框

透過標籤和Javascript兩種方法來建立提示框。

1、透過標籤建立提示框,為元素增加一個」easyui-tooltip」的類別名,無需任何Javascript程式碼。

<a href=”#” title=”This is the tooltip message.” class=”easyui-tooltip”>Hover me</a>
登入後複製

2. 透過Javascript建立提示框。

<a id=”dd” href=”javascript:void(0)”>Click here</a>
登入後複製
$(‘#dd’).tooltip({
position: ‘right’,
content: ‘<span style=”color:#fff”>This is the tooltip message.</span>’,
onShow: function(){
$(this).tooltip(‘tip’).css({
backgroundColor: ‘#666′,
borderColor: ‘#666′
});
}
});
登入後複製

屬性:

jQuery EasyUI 教學-Tooltip(提示框)

事件:

jQuery EasyUI 教學-Tooltip(提示框)

方法:

jQuery EasyUI 教學-Tooltip(提示框)


方法:


🎜 網以上的內容提示圖. php.cn)! 🎜🎜🎜🎜🎜
相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
引入jQuery 文件
來自於 1970-01-01 08:00:00
0
0
0
jquery筆記哪裡有下?
來自於 1970-01-01 08:00:00
0
0
0
javascript - vue+webpack怎麼引入jquery
來自於 1970-01-01 08:00:00
0
0
0
php+jquery的問題
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板