首页
所有分类
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自执行函数之伪命名空间封装法
Dec 25 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
原生js实现弹窗消息动画
Nov 20 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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
celery(1) 条形码(1) Mysql8(2) tree shaking(1) OOP(1) Three.js(1) Outlook(1) SeaTable(1) MutationObserver(1) 黑屏(2)
You might like
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
PHP类的反射用法实例
2014/11/03 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
记录Django开发心得
2014/07/16 Python
python求列表交集的方法汇总
2014/11/10 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
初学Python函数的笔记整理
2015/04/07 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python如何读取bin文件并下发串口
2019/07/05 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
计算机专业自荐信
2013/10/14 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
2014年新生军训方案
2014/05/01 职场文书
群众路线教育实践活动心得体会（四风）
2014/11/03 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
Oracle 区块链表创建过程详解
2021/05/15 Oracle
Python中的pprint模块
2021/11/27 Python
MySQL插入数据与查询数据
2022/03/25 MySQL