自己练手的一个jquery消息提示插件

看图:


jquery.message.css

1. @charset "utf-8";
   
2. 
   
3. #system-message {
   
4.         margin-bottom: 10px;
   
5.         padding-bottom: 0;
   
6.         padding-left: 0;
   
7.         padding-right: 0;
   
8.         padding-top: 0;
   
9. }
   
10. 
    
11. #system-message dt {
    
12.         display: none;
    
13.         font-weight: bold;
    
14. }
    
15. 
    
16. #system-message dd {
    
17.         font-weight: bold;
    
18.         margin-bottom: 0;
    
19.         margin-left: 0;
    
20.         margin-right: 0;
    
21.         margin-top: 0;
    
22.         text-indent: 30px;
    
23. }
    
24. 
    
25. #system-message dd ul {
    
26.         background-position: 4px top;
    
27.         background-repeat: no-repeat;
    
28.         border-bottom-color: #84A7DB;
    
29.         border-bottom-style: solid;
    
30.         border-bottom-width: 3px;
    
31.         border-top-color: #84A7DB;
    
32.         border-top-style: solid;
    
33.         border-top-width: 3px;
    
34.         color: #0055BB;
    
35.         list-style-image: none;
    
36.         list-style-position: outside;
    
37.         list-style-type: none;
    
38.         margin-bottom: 10px;
    
39.         padding-bottom: 10px;
    
40.         padding-left: 10px;
    
41.         padding-right: 10px;
    
42.         padding-top: 10px;
    
43. }
    
44. 
    
45. #system-message dd ul li {
    
46.         line-height: 1.5em;
    
47. }
    
48. 
    
49. #system-message dd.message ul {
    
50.         background-color: #C3D2E5;
    
51.         background-image: url("../images/notice-info.png");
    
52. }
    
53. 
    
54. #system-message dd.error ul,#system-message dd.warning ul,#system-message dd.notice ul
    
55.         {
    
56.         color: #CC0000;
    
57. }
    
58. 
    
59. #system-message dd.error ul {
    
60.         background-color: #E6C0C0;
    
61.         background-image: url("../images/notice-alert.png");
    
62.         border-bottom-color: #DE7A7B;
    
63.         border-top-color: #DE7A7B;
    
64. }
    
65. 
    
66. #system-message dd.warning ul {
    
67.         background-color: #E6C8A6;
    
68.         background-image: url("../images/notice-note.png");
    
69.         border-bottom-color: #FFBB00;
    
70.         border-top-color: #FFBB00;
    
71.         color: #CC0000;
    
72. }
    
73. 
    
74. #system-message dd.notice ul {
    
75.         background-color: #EFE7B8;
    
76.         background-image: url("../images/notice-note.png");
    
77.         border-bottom-color: #F0DC7E;
    
78.         border-top-color: #F0DC7E;
    
79.         color: #CC0000;
    
80. }
    
81. 
    
82. /*=S 编辑器图片来源提示 */
    
83. .editor_hint {
    
84.         width: auto;
    
85.         margin-bottom: 0px;
    
86.         border: 1px solid #F8E8AB;
    
87.         background-color: #FFF9E2;
    
88.         color: #909188;
    
89.         overflow: hidden;
    
90.         position: relative;
    
91.         min-height: 20px;
    
92.         _height: 20px;
    
93. }
    
94. 
    
95. .editor_hint:after {
    
96.         clear: both;
    
97.         display: block;
    
98.         content: ""
    
99. }
    
100. 
     
101. .editor_hint span {
     
102.         text-indent: 0;
     
103.         float: left
     
104. }
     
105. 
     
106. .editor_hint span a, /*.editor_hint a{color:#CE0201!important;}*/
     
107.         .editor_hint span a:link,.editor_hint span a:active {
     
108.         text-decoration: underline;
     
109. }
     
110. 
     
111. .editor_hint span a:hover,.editor_hint span a:visited {
     
112.         text-decoration: underline;
     
113. }
     
114. 
     
115. .bt_hint_close {
     
116.         font-family: verdana;
     
117.         color: #D43A04;
     
118.         font-weight: bold;
     
119.         cursor: pointer;
     
120.         font-size: 12px;
     
121.         position: absolute;
     
122.         right: 5px;
     
123.         top: 6px;
     
124. }
     
125. 
     
126. .editor_hint_cont {
     
127.         padding: 5px 15px 5px 5px;
     
128. }
     
129. 
     
