首页
所有分类
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 相关文章推荐
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
Bootstrap组件系列之福利篇几款好用的组件（推荐二）
Jul 12 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
原生js实现弹幕效果
Nov 29 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
Next.js(1) SingleFlight(2) TableField(1) 字典(3) set(1) el-table(1) 并发(8) frozenset(1) 脚手架(2) Mybatis-Plus(3)
You might like
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
php实现监听事件
2013/11/06 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
Ajax，UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
解决小程序无法触发SESSION问题
2020/02/03 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
Python爬虫实现（伪）球迷速成
2018/06/10 Python
python类的实例化问题解决
2019/08/31 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
如何编写python的daemon程序
2021/01/07 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
英国羊绒服装购物网站：Pure Collection
2018/10/22 全球购物
如何理解委托
2012/01/06 面试题
运动会入场解说词
2014/02/07 职场文书
车间主任岗位职责
2015/02/03 职场文书
教师聘用意向书
2015/05/11 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers