EasyUI系列学习(六)-Tooltip（提示框）_html/css

EasyUI系列学习(六)-Tooltip（提示框）_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:26:27

原创

1548人浏览过

一、创建组件

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";

登录后复制