0601 Tooltip（提示框）

使用$.fn.tooltip.defaults重写默认值对象 　　　　

当用户将鼠标移动到元素上的时候，将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。

 

1 属性

 

2 事件

 

3 方法

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <script type="text/javascript" src="../js/test.js"></script>
17 
18     <link rel="shortcut icon" href="../img/study04.ico">
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24         #box1{
25             width: 300px;
26             height: 300px;
27             border: 1px solid red;
28         }
29         
30     </style>
31 </head>
32 
33 <body>
34     <a id="a" style="margin:200px" href="#">a标签</a>
35     <div id="box1"></div>
36    
37 </div>
38 </body>
39 </html>
HTML代码
 1 /**
 2  * 
 3  * @authors Your Name (you@example.org)
 4  * @date    2017-05-11 10:35:42
 5  * @version $Id$
 6  */
 7 $( function() {
 8     $('#a').tooltip({
 9         position : 'bottom',
10         content : '<strong>我是提示信息</strong>',
11         trackMouse : true,
12         // deltaX : 10,
13         // deltaY : 10,
14         // showEvent : 'click', // 单击时显示
15         // hideEvent : 'dblclick', // 双击时消失
16 
17         onShow : function(e) {
18             // alert('显示信息');
19             console.log($(this).tooltip('tip'));
20             console.log($(this).tooltip('arrow'));
21         },
22         onHide : function(e) {
23             // alert('消失信息');
24         },
25         onUpdate : function(content) {  // 只有更新了content才有效果
26             console.log('更新了提示消息：' + content);
27         },
28         // onPosition :function(left, top) {
29         //     console.log('left:' + left + ", toop:" +top );
30         // },
31         onDestroy : function() { // 只有销毁提示框时才有效果
32             console.log("销毁了提示框");
33         }
34 
35     });
36 
37     $('#a').click(function() {
38         // $(this).tooltip('update','改变了');  //单击时更新content
39         $(this).tooltip('destroy'); // 单击时销毁提示框
40     });
41 })
JS代码

 

posted @ 2017-05-15 15:04  寻渝记  阅读(171)  评论(0)    收藏  举报