Easyui---Tooltip( 提示框)

時間 2019-12-08

標籤 easyui tooltip 提示简体版

原文原文鏈接

學習要點：javascript

1.加載方式
2.屬性列表
3.事件列表
4.方法列表css

本節重點了解 EasyUI 中 Tooltip(提示框)組件的使用方法，這個組件不依賴於其餘組件。html

1、加載方式

Class加載方式java

<!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加載方式jquery

$('#box').tooltip({
    content : '這裏能夠輸入提示內容',
});

2、屬性列表

$('#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';