首页 > 其他 > 详细

tooltip

时间:2017-03-01 22:47:02      阅读:274      评论:0      收藏:0      [点我收藏+]

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>

 

tooltip

原文:http://www.cnblogs.com/m01qiuping/p/6486383.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!