• tooltip


    easyui的tooltip用来声明元素的提示框

    <!DOCTYPE html>
    <html>
    <head>
    <title>jQuery Easy UI</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" ></script>
    <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/icon.css" />
    <script type="text/javascript">
        $(function(){
            //设置默认值
            $.fn.tooltip.defaults.position="top";
            $("#href").tooltip({
                content : "提示框中的内容",
                position : "right",//提示框显示的位置 bootom left right top
                trackMouse : true,//是否允许提示框随鼠标移动
                deltaX : 10,// 水平方向提示框的位置
                deltaY : 10,// 垂直方向提示框的位置
                showDelay :5, //延迟多少毫秒显示提示框
                hideDelay : 200 ,//延迟多少毫秒隐藏提示框
                showEvent : "mouseenter",//确定激活提示框显示的 事件 默认为mousenter
                hideEvent :"mouseleave",//确定激活提示框隐藏的事件 默认为mouseleave
                onShow : function(e){
                    console.log("在提示框显示的时候触发");
                    //返回tip 对象
                    console.log("tip==="+$("#href").tooltip("tip"));
                },
                onHide : function(e){
                    console.log("在提示框隐藏的时候触发");    
                },
                onUpdate : function(content){
                    console.log("在提示框中的内容改变的时候触发");        
                },
                onPosition : function(left,right){
                    console.log("当提示框的位置改变的时候触发");
                },
                onDestory : function(){
                    console.log("当提示框被销毁的时候触发");    
                }
                //console.log($("#href").tooltip("options"));
                //$("#href").tooltip("show")显示提示框
                //$("#href").tooltip("hide")隐藏提示框
                //$("#href").tooltip('update','更新后的提示内容');
                //$("#href").tooltip("destroy");销毁提示框
                //$("#href").tooltip("reposition");重置提示框
    
            });
        });
    </script>
    </head>
    <body>
    <a href="#" title="超链接" class="easyui-tooltip">干我干我嘛</a>
    <a id="href" href="#"  class="easyui-tooltip">OOXX</a>
    
    </body>
    </html>
  • 相关阅读:
    Neo4j的查询语法笔记(二)
    NEO4J -模糊查询
    mybatis常用jdbcType数据类型
    Codrops 优秀教程:CSS 3D Transforms 实现书本效果
    案例分享:20佳应用大图片背景的优秀网站作品
    分享一套精美的现代 UI PSD 工具包【免费下载】
    经验分享:10个简单实用的 jQuery 代码片段
    Popline:帅气的浮动 HTML5 文本编辑器工具栏
    《分享》学习单页网站制作的20个优秀案例
    Minimit Anima – 硬件加速的 CSS3 动画插件
  • 原文地址:https://www.cnblogs.com/m01qiuping/p/6486383.html
Copyright © 2020-2023  润新知