你的位置:首页 > 网页设计

[网页设计]EasyUI系列学习(六)


一、创建组件

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