jQuery提示插件qTip2用法分析(支持ajax及多种样式)

前端技术 2023/09/07 JavaScript

本文实例讲述了jQuery提示插件qTip2用法。分享给大家供大家参考，具体如下：

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
  <title>Qtip2 插件提示</title>
  <link href=\"jquery.qtip.css\" rel=\"stylesheet\" type=\"text/css\" />
  <script src=\"jquery.min.js\" type=\"text/javascript\"></script>
  <script src=\"jquery.qtip.min.js\" type=\"text/javascript\"></script>
  <script type=\"text/javascript\">
    /*
    从官方网站下载最新版本时，可以选择相应的样式及插件；可选的样式包括几种色彩风格(Colour Styles)、CSS3相关样式如圆角；
    以及以下各种插件，可根据自己需要选择：
    Ajax，这个不用说，请求远程内容的
    Tips，气泡对话效果，如箭头
    Modal，模态对话框效果，如jQuery UI Dialog / ThickBox 的效果
    Image map，提供对map内area标记的提示支持
    SVG，对SVG元素提供提示的支持
    BGIFrame，用于IE6这种古董，如遮住select控件等
    除了以上插件的功能外，它的主要功能有（仅列出较常用的）：
    设置提示的内容、标题、关闭按钮等
    使用元素的属性，来作为提示信息内容，如链接的标题(<a title=\"提示信息\")、图片的提示(<img src=\"提示信息\")等等
    提示信息显示的位置
    提示信息的目标，即显示到什么元素上
    提示信息显示/隐藏触发的事件，如鼠标移到元素上、点击(mouseenter,click)
    提示信息显示/隐藏的效果
    外观的定义，通过相应样式设置
    跟随可拖动目标、鼠标指针等
    */
    $(function () {
      //普通
      $(\"#demo1\").qtip({
        content: \"这是提示内容（By Hu Sir）\"
      });
      //带标题
      $(\"#demo2\").qtip({
        content: {
          text: \"<b>这是提示内容</b>（By Hu Sir）\",
          title: \"提示标题\"
        }
      });
      //带关闭按钮的提示 且延时3秒关闭
      $(\"#demo3\").qtip({
        content: {
          text: \"这是提示内容（By Hu Sir）\",
          title: \"提示标题\",
          button: \"关闭\"
        },
        hide: {
          event: false,  //设置不自动关闭 可配合inactive组合使用
          inactive: 3000  //设置延时关闭
        }
      });
      //使用AJAX请求远程
      $(\"#demo4\").qtip({
        content: {
          text: \"加载中...\",
          ajax: {
            url: \"lwmeAtCnblogs.aspx?name=Hu\"
          }
        }
      });
      //点击时出现模态对话框
      $(\"#demo5\").qtip({
        content: \"这是提示内容（By Hu Sir）\",
        show: {
          event: \'click\', // Show it on click...
          solo: true, // ...and hide all other tooltips... $(\'#div1\')
          modal: true // ...and make it modal
        },
        hide: false
      });
      //页面加载完成时显示，且不会自动隐藏：
      $(\"#demo6\").qtip({
        content: \"这是提示内容（By Hu Sir）\",
        show: {
          ready: true
        },
        style: {
          //换样式 阴影 圆角叠加
          classes: \'qtip-light qtip-shadow qtip-rounded\'
        },
        hide: false,
        position: {
          my: \'bottom left\',
          at: \'top center\'
        }
      });
      //鼠标跟随
      $(\'#demo7\').qtip({
        content: {
          text: \'I am positioned in relation to the mouse\'
        },
        position: {
          target: \'mouse\',
        }
      });
      //使用元素的属性作为提示信息：
      // $(\"a[title]\").qtip(); //从链接的title
      // $(\"img[alt]\").qtip(); //从img的alt
      // $(\"div[title]\").qtip(); //从div的title
      //也可以显式指定元素属性作为提示信息：
      //$(\'img[alt]\').qtip({
      //  content: {
      //   attr: \'alt\'
      //  }
      //});
      //另外对于ajax则有以下主要参数可以设置（与jQuery.ajax一致）：
      //$(\'.selector\').qtip({
      //  content: {
      //   text: \'Loading...\', // Loading text...
      //   ajax: {
      //     url: \'/path/to/file\', // URL to the JSON script
      //     type: \'GET\', // POST or GET
      //     data: { id: 3 }, // Data to pass along with your request
      //     dataType: \'json\', // Tell it we\'re retrieving JSON
      //     success: function(data, status) {
      //     //...
      //     }
      //   }
      //  }
      //});
    });
  </script>
