JQuery的Tooltip插件--qtip 总结

qTip是一个基于JQuery的Tooltip插件。它几乎支持所有的主流浏览器，例如：

Internet Explorer 6.0+
Firefox 2.0+
Opera 9.0+
Safari 3.0+
Google Chrome 1.0+
Konqueror 3.5+

使用qTip可以很轻松的定义tip的位置以及样式，同时qTip还有一个强大的API......

 

使用qTip前，只需引入两个JS文件即可：

 

1 Html代码

 

下面举几个比较简单的例子。

 

1、Basic text

 

html如下所示：

 

Html代码 

1 <div id="content">
2   <a href=" ">Basic text</a>
3 </div>

JS代码：

 

Js代码

01
02 <script type="text/javascript">
03   $(document).ready(function()
04   {
05     $('#content a[href]').qtip(
06     {
07       content: 'Some basic content for the tooltip'
08     });
09   });
10 </script>

 

 

效果如图所示：

2、Title attribute

 

html如下所示：

 

Html代码

1
2 <div id="content">
3   <a href=" " title="That sounds familiar...">Title attribute</a>
4 </div>

JS代码：

 

01
02 <script type="text/javascript">
03   $(document).ready(function()
04   {
05     $('#content a[href][title]').qtip({
06       content: {
07         text: false
08       },
09       style: 'cream'
10     });
11   });
12 </script>

 

效果如图所示：

 

3、Image

 

html如下所示：

 

Html代码

1
2 <div id="content">
3   <a href=" ">Image</a>
4 </div>

 

 

JS代码：

 

 

效果如图所示：

 

4、Corner values

 

html如下所示：

 

 

JS代码：

 

01
02 <script type="text/javascript">
03
04   var corners = 'bottomLeft';
05   var opposites = 'topRight';
06
07   $(document).ready(function()
08   {
09     $('#content a')
10     .hover(function()
11     {
12       $(this).html(opposites)
13       .qtip({
14         content: corners,
15         position: {
16           corner: {
17             tooltip: corners,
18             target: opposites
19           }
20         },
21         show: {
22           when: false,
23           ready: true
24         },
25         hide: false,
26         style: {
27           border: {
28             width: 5,
29             radius: 10
30           },
31           padding: 10,
32           textAlign: 'center',
33           tip: true,
34           name: 'cream'
35         }
36       });
37     });
38   });
39 </script>

效果如图所示：

 

5、Fixed tooltips

 

html如下所示：

 

 

JS代码：

 

 

css代码：

 

01
02 <style type="text/css">
03   #content img{
04     float: left;
05     margin-right: 35px;
06
07     border: 2px solid #454545;
08     padding: 1px;
09   }
10 </style>

 

 

效果如图所示：

 

6、Loading html

 

html如下所示：

 

Html代码 

1 <div id="content">
2   <a href="#" rel="sample.html">Click me</a>
3 </div>

JS代码：

 

01 Js代码
02 <script type="text/javascript">
03   $(document).ready(function()
04   {
05     $('#content a[rel]').each(function()
06     {
07       $(this).qtip(
08       {
09         content: {
10           url: $(this).attr('rel'),
11           title: {
12             text: 'Wiki - ' + $(this).text(),
13             button: 'Close'
14           }
15         },
16         position: {
17           corner: {
18             target: 'bottomMiddle',
19             tooltip: 'topMiddle'
20           },
21           adjust: {
22             screen: true
23           }
24         },
25         show: {
26           when: 'click',
27           solo: true
28         },
29         hide: 'unfocus',
30         style: {
31           tip: true,
32           border: {
33             width: 0,
34             radius: 4
35           },
36           name: 'light',
37           width: 570
38         }
39       })
40     });
41   });
42 </script>

 

效果如图所示：

 

7、Modal tooltips

 

html如下所示：

 

1
2 <div id="content">
3   <a href="#" rel="modal">Click here</a>
4 </div>

 

JS代码：

 

01
02 <script type="text/javascript">
03   $(document).ready(function()
04   {
05     $('a[rel="modal"]:first').qtip(
06     {
07       content: {
08         title: {
09           text: 'Modal tooltips sample',
10           button: 'Close'
11         },
12         text: 'hello world'
13       },
14       position: {
15         target: $(document.body),
16         corner: 'center'
17       },
18       show: {
19         when: 'click',
20         solo: true
21       },
22       hide: false,
23       style: {
24         width: { max: 350 },
25         padding: '14px',
26         border: {
27           width: 9,
28           radius: 9,
29           color: '#666666'
30         },
31         name: 'light'
32       },
33       api: {
34         beforeShow: function()
35         {
36           $('#qtip-blanket').fadeIn(this.options.show.effect.length);
37         },
38         beforeHide: function()
39         {
40           $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
41         }
42       }
43     });
44
45     $('<div id="qtip-blanket">')
46     .css({
47       position: 'absolute',
48       top: $(document).scrollTop(),
49       left: 0,
50       height: $(document).height(),
51       width: '100%',
52
53       opacity: 0.7,
54       backgroundColor: 'black',
55       zIndex: 5000
56     })
57     .appendTo(document.body)
58     .hide();
59   });
60 </script>

 

效果如图所示：

 

caonidayecnblogs
关注 - 0
粉丝 - 0

关注博主

1

0

0

(请您对文章做出评价)

« 上一篇： Jquery——ThickBox插件使用心德