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程序设计有所帮助。

Javascript 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
JavaScript中出现乱码的处理心得
Dec 24 Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
javascript html5实现表单验证
Mar 01 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
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
You might like
php+highchats生成动态统计图
2014/05/21 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
JavaScript 数组详解
2013/10/10 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
JavaScript中this详解
2015/09/01 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
Python定义函数实现累计求和操作
2020/05/03 Python
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
法学个人求职信范文
2014/01/27 职场文书
销售员岗位职责范本
2014/02/03 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
副董事长岗位职责
2014/04/02 职场文书
协议书的格式
2014/04/23 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
DSP接收机前端设想
2022/04/05 无线电
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android