qTip2 精致的jQuery提示信息插件

qTip2 精致的jQuery提示信息插件

2012-02-16 22:31 by 囧月, 2176 visits, 收藏, 编辑

qTip2是一个灰常强大且精致的jQuery提示信息插件，是qTip的第2版，也是一个全新的版本，提供了丰富的功能及漂亮的外观，非常易于使用。

qTip2采用了MIT/GPLv2许可，官方网站为：http://craigsworks.com/projects/qtip2/，目前还没发布一个稳定版，Nightly版本经常会更新，当然这并不影响正常使用。

简介

若不放心可以尝试旧版的qTip，但在一些参数上会有所不同；若是从qTip升级到qTip2，可以使用官方提供的转换工具来升级你的代码：http://craigsworks.com/projects/qtip2/converter/。

如果使用时出现问题，那么直接下载以下3个文件吧，至少官方演示很正常：

?


1

2

3

<link href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" rel="stylesheet" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>

从官方网站下载最新版本时，可以选择相应的样式及插件；可选的样式包括几种色彩风格(Colour Styles)、CSS3相关样式如圆角；以及以下各种插件，可根据自己需要选择：

  1. Ajax，这个不用说，请求远程内容的
  2. Tips，气泡对话效果，如箭头
  3. Modal，模态对话框效果，如jQuery UI Dialog / ThickBox 的效果
  4. Image map，提供对map内area标记的提示支持
  5. SVG，对SVG元素提供提示的支持
  6. BGIFrame，用于IE6这种古董，如遮住select控件等

除了以上插件的功能外，它的主要功能有（仅列出较常用的）：

  1. 设置提示的内容、标题、关闭按钮等
  2. 使用元素的属性，来作为提示信息内容，如链接的标题(<a title="提示信息")、图片的提示(<img src="提示信息")等等
  3. 提示信息显示的位置
  4. 提示信息的目标，即显示到什么元素上
  5. 提示信息显示/隐藏触发的事件，如鼠标移到元素上、点击(mouseenter,click)
  6. 提示信息显示/隐藏的效果
  7. 外观的定义，通过相应样式设置
  8. 跟随可拖动目标、鼠标指针等

使用方法

以下就简单演示一些使用方法

创建一个最简单的提示：

?


1

2

3

$("#demo2").qtip({

  content: "这是提示内容（by囧月）"

});

创建一个带标题的提示：

?


1

2

3

4

5

6

$("#demo3").qtip({

  content: {

    text: "这是提示内容（by囧月 lwme.cnblogs.com）"

    , title: "提示标题"

  }

});

带关闭按钮的提示：

?


1

2

3

4

5

6

7

8

9

$("#demo3").qtip({

  content: {

    text: "这是提示内容（by囧月 lwme.cnblogs.com）"

    , title: {

      text: "提示标题"

      , button: "关闭"

    }

  }

});

使用元素的属性作为提示信息：

?


1

2

3

$("a[title]").qtip(); //从链接的title

$("img[alt]").qtip(); //从img的alt

$("div[title]").qtip(); //从div的title

也可以显式指定元素属性作为提示信息：

?


1

2

3

4

5

$('img[alt]').qtip({

   content: {

      attr: 'alt'

   }

});

使用AJAX请求远程：

?


1

2

3

4

5

6

7

8

$("#demo4").qtip({

  content: {

    text: "加载中...",

    ajax: {

      url: "lwmeAtCnblogs.aspx?name=囧月"

    }

  }

});

设置位置及样式：

?


1

2

3

4

5

6

7

8

9

$("#demo5").qtip({

  position: {

    my: 'bottom left',

    at: 'top center'

  },

  style: {

    classes: 'ui-tooltip-red'

  }

});

点击时出现模态对话框：

?


1

2

3

4

5

6

7

8

9

$('button').qtip({

  content: "这是提示内容（by囧月 lwme.cnblogs.com）",

  show: {

    event: 'click', // Show it on click...

    solo: true, // ...and hide all other tooltips...

    modal: true // ...and make it modal

  },

  hide: false

});

页面加载完成时显示，且不会自动隐藏：

?


1

2

3

4

5

6

7

$('button').qtip({

  content: "这是提示内容（by囧月 lwme.cnblogs.com）",

  show: {

    ready: true

  },

  hide: false

});

参数设置

先看一下qTip2默认的参数设置：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

$.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

   }

};

看起来是很多，但是使用频率最高的估计也就以下这些参数：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

$.fn.qtip.defaults = {

   content: {

      text: true,

      attr: 'title',

      ajax: false,

      title: {

         text: false,

         button: false

      }

   },

   position: {

      my: 'top left',

      at: 'bottom right',

   },

   show: {

      event: 'mouseenter',

      solo: false,

      ready: false,

      modal: false

   },

   hide: {

      event: 'mouseleave'

   },

   style: 'ui-tooltip-default'

};

对于显示的位置，有以下参数可以设置：

?


1

2

3

4

5

6

7

8

9

10

11

12

