给jQuery Validate添加一个好看点的提示框。

 

弄个箭头是不是会更好？如果只有一层结构，那么箭头只能用背景图实现，但是我又不想用图片，没想到办法~有高人帮忙写一写看看。

 

Js代码  

1. $(form).validate({  
2.                 errorElement:'div',  
3.                 errorPlacement: function(error, element) {  
4.                     error.addClass('tooltip tooltip-inner');  
5.                     element.after(error);  
6.                     var pos = $.extend({}, element.offset(), {  
7.                         width: element.outerWidth()  
8.                       , height: element.outerHeight()  
9.                       }),  
10.                       actualWidth = error.outerWidth(),  
11.                       actualHeight = error.outerHeight();  
12.                     error.css({display:'block',opacity:'0.8',top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2});  
13.                 },  
14.                 highlight: function(element, errorClass) {  
15.                     //高亮显示  
16.                     $(element).addClass(errorClass);  
17.                     $(element).parents('li:first').children('label').addClass(errorClass);  
18.                 },  
19.                 unhighlight:function(element, errorClass){  
20.                     $(element).removeClass(errorClass);  
21.                     $(element).parents('li:first').children('label').removeClass(errorClass);  
22.                 }  
23.             });  

 

 

 

Html代码  

1. .tooltip {  
2.   position: absolute;  
3.   z-index: 1020;  
4.   display: block;  
5.   visibility: visible;  
6.   padding: 5px;  
7.   font-size: 11px;  
8.   opacity: 0;  
9.   filter: alpha(opacity=0);  
10. }  
11.   
12. .tooltip-inner {  
13.   max-width: 200px;  
14.   padding: 3px 8px;  
15.   color: #ffffff;  
16.   text-align: center;  
17.   text-decoration: none;  
18.   background-color: #000000;  
19.   -webkit-border-radius: 4px;  
20.   -moz-border-radius: 4px;  
21.   border-radius: 4px;  
22. }  

Html代码  

1. form input.error{  
2.     color:#F00;  
3.     border: 1px solid #CE7979;  
4.     background:#FFF7FA;  
5. }  
6. form label.error{  
7.     color:#F00;  
8. }