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代码
Nov 09 Javascript
JAVASCRIPT HashTable
Jan 22 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 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
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
微信自定义分享php代码分析
2016/11/24 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
php中上传文件的的解决方案
2018/09/25 PHP
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Python使用python-docx读写word文档
2019/08/26 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
python2和python3哪个使用率高
2020/06/23 Python
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
感恩教育活动总结
2014/05/05 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
教师批评与自我批评
2014/10/15 职场文书
节约用电倡议书
2015/04/28 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
Python pandas求方差和标准差的方法实例
2021/08/04 Python
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