首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 08, 2016

本文实例讲述了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提示插件qTip2用法分析(支持ajax及多种样式)

- Author -

smartsmile2012

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
JS实现动态倒计时功能（天数、时、分、秒）
Dec 12 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
JavaScript中两个字符串的匹配
Jun 08 #Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 #Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 #Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 #Javascript
Javascript之String对象详解
Jun 08 #Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 #Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 #Javascript
短波(8) 萨拉雷(1) 雄兵连(3) 下载(1) 怀旧期刊(1) 烈阳天道(2) 广播(8) 中学科技(1) 无线电(12) 超神学院(1)
You might like
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
php之curl设置超时实例
2014/11/03 PHP
利用php输出不同的心形图案
2016/04/22 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
xmlplus组件设计系列之分隔框（DividedBox)（8）
2017/05/02 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
Python利用IPython提高开发效率
2016/08/10 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
Python IDLE清空窗口的实例
2018/06/25 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
python实现屏保计时器的示例代码
2018/08/08 Python
python 构造三维全零数组的方法
2018/11/12 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
python实现机器人卡牌
2019/10/06 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
路德维希•贝克(LUDWIG BECK)中文官网：德国大型美妆百货
2020/09/19 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
美术国培研修感言
2014/02/12 职场文书
区级文明单位申报材料
2014/05/15 职场文书
舞蹈专业求职信
2014/06/13 职场文书
审美与表现自我评价
2015/03/09 职场文书
六一儿童节致辞稿（3篇）
2019/07/11 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android