學習要點：
1.加載方式
2.屬性列表
3.事件列表
4.方法列表
本節重點了解 EasyUI 中 Tooltip(提示框)組件的使用方法， 這個組件不依賴於其他組件。
一、加載方式
Class加載方式
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /> </head> <body style="margin:100px;"> <a href="http://cq.itsource.cn" class="easyui-tooltip" title="這是內容提示框">Hover Me</a> <a href="http://cq.itsource.cn" id="box">Hover Me</a> </body> </html>
JS加載方式
$('#box').tooltip({
content : '這里可以輸入提示內容',
});
二、 屬性列表
$('#box').tooltip({
position : 'top',// position string 消息框位置。 默認 bootom， 還有 left、 right、 top
content : '這里可以輸入提示內容', //content string 消息框內容。默認為 null，可以包含 html 標簽
trackMouse : true, //trackMouse boolean 為true時， 允許提示框跟隨鼠標移動。 默認為false
deltaX : 100, //deltaX number 水平方向提示框的位置。默認為 0
deltaY : 100, //deltaY number 垂直方向提示框的位置。默認為 0
showEvent : 'click', //showEvent string 當激活事件的時候顯示提示框。 默認為 mouseenter
hideEvent : 'dblclick', //hideEvent string 當激活事件的時候顯示提示框。 默認為 mouseleave
showDelay : 500,//showDelay number 延時多少秒顯示提示框。默認 200
hideDelay : 500, //hideDelay number 延時多少秒隱藏提示框。默認 100
});
三． 事件列表
$('#box').tooltip({
content : '這里可以輸入提示內容',
onShow : function (e) {
alert('顯示提示框的觸發');
},
onHide : function (e) {
alert('隱藏提示框的觸發');
},
onUpdate : function (content) {
alert('內容更新為：' + content);
},
onPosition : function (left,top) {
console.log('left:' + left + ',top:' + top);
},
onDestroy : function (none) {
alert('提示框被銷毀的時候觸發');
},
});
四． 方法列表
//返回屬性對象 console.log($('#box').tooltip('options')); //顯示提示框 $('#box').tooltip('show'); //隱藏提示框 $('#box').tooltip('hide'); //更新 content 內容 $('#box').tooltip('update', '更新提示內容'); //返回 tip 元素對象 onShow : function () { console.log($('#box').tooltip('tip')); }, //返回箭頭元素對象 onShow : function () { console.log($('#box').tooltip('arrow')); }, //銷毀提示框 $('#box').tooltip('destroy'); //重置工具欄位置 onShow : function (e) { $('.tooltip-right').css('left', 500); }, onHide : function (e) { $('#box').tooltip('reposition'); }, PS：我們可以使用$.fn.tooltip.defaults 重寫默認值對象。 $.fn.tooltip.defaults.position = 'top';