</head>
<body>
  <div id=\"div1\">
  <span id=\"demo1\">测试一</span><br/><br/>
  <span id=\"demo2\">测试二</span><br/><br/>
  <span id=\"demo3\">测试三</span><br/><br/>
  <span id=\"demo4\">测试四</span><br/><br/>
  <span id=\"demo5\">测试五</span><br/><br/><br/><br/>
  <span id=\"demo6\">测试六</span><br/><br/>
  <span id=\"demo7\">测试七</span><br/><br/>
  </div>
</body>
</html>


$.fn.qtip.defaults = {
  // 页面加载完成就创建提示信息的元素
  prerender: false,
  // 为提示信息设置id，如设置为myTooltip
  // 就可以通过ui-tooltip-myTooltip访问这个提示信息
  id: false,
  // 每次显示提示都删除上一次的提示
  overwrite: true,
  // 通过元素属性创建提示
  // 如a[title]，把原有的title重命名为oldtitle
  suppress: true,
  // 内容相关的设置
  content: {
   // 提示信息的内容
   // 如果只设置内容可以直接 content: \"提示信息\"
   // 而不需要 content: { text: { \"提示信息\" } }
   text: true,
   // 提示信息使用的元素属性
   attr: \'title\',
   // ajax插件
   ajax: false,
   title: {
     // 提示信息的标题
     // 如果只设置标题可以直接 title: \"标题\"
     text: false,
     // 提示信息的关闭按钮
     // 如button:\"x\",button:\"关闭\"
     // 都可以启用关闭按钮
     button: false
   }
  },
  // 位置相关的设置
  position: {
   // 提示信息的位置
   // 如提示的目标元素的右下角(at属性)
   // 对应 提示信息的左上角(my属性)
   my: \'top left\',
   at: \'bottom right\',
   // 提示的目标元素，默认为选择器
   target: FALSE,
   // 提示信息默认添加到的容器
   container: FALSE,
   // 使提示信息在指定目标内可见，不会超出边界
   viewport: FALSE,
   adjust: {
     // 提示信息位置偏移
     x: 0, y: 0,
     mouse: TRUE,
     resize: TRUE,
     method: \'flip flip\'
   },
   // 特效
   effect: function(api, pos, viewport) {
     $(this).animate(pos, {
      duration: 200,
      queue: FALSE
     });
   }
  },
  // 显示提示的相关设置
  show: {
   // 触发事件的目标元素
   // 默认为选择器
   target: false,
   // 事件名称，默认为鼠标移到时
   // 可以改为click点击
   event: \'mouseenter\',
   // 特效
   effect: true,
   // 延迟显示时间
   delay: 90,
   // 隐藏其他提示
   solo: false,
   // 在页面加载完就显示提示
   ready: false,
   modal: {
     // 启用模态对话框效果
     on: false,
     // 特效
     effect: true,
     blur: true,
     escape: true
   }
  },
  // 隐藏提示的相关设置
  // 参考show
  hide: {
   target: false,
   event: \'mouseleave\',
   effect: true,
   delay: 0,
   // 设置为true时，不会隐藏
   fixed: false,
   inactive: false,
   leave: \'window\',
   distance: false
  },
  // 样式相关
  style: {
   // 样式名称
   classes: \'\',
   widget: false,
   width: false,
   height: false,
   // tip插件，箭头相关设置
   tip: {
     corner: true,
     mimic: false,
     width: 8,
     height: 8,
     border: true,
     offset: 0
   }
  },
  // 相关事件绑定
  events: {
   render: null,
   move: null,
   show: null,
   hide: null,
   toggle: null,
   visible: null,
   focus: null,
   blur: null
  }
};

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/20294

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案