第一百九十六節，jQuery EasyUI，Tooltip(提示框)組件

jQuery EasyUI，Tooltip(提示框)組件

 

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.事件列表

　　4.方法列表

 

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

 

一．加載方式

//class 加載方式
<a href="http://www.ycku.com" title="這是一個提示信息！"
　　class="easyui-tooltip">Hover Me
</a>

 

//JS 加載調用
$('#box').tooltip({
　　content : '這里可以輸入提示內容',
});

 

 

二．屬性列表

position string 消息框位置。默認 bootom，還有 left、right、top，設置提示框位置

$(function () {
    $('#box').tooltip({
        content : '這里可以輸入提示內容',
        position:'right'                    //設置提示框位置
    });
});

 

content string 消息框內容。默認為 null，可以包含 html 標簽，設置提示內容可以包含html標簽

$(function () {
    $('#box').tooltip({
        content : '這里可以輸入提示內容'
    });
});

 

trackMouse boolean 為true時，允許提示框跟隨鼠標移動。默認為false

$(function () {
    $('#box').tooltip({
        content : '這里可以輸入提示內容',
        position:'right',                    //設置提示框位置
        trackMouse:true                      //允許提示框跟隨鼠標移動
    });
});

 

deltaX number 水平方向提示框的位置。默認為 0，設置提示框水平位置

$(function () {
    $('#box').tooltip({
        content : '這里可以輸入提示內容',
        position:'right',                    //設置提示框位置
        deltaX:20,                          //設置提示框水平位置
        deltaY:20                           //設置提示框垂直位置
    });
});

 

deltaY number 垂直方向提示框的位置。默認為 0，設置提示框垂直位置

$(function () {
    $('#box').tooltip({
        content : '這里可以輸入提示內容',
        position:'right',                    //設置提示框位置
        deltaX:20,                          //設置提示框水平位置
        deltaY:20                           //設置提示框垂直位置
    });
});

 

showEvent string 當激活事件的時候顯示提示框。默認為 mouseenter，設置什么事件顯示提示框

$(function () {
    $('#box').tooltip({
        content : '這里可以輸入提示內容',
        // position:'right',                    //設置提示框位置
        // deltaX:20,                          //設置提示框水平位置
        // deltaY:20                           //設置提示框垂直位置
        showEvent:'mouseenter',                 //鼠標移入顯示
        hideEvent:'mouseleave'                 //鼠標移出隱藏
    });
});

 

hideEvent string 當激活事件的時候隱藏提示框。默認為 mouseleave，設置什么事件隱藏提示框

$(function () {
    $('#box').tooltip({
        content : '這里可以輸入提示內容',
        // position:'right',                    //設置提示框位置
        // deltaX:20,                          //設置提示框水平位置
        // deltaY:20                           //設置提示框垂直位置
        showEvent:'mouseenter',                 //鼠標移入顯示
        hideEvent:'mouseleave'                 //鼠標移出隱藏
    });
});

 

showDelay number 延時多少秒顯示提示框。默認 200，設置延遲顯示時間

$(function () {
    $('#box').tooltip({
        content : '這里可以輸入提示內容',
        // position:'right',                    //設置提示框位置
        // deltaX:20,                          //設置提示框水平位置
        // deltaY:20                           //設置提示框垂直位置
        // showEvent:'mouseenter',                 //鼠標移入顯示
        // hideEvent:'mouseleave'                 //鼠標移出隱藏
        showDelay:200,                          //設置延遲顯示時間
        hideDelay:200                           //設置延遲隱藏時間
    });
});

 

hideDelay number 延時多少秒隱藏提示框。默認 100，設置延遲隱藏時間

$(function () {
    $('#box').tooltip({
        content : '這里可以輸入提示內容',
        // position:'right',                    //設置提示框位置
        // deltaX:20,                          //設置提示框水平位置
        // deltaY:20                           //設置提示框垂直位置
        // showEvent:'mouseenter',                 //鼠標移入顯示
        // hideEvent:'mouseleave'                 //鼠標移出隱藏
        showDelay:200,                          //設置延遲顯示時間
        hideDelay:200                           //設置延遲隱藏時間
    });
});

 

 

三．事件列表

onShow  e 在顯示提示框的時候觸發

$(function () {
    $('#box').tooltip({
        content : '這里可以輸入提示內容',
        onShow:function () {
            alert('在顯示提示框的時候觸發');
        }
    });
});

 

onHide  e 在隱藏提示框的時候觸發

$(function () {
    $('#box').tooltip({
        content : '這里可以輸入提示內容',
        onHide:function () {
            alert('在隱藏提示框的時候觸發');
        }
    });
});

 

onUpdate  content 在提示框內容更新的時候觸發，content接收更新后提示內容

$(function () {
    $('#box').tooltip({
        content : '這里可以輸入提示內容',
        onUpdate:function (content) {
            alert('在提示框內容更新的時候觸發：'+content);
        }
    });
});

 

onPosition  left、top 在提示框位置改變的時候觸發，接收兩個參數，分別接收左位置和上位置

$(function () {
    $('#box').tooltip({
        content: '這里可以輸入提示內容',
        onPosition: function (left, top) {                  //在提示框位置改變的時候觸發
            console.log('left:' + left + ',top:' + top);
        }
    });
});

 

onDestroy  none 在提示框被銷毀的時候觸發

$(function () {
    $('#box').tooltip({
        content: '這里可以輸入提示內容',
        onDestroy: function (none) {            //在提示框被銷毀的時候觸發
            alert('提示框被銷毀的時候觸發');
        }
    });
});

 

 

四．方法列表

options  none 返回屬性對象

$(function () {
    $('#box').tooltip({
        content: '這里可以輸入提示內容'
    });
    $('#box').tooltip('options');       //返回一個對象，里面是tooltip的屬性
});

 

tip  none 返回 tip 元素對象

$(function () {
    $('#box').tooltip({
        content: '這里可以輸入提示內容',
        onShow: function () {                   //在顯示時觸發
            alert($('#box').tooltip('tip'));    //返回 tip 元素對象
        }
    });
});

 

arrow  none 返回箭頭元素對象

$(function () {
    $('#box').tooltip({
        content: '這里可以輸入提示內容',
        onShow: function () {                   //在顯示時觸發
            alert($('#box').tooltip('arrow'));    //返回箭頭元素對象
        }
    });
});

 

show  e 顯示提示框

$(function () {
    $('#box').tooltip({
        content: '這里可以輸入提示內容'
    });
    $('#box').tooltip('hide');      //默認隱藏提示框
    $('#box').tooltip('show');      //默認顯示提示框
});

 

hide  e 隱藏提示框

$(function () {
    $('#box').tooltip({
        content: '這里可以輸入提示內容'
    });
    $('#box').tooltip('hide');      //默認隱藏提示框
    $('#box').tooltip('show');      //默認顯示提示框
});

 

update  content 更新提示框內容

$(function () {
    $('#box').tooltip({
        content: '這里可以輸入提示內容'
    });
    $('#box').tooltip('update','要更新的提示內容');      //更新提示框內容
});

 

reposition  none 重置提示框位置

$(function () {
    $('#box').tooltip({
        content: '這里可以輸入提示內容',
        onHide: function (e) {                   //當隱藏提示框時
            $('#box').tooltip('reposition');     //重置提示框位置
        }
    });
});

 

destroy  none 銷毀提示框

$(function () {
    $('#box').tooltip({
        content: '這里可以輸入提示內容'
    });
    $('#box').tooltip('destroy');      //銷毀提示框
});

 

$.fn.tooltip.defaults 重寫默認值對象。

$.fn.tooltip.defaults.position = 'top';