EasyUI系列學習(六)-Tooltip（提示框）

一、創建組件

0.Tooltip不依賴其他組件

1.使用class加載

<a href="#" class="easyui-tooltip" title="這是一個提示信息">Hover me</a>

2.使用js加載

<a href="#" id="tBox" title="這是一個提示信息">Hover me</a>
<script>
    $(function () {
        $("#tBox").tooltip();
    })
</script>

二、屬性

1.position：消息框位置（left，right，top，默認bottom）

<a href="#" id="tBox" title="這是一個提示信息">Hover me</a>
<script>
    $(function () {
        $("#tBox").tooltip();
    })
</script>

2.content：消息框內容，可以是html

<a href="#" id="tBox" title="這是一個提示信息">Hover me</a>
<script>
    $(function () {
        $("#tBox").tooltip({
            content: "<strong>我是html</strong>"
        });
    })
</script>

3.trackMouse：為true時，允許提示框跟鼠標移動

<a href="#" id="tBox" title="這是一個提示信息">Hover me</a>
<script>
    $(function () {
        $("#tBox").tooltip({
            trackMouse: true
        });
    })
</script>

4.deltaX，deltaY：提示框具體左上角的位置

<a href="#" id="tBox" title="這是一個提示信息">Hover me</a>
<script>
    $(function () {
        $("#tBox").tooltip({
            deltaX: 50,
            deltaY:50
        });
    })
</script>

5.showDelay，hideDelay延時多少毫秒顯示/隱藏提示框，默認是200

<a href="#" id="tBox" title="這是一個提示信息">Hover me</a>
<script>
    $(function () {
        $("#tBox").tooltip({
            showDelay: 1000,
            hideDelay: 2000
        });
    })
</script>

6.showEvent，hideEvent：激活顯示/隱藏事件時候的提示框，默認為mouseenter，mouseleave

<a href="#" id="tBox" title="這是一個提示信息">Hover me</a>
<script>
    $(function () {
        $("#tBox").tooltip({
            //鼠標單擊是顯示提示框
            showEvent: "click",
            //鼠標雙擊是隱藏提示框
            hideEvent: "dblclick"
        });
    })
</script>

三、事件

1.onShow，onHide：在顯示/隱藏提示框的時候觸發

<a href="#" id="tBox" title="這是一個提示信息">Hover me</a>
<script>
    $(function () {
        $("#tBox").tooltip({
            onShow: function (e) {
                alert("顯示提示框的觸發");
            },
            onHide: function (e) {
                alert("隱藏提示框的觸發");
            }
        });
    })
</script>

2.onUpdate：在提示框內容更新時觸發，默認content為null

<a href="#" id="tBox" title="這是一個提示信息">Hover me</a>
<script>
    $(function () {
        $("#tBox").tooltip({
            content: "這是新內容",
            onUpdate: function (content) {
                alert("內容被更新:" + content);
            }
        });
    })
</script>

3.onPosition：在提示框位置被改變的時候觸發

<a href="#" id="tBox" title="這是一個提示信息">Hover me</a>
<script>
    $(function () {
        $("#tBox").tooltip({
            onPosition: function (left, top) {
                console.log("left:" + left + ",top:" + top);
            }
        });
    })
</script>

4.onDestroy：在提示框被撤銷的時候觸發

<a href="#" id="tBox" title="這是一個提示信息">Hover me</a>
<script>
    $(function () {
        $("#tBox").tooltip({
            onDestroy: function (none) {
                alert("提示框被銷毀");
            }
        });
        $("#tBox").click(function () {
            $(this).tooltip("destroy");
        });
    })
</script>

四、方法

1.options：返回屬性對象

2.show，hide：顯示/隱藏提示框

<a href="#" id="tBox" title="這是一個提示信息">Hover me</a>
<script>
    $(function () {
        $("#tBox").tooltip({

        });
        $("#tBox").tooltip("show");
        $("#tBox").tooltip("hide");
    })
</script>

3.update：更新content的內容

<a href="#" id="tBox" title="這是一個提示信息">Hover me</a>
<script>
    $(function () {
        $("#tBox").tooltip({

        });
        //鼠標移動到”Hover me“時觸發
        $("#tBox").tooltip("update", "更新的內容");
    })
</script>

4.tip：返回tip元素對象；arraw返回箭頭元素對象（實際就是提示框生成的兩個div）

<a href="#" id="tBox" title="這是一個提示信息">Hover me</a>
<script>
    $(function () {
        $("#tBox").tooltip({
            onShow: function () {
                //div.tooltip.tooltip-bottom
                console.log($("#tBox").tooltip("tip"));
                //div.tooltip.tooltip-outer,div.tooltip-arrow
                console.log($("#tBox").tooltip("arrow"));
            }
        });
    })
</script>

5.reposition：重置提示框位置

<a href="#" id="tBox" title="這是一個提示信息">Hover me</a>
<script>
    $(function () {
        $("#tBox").tooltip({
            onShow: function () {
                $(".tooltip-bottom").css("left", 500);
            },
            onHide: function () {
                $("#tBox").tooltip("reposition");
            }
        });
    })
</script>

五、組件默認值

$.fn.tooltip.defaults.position = "right";