黑马程序员技术交流社区

标题: 分享JQuery EasyUI的学习笔记-tooltip提示框组件 [打印本页]
作者: heshiwei    时间: 2015-9-23 16:11
标题: 分享JQuery EasyUI的学习笔记-tooltip提示框组件
继续上次的分享。这个是我为毕业设计准备的，主要用来完成后台页面的制作。前台配合NodeJs，做出一个比较完整的系统。作为毕业设计。现将笔记分享给大家，希望给和我一样准备毕业设计的同学一点小小的帮助。

属性
        position 'bottom'/string 消息框的位置,默认bottom，还可设置为left right top
        content null/string 消息框的内容，可以包含html标签
        trackMouse false/boolean 设置为true，则提示框跟随鼠标移动，否则不跟随
        detalX 0/number 水平方向提示框的位置
        detalY0/number 垂直方向提示框的位置
        showEvent 'mouseenter'/string 设置激活哪个事件时显示提示框
        hideEvent 'mouseleave'/string 设置激活哪个事件时隐藏提示框
        showDelay 200/number 延时多少毫秒显示提示框
        hideDelay 200/number 延时多少毫秒隐藏提示框

事件
        onShow 参数：e 在显示提示框的时候触发
        onHide 参数：e 在隐藏提示框的时候触发
        onUpdate 参数：e 在更新提示框内容的时触发
        onPosition 参数：e 在提示框位置发生改变的时候触发
        onDestroy 参数：none 在提示框被销毁的时候触发



方法
        options 参数：none 返回对象属性
        tip 参数：none 返回tip元素的属性
        arrow 参数：none 返回箭头元素的对象
        show 参数：e  显示提示框
        hide 参数：e 隐藏提示框
        update 参数：content 更新提示框内容
        reposition 参数：none 重置提示框
        destroy 参数：none 销毁提示框

修改默认对象：
        $.fn.tooltip.defaults.position = 'top'



示例代码：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jQuery Easy UI</title>
  5. <meta charset="UTF-8" />
  6. <script type="text/javascript" src="easyui/jquery.min.js"></script>
  7. <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  8. <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
  9. <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
  10. <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
  11. <style tyle="text/css">
  12.         .red{
  13.                 color:red;
  14.                 font-weight:bold;
  15.         }
  16. </style>
  17. <script type="text/javascript">
  18.         $(function (){
  19.                 $('body').css('margin','100px');
  20.                 /*
  21.                 $('a').tooltip({
  22.                         content:'这是<span class="red">提示框</span>的内容',
  23.                         position:'top',
  24.                         trackMouse:true,
  25.                         deltaX:100,
  26.                         deltaY:100,
  27.                         showEvent:'click',
  28.                         hideEvent:'dbclick',
  29.                         showDelay:0,
  30.                         hideDelay:0,
  31.                        
  32.                         onShow:function (e){
  33.                                 console.log('onShow');

  35.                                 // var tooltip_arrow = $('.tooltip-arrow');
  36.                                 //console.log(tooltip_arrow);
  37.                                 console.log($('a').tooltip('arrow') );

  39.                         },
  40.                         onHide:function (e){
  41.                                 console.log('onHide');
  42.                         },
  43.                         onPosition:function (e){
  44.                                 console.log('onPosition');
  45.                         },
  46.                         onUpdate:function (e){
  47.                                 console.log('onUpdate');
  48.                         },
  49.                         onDestory:function (e){
  50.                                 console.log('onDestory');
  51.                         }
  52.                 });


  55.                 $('a').mouseenter(function (){
  56.                         $('.tooltip').css('left','200px');
  57.                 });

  59.                 $('a').mouseleave(function (){
  60.                         $('a').tooltip('reposition');
  61.                 });
  62.                

  64.                 $('#btnShow').click(function (){
  65.                         $('a').tooltip('show');
  66.                 });

  68.                 $('#btnHide').click(function (){
  69.                         $('a').tooltip('hide');
  70.                 });

  72.                 $('#btnDestroy').click(function (){
  73.                         $('a').tooltip('destroy');
  74.                 });
  75.         */

  77.                 // box开始
  78.                 $('#box').tooltip({
  79.                         content:'这是内容',
  80.                         onShow:function (e){
  81.                                 $('.tooltip-bottom').css('left','500px');
  82.                         },
  83.                         onHide:function (e){
  84.                                 $('#box').tooltip('reposition');
  85.                         }
  86.                 });

  88.         });

  90. </script>
  91. </head>
  92. <body>
  93.         <button id="btnShow">显示按钮</button>
  94.         <button id="btnHide">隐藏按钮</button>
  95.         <button id="btnDestroy">销毁按钮</button>
  96.         <a href="#">Hover me!</a>

  98.         <a href="#" id="box">Other Hover me!</a>


  101. </body>
  102. </html>

复制代码







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2