基于jQuery消息提示框插件Tipso

今天要分享的这款jQuery消息提示框插件名叫Tipso，它的特点是可以定义提示框的显示位置，以及动态改变提示框的提示内容，应该说是一款相当灵活的jQuery消息提示框插件。效果图如下：

在线预览   源码下载

实现的代码：

1. <div class="dowebok">
2. <h2>
3. 1、默认</h2>
4. <div class="inner">
5. <span id="tip1" data-tipso="dowebok.com">Tipso</span></div>
6. </div>
7. <div class="dowebok">
8. <h2>
9. 2、左边显示</h2>
10. <div class="inner">
11. <span id="tip2" data-tipso="dowebok.com">Tipso</span></div>
12. </div>
13. <div class="dowebok">
14. <h2>
15. 3、背景颜色</h2>
16. <div class="inner">
17. <span id="tip3" data-tipso="dowebok.com">Tipso</span></div>
18. </div>
19. <div class="dowebok">
20. <h2>
21. 4、使用title属性</h2>
22. <div class="inner">
23. <span id="tip4" title="内容来自 title 属性">Tipso</span></div>
24. </div>
25. <div class="dowebok">
26. <h2>
27. 5、单击显示/隐藏</h2>
28. <div class="inner">
29. <span id="tip5" data-tipso="dowebok">Tipso</span>
30. <p>
31. <a id="btn5" href="javascript:">显示</a></p>
32. </div>
33. </div>
34. <div class="dowebok">
35. <h2>
36. 6、更新内容</h2>
37. <div class="inner">
38. <span id="tip6" data-tipso="dowebok.com">Tipso</span>
39. <p>
40. <input type="text"><a id="btn6" href="javascript:">更新</a></p>
41. </div>
42. </div>
43. <div class="dowebok">
44. <h2>
45. 7、在图片上使用</h2>
46. <div class="inner">
47. <img id="tip7" src="data:images/tipso.png" alt="" data-tipso="dowebok.com">
48. </div>
49. </div>
50. <div class="dowebok">
51. <h2>
52. 8、回调函数</h2>
53. <div class="inner">
54. <span id="tip8" data-tipso="dowebok.com">Tipso</span>
55. <p>
56. 状态：<em id="status"></em></p>
57. </div>
58. </div>

js代码：

1. $(function () {
2. // 1
3. $('#tip1').tipso({
4. useTitle: false
5. });
6. // 2
7. $('#tip2').tipso({
8. useTitle: false,
9. position: 'left'
10. });
11. // 3
12. $('#tip3').tipso({
13. useTitle: false,
14. background: 'tomato'
15. });
16. // 4
17. $('#tip4').tipso();
18. // 5
19. $('#tip5').tipso({
20. useTitle: false
21. });
22. $('#btn5').on({
23. click: function (e) {
24. if ($(this).text() == '显示') {
25. $(this).text('隐藏');
26. $('#tip5').tipso('show');
27. } else {
28. $(this).text('显示');
29. $('#tip5').tipso('hide');
30. }
31. e.preventDefault();
32. }
33. });
34. // 6
35. $('#tip6').tipso({
36. useTitle: false
37. });
38. $('#btn6').on('click', function () {
39. var $val = $(this).prev().val();
40. if ($val) {
41. $('#tip6').tipso('update', 'content', $val);
42. }
43. });
44. // 7
45. $('#tip7').tipso({
46. useTitle: false
47. });
48. // 8
49. $('#tip8').tipso({
50. useTitle: false,
51. onBeforeShow: function () {
52. $('#status').html('beforeShow');
53. },
54. onShow: function () {
55. $('#status').html('show');
56. },
57. onHide: function () {
58. $('#status').html('hide');
59. }
60. });
61. });