標籤：his table lan query 相關 隱藏 事件 nts dex
我們都知道DOM節點的title屬性。Tooptip組件就是比較強大的title，它能夠自由的設定自己的樣式、位置以及有自己相關的觸發事件。
示範範例：
<!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><link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /><script>$(function () {$.fn.tooltip.defaults.position = 'top';//重寫屬性的預設值$('#box').tooltip({//tooltip屬性content : '<strong>經緯恒潤科技</strong>',//提示框內容,支援html格式position : 'right',//訊息框位置,預設bootom,還有left、right、toptrackMouse : true,//當為true時。同意提示框尾隨滑鼠移動，默覺得falsedeltaX : 0,//水平方向位置調整參數deltaY : 0,//垂直方向位置調整參數showEvent : 'mouseenter',//當啟用事件的時候顯示提示框,預設mouseenterhideEvent : 'mouseleave',//當啟用事件的時候隱藏提示框,預設mouseleaveshowDelay : 500,//延長多少ms顯示提示框 預設200hideDelay : 500,//延長多少ms隱藏提示框 預設200//toolpit事件onShow : function (e) {//alert('顯示的時候觸發！');console.log($('#box').tooltip('tip'));console.log($('#box').tooltip('arrow'));$('.tooltip-bottom').css('left', 500);},onHide : function (e) {//alert('隱藏的時候觸發！');$('#box').tooltip('reposition');},onUpdate : function (cc) {//alert('提示框內容更新的時候觸發：' + content);},onPosition : function (left, top) {console.log('left:' + left + ',top:' + top); },onDestroy : function (e) {alert('提示框被銷毀的時候觸發！
');},});//tooptip方法：$('#box').click(function () {$(this).tooltip('update', '<font color="red" style="font-weight:bold;font-style:italic;" >恒潤科技</font>');//改變提示框內容//$(this).tooltip('destroy');//銷毀提示框});console.log($('#box').tooltip('options').content);//$('#box').tooltip('show');//顯示//$('#box').tooltip('hide');//隱藏});</script></head><body style="margin:100px;"><a href="###" title="這是title提示框">Hirain</a></br></br></br></br></br><a href="###" id="box">Hirain</a></br></br></br></br></br></body></html>
網上看到一個比較好的範例：
<!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><link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /><script>$(function () {var data = [{A:'name1',B:150,C:135,D:285,E:97},{A:'name2',B:59,C:96,D:155,E:167},{A:'name3',B:83,C:86,D:169,E:53},{A:'name4',B:66,C:61,D:127,E:158}];$('#dg').datagrid({columns:[[{field:'A',title:'A',width:100,formatter:formatA},{field:'B',title:'B',width:100},{field:'C',title:'C',width:100},{field:'D',title:'D',width:100}]],data: data,onLoadSuccess:function(){createTooltip();}});function formatA(value,row,index){return '<span data-p1='+index+' class="easyui-tooltip">' + value + '</span>';}function createTooltip(){$('#dg').datagrid('getPanel').find('.easyui-tooltip').each(function(){var index = parseInt($(this).attr('data-p1'));$(this).tooltip({content: $('<div></div>'),onUpdate: function(cc){var row = $('#dg').datagrid('getRows')[index];var content = '<div>content</div><ul>';content += '<li>name: '+row.A+'</li>';content += '<li>B: '+row.B+'</li>';content += '<li>C: '+row.C+'</li>';content += '<li>D: '+row.D+'</li>';content += '</ul>';cc.panel({width:200,content:content});},position:'right'});});}})</script></head><body> <table id="dg" style="width:400px;height:200px"></table></body></html>運行效果：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >
點擊下載源碼
jQuery Easy UI Tooptip(提示框)組件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
