基于jQuery消息提示框插件Tipso

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

在线预览   源码下载

实现的代码：

Html代码  

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

Js代码  

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