130. .editor_hint_cont .icon_hint {
     
131.         margin-right: 5px;
     
132.         position: static;
     
133. }
     
134. 
     
135. /* 文本框加载 */
     
136. .cg_loading {
     
137.         background-image: url("../images/ajax_small.gif");
     
138.         background-position: 100% 2px;
     
139.         background-repeat: no-repeat;
     
140.         background-color: #D5EEFF;
     
141. }
     
142. 
     
143. /* 文本框加载 */
     
144. .cg_loading {
     
145.         background-position: 100% 2px;
     
146.         background-repeat: no-repeat;
     
147.         background-color: #D5EEFF;
     
148.         background-image: url("../images/loading.gif") ;
     
149. }
     
150. 
     
151. .ok_icon {
     
152.         background-position: 100% 2px;
     
153.         background-repeat: no-repeat;
     
154.         background-color: #D5EEFF;
     
155.         background-image: url("../images/accept.png");
     
156. }
     
157. 
     
158. .notok_icon {
     
159.         background-position: 100% 2px;
     
160.         background-repeat: no-repeat;
     
161.         background-color: #D5EEFF;
     
162.         background-image: url("../images/exclamation.png");
     
163. }

复制代码

jquery.message.js

1. /**
   
2. *  type: Information reminder types; The rid_device_info: common information, error messages, warn as freely though they are: warning: the information
   
3. *
   
4. *  isVanish:  Whether timing hidden. Default automatic hidden
   
5. *  vanish:         Disappear time, the default for 3 seconds (3000 milliseconds)
   
6. *  content:  prompt message.
   
7. *
   
8. * @author wucc Created on 2011.07.13
   
9. */
   
10. (function($){
    
11.     $.fn.message = function(options){
    
12.         var defaults = {
    
13.             type    :"info",// 信息提示类型；info：普通信息，error：错误信息，warn：警告信息
    
14.                         isVanish:true, // 是否定时隐藏 默认自动隐藏
    
15.                         vanish  :1500, // 消失时间 ,默认为1500毫秒）
    
16.                         content :escape("提示信息")
    
17.         }
    
18.                 var div=$(this);
    
19.         var options = $.extend(defaults, options);
    
20.         this.each(function(){
    
21.                         if('object' == typeof(options))
    
22.                         {
    
23.                                 var type = options.type.toLowerCase();
    
24.                                 if(type == "info"){
    
25.                                         var html ='<dl id="system-message"><dt class="message">消息</dt><dd class="message message"><ul><li>'+options.content+'</li></ul></dd></dl>';
    
26.                                         div.hide();
    
27.                                         div.html(html)
    
28.                                         div.show("1000");
    
29.                                 }else if(type == "error"){
    
30.                                         var html ='<dl id="system-message"><dt class="error">错误</dt><dd class="error message"><ul><li>'+options.content+'</li></ul></dd></dl>';
    
31.                                         div.hide();
    
32.                                         div.html(html)
    
33.                                         div.show("1000");
    
34.                                 }else if(type == "warn"){
    
35.                                         var html ='<dl id="system-message"><dt class="notice">注意</dt><dd class="notice message"><ul><li>'+options.content+'</li></ul></dd></dl>';
    
36.                                         div.hide();
    
37.                                         div.html(html)
    
38.                                         div.show("1000");
    
39.                                 }else if(type == "editor"){
    
40.                                         var html = '<div style="height: auto;" class="editor_hint" id="qzEditor_1_tips"><div class="editor_hint_cont">'+options.content+'</div></div>';
    
41.                                         div.hide();
    
42.                                         div.html(html)
    
43.                                         div.show("1000");
    
44.                                        
    
45.                                 }
    
46.                        
    
47.                                 if(options.isVanish){
    
48.                                         setTimeout(function(){div.hide(options.vanish,function(){div.html("");})},options.vanish);
    
49.                                 }
    
50.                         }
    
51.         });
    
52.                
    
53.     };
    
54. })(jQuery);

复制代码

message.zip (66.88 KB, 下载次数: 4)

2011-10-28 17:53:34 上传

下载次数: 4

Snail 来咱们论坛当版主

好不好

混混@普宁.中国 发表于 2011-9-28 23:39
Snail 来咱们论坛当版主

好不好

  我和乐意啊!只是我没有这方面的经验哦!

Snail 发表于 2011-9-29 08:18
我和乐意啊!只是我没有这方面的经验哦!

直接超版了  

混混@普宁.中国 发表于 2011-9-29 17:04
直接超版了

那我可不能辜负重望啦