my = [

'top left', 'top right', 'top center',

'bottom left', 'bottom right', 'bottom center',

'right center', 'right top', 'right bottom',

'left center', 'left top', 'left bottom', 'center'

]

at = [

'bottom left', 'bottom right', 'bottom center',

'top left', 'top right', 'top center',

'left center', 'left top', 'left bottom',

'right center', 'right top', 'right bottom', 'center'

]

而对于显示的色彩风格则有以下各种颜色：

?


1

['red', 'blue', 'dark', 'light', 'green','jtools', 'plain', 'youtube', 'cluetip', 'tipsy', 'tipped']

比如red就是ui-tooltip-red，默认为default。另外还有ui-tooltip-shadow、ui-tooltip-rounded分别表示阴影、圆角效果，可以叠加，如下：

?


1

2

3

4

5

6

$("#demo2").qtip({

  content: "这是提示内容（by囧月）"

  , style: {

    classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'

  }

});

另外对于ajax则有以下主要参数可以设置（与jQuery.ajax一致）：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

$('.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) {

          //...

         }

      }

   }

});

需要注意的是，AJAX默认使用GET请求而且启用了cache。

结尾

关于qTip2就介绍到这里，更多信息请参阅以下链接：

官方网站：http://craigsworks.com/projects/qtip2/

在线演示：http://craigsworks.com/projects/qtip2/demos/

官方文档：http://craigsworks.com/projects/qtip2/docs/

最后，放一个简单的DEMO。

时间： 2024-09-21 20:19:52

qTip2 精致的jQuery提示信息插件的相关文章

qTip2 精致的基于jQuery提示信息插件_jquery

qTip2采用了MIT/GPLv2许可,官方网站为:http://craigsworks.com/projects/qtip2/,目前还没发布一个稳定版,Nightly版本经常会更新,当然这并不影响正常使用.简介 若不放心可以尝试旧版的qTip,但在一些参数上会有所不同:若是从qTip升级到qTip2,可以使用官方提供的转换工具来升级你的代码:http://craigsworks.com/projects/qtip2/converter/. 如果使用时出现问题,那么直接下载以下3个文件吧,至少官

10 款精致的 jQuery 倒计时插件推荐

倒计时功能在很多项目中都会使用到,比如网站维护.团购网站和限时下载网站等等.通过使用jQuery倒计时插件,你可以简化你的工作量,却同样创造出超酷的jQuery倒计时功能.  本文整理了10款jQuery倒计时插件,希望为你的工作提供一些帮助.  1.5sec Maintenance Mode  此插件用于网站维护时,平息用户因无法访问网站而带来的愤怒.它有6个模板可供你选择.  源码/演示  2.Premium Coming Soon  新奇.现代.用户界面友好的倒计时页面能让你的用户清楚的记

jQuery实现的简单提示信息插件_jquery

本文实例讲述了jQuery实现的简单提示信息插件.分享给大家供大家参考,具体如下: jQuery代码如下: (function ($) { $.fn.Tips = function (options) { var defaults = { html: "", times: 3000 } _this_ = $("#tips"); _this_.html(options.html); _this_.show(); setTimeout(function () { _th

jquery.qtip提示信息插件用法简单实例_jquery

本文实例讲述了jquery.qtip提示信息插件用法.分享给大家供大家参考,具体如下: 公司要求写一个关于提示信息的效果,在网上查询到了这个插件,感觉很不错,下面是自己学习的内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

jQuery验证插件

学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(validate.js),是一款验证常规表单数据合法性的插件.使用它,极大的解放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验.   一．使用 validate.js 插件 官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation最重要的文件是vali

ASP.NET MVC中很酷的jQuery验证插件

代码:http://down.51cto.com/data/187446 在看这篇文章之前,希望你能够先阅读下我将会使用得到jquery的插件作者博客:http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/ 下载下来后,解压到某个地方. 1.创建一个asp.net mvc 3项目: 2.把需要的js和css文件添加到项目中来(在你刚才解压的目录下). 3.

jQuery Validate插件实现表单强大的验证功能_jquery

jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 第一节:jQuery Validation让验证变得如此容易 一.官网下载jquery,和jquery validation plugin 二.引入文件 <script src="js/jquery-1.8.0.min.js" type="text/javascr

js验证-jquery validator 插件的问题

问题描述 jquery validator 插件的问题 图1 为手机输入错误后的提示信息 图2 为点击提交后 弹出的提示信息 图2 的提示信息比图1的提示信息多了个文本框标题头一直查询代码 查不出原因跟其他页面正常的validator验证规则对比了, 也查不出问题所在下面贴出代码,望朋友们帮助分析分析 $.formValidator.initConfig({ formid: ""change-form"" autotip: true onerror: functio

noty – jQuery通知插件全面解析_jquery

noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件. 当前最新版本为2.1.0: 从 https://github.com/needim/noty 可以获取最新源代码. 布局样式 支持的提示样式,每种样式都有预定义好的css样式: •alert: 默认的提示样式 •success: 成功 •error: 错误 •warning: 警告 •information: 信息 支持的布局位置: •top: 顶部,长条状 •topLeft/topCent