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`	`<script type="text/javascript"` `src="jquery-1.3.2.min.js"></script>`

`2`	`<script type="text/javascript"` `src="jquery.qtip-1.0.0-rc3.min.js"></script>`

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

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代码：

Js代码

1
<script type="text/javascript">   

2
  $(document).ready(function()   

3
  {   

4
    $('#content a[href]').qtip({   

5
      content: '<img src="small.png" alt="Image" />'  

6
    });   

7
  });   

8
</script>

效果如图所示：

4、Corner values

html如下所示：

Html代码

1
<div id="content" style="margin-top:200px;margin-left:200px;">   

2
  <a href=" ">Corner values</a>   

3
</div>

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
             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如下所示：

Html代码

1
   
2
<div id="content">   

3
  <img src="sample.jpg" alt="" height="200" />   

4
</div>

JS代码：

Js代码

01
<script type="text/javascript">   

02
  $(document).ready(function()   

03
  {   

04
    $('#content img').each(function()   

05
    {   

06
      $(this).qtip(   

07
      {   

08
        content: '<a href=" ">Edit</a> | <a href=" ">Delete</a>',   

09
        position: 'topRight',   

10
        hide: {   

11
          fixed: true  

12
        },   

13
        style: {   

14
          padding: '5px 15px',   

15
          name: 'cream'  

16
        }   

17
      });   

18
    });   

19
  });   

20
</script>

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
             0,   

34
            radius: 4   

35
          },   

36
          name: 'light',   

37
           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
         { max: 350 },   

25
        padding: '14px',   

26
        border: {   

27
           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
       '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

查看全文