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

转载于:https://www.cnblogs.com/kimisme/p/5199418.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值