qTip–基于JQuery的Tooltip插件   Leave a comment

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

  1. <div id=”content”>
  2. <a href=” “>Basic text</a>
  3. </div>

JS代码:

  1. <script type=”text/javascript”>
  2. $(document).ready(function()
  3. {
  4. $(‘#content a[href]’).qtip(
  5. {
  6. content: ‘Some basic content for the tooltip’
  7. });
  8. });
  9. </script>

效果如图所示:

2、Title attribute

html如下所示:

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

JS代码:

  1. <script type=”text/javascript”>
  2. $(document).ready(function()
  3. {
  4. $(‘#content a[href][title]’).qtip({
  5. content: {
  6. text: false
  7. },
  8. style: ‘cream’
  9. });
  10. });
  11. </script>

效果如图所示:

3、Image

html如下所示:

  1. <div id=”content”>
  2. <a href=” “>Image</a>
  3. </div>

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

  1. <div id=”content” style=”margin-top:200px;margin-left:200px;”>
  2. <a href=” “>Corner values</a>
  3. </div>

JS代码:

  1. <script type=”text/javascript”>
  2. var corners = ‘bottomLeft’;
  3. var opposites = ‘topRight’;
  4. $(document).ready(function()
  5. {
  6. $(‘#content a’)
  7. .hover(function()
  8. {
  9. $(this).html(opposites)
  10. .qtip({
  11. content: corners,
  12. position: {
  13. corner: {
  14. tooltip: corners,
  15. target: opposites
  16. }
  17. },
  18. show: {
  19. when: false,
  20. ready: true
  21. },
  22. hide: false,
  23. style: {
  24. border: {
  25. width: 5,
  26. radius: 10
  27. },
  28. padding: 10,
  29. textAlign: ‘center’,
  30. tip: true,
  31. name: ‘cream’
  32. }
  33. });
  34. });
  35. });
  36. </script>

效果如图所示:

5、Fixed tooltips

html如下所示:

  1. <div id=”content”>
  2. <img src=”sample.jpg” alt=”” height=”200″ />
  3. </div>

JS代码:

  1. <script type=”text/javascript”>
  2. $(document).ready(function()
  3. {
  4. $(‘#content img’).each(function()
  5. {
  6. $(this).qtip(
  7. {
  8. content: ‘<a href=” “>Edit</a> | <a href=” “>Delete</a>’,
  9. position: ‘topRight’,
  10. hide: {
  11. fixed: true
  12. },
  13. style: {
  14. padding: ‘5px 15px’,
  15. name: ‘cream’
  16. }
  17. });
  18. });
  19. });
  20. </script>

css代码:

  1. <style type=”text/css”>
  2. #content img{
  3. float: left;
  4. margin-right: 35px;
  5. border: 2px solid #454545;
  6. padding: 1px;
  7. }
  8. </style>

效果如图所示:

6、Loading html

html如下所示:

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

JS代码:

  1. <script type=”text/javascript”>
  2. $(document).ready(function()
  3. {
  4. $(‘#content a[rel]’).each(function()
  5. {
  6. $(this).qtip(
  7. {
  8. content: {
  9. url: $(this).attr(‘rel’),
  10. title: {
  11. text: ‘Wiki – ‘ + $(this).text(),
  12. button: ‘Close’
  13. }
  14. },
  15. position: {
  16. corner: {
  17. target: ‘bottomMiddle’,
  18. tooltip: ‘topMiddle’
  19. },
  20. adjust: {
  21. screen: true
  22. }
  23. },
  24. show: {
  25. when: ‘click’,
  26. solo: true
  27. },
  28. hide: ‘unfocus’,
  29. style: {
  30. tip: true,
  31. border: {
  32. width: 0,
  33. radius: 4
  34. },
  35. name: ‘light’,
  36. width: 570
  37. }
  38. })
  39. });
  40. });
  41. </script>

效果如图所示:

7、Modal tooltips

html如下所示:

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

JS代码:

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

效果如图所示:

Posted 2010年12月17日 by gw8310 in 未分类

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: