首页
所有分类
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 相关文章推荐
用于table内容排序
Jul 21 Javascript
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
JS倒计时代码汇总
Nov 25 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
JavaScript中10个Reduce常用场景技巧
Jun 21 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
安卓(1) 分块(1) 循环(3) 装饰器(1) 嵌套(1) decorator(1) 移动开发(2) 查找算法(1) 二维数组(2) android studio(3)
You might like
操作Oracle的php类
2006/10/09 PHP
PHP 错误处理机制
2015/07/06 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
JS实现多物体运动的方法详解
2018/01/23 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
详解基于Vue，Nginx的前后端不分离部署教程
2018/12/04 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
wxPython学习之主框架实例
2014/09/28 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
Python中的heapq模块源码详析
2019/01/08 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
django实现模型字段动态choice的操作
2020/04/01 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
美国一家著名的儿童鞋制造商：Stride Rite
2017/01/02 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
财务管理个人自荐书范文
2013/11/24 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
关于MySQL中的 like操作符详情
2021/11/17 MySQL