给jQuery Validate添加一个好看点的提示框
给jQuery Validate添加一个好看点的提示框。
弄个箭头是不是会更好？如果只有一层结构，那么箭头只能用背景图实现，但是我又不想用图片，没想到办法~有高人帮忙写一写看看。
Js代码 
- $(form).validate({
- errorElement:'div',
- errorPlacement: function(error, element) {
- error.addClass('tooltip tooltip-inner');
- element.after(error);
- var pos = $.extend({}, element.offset(), {
- width: element.outerWidth()
- , height: element.outerHeight()
- }),
- actualWidth = error.outerWidth(),
- actualHeight = error.outerHeight();
- error.css({display:'block',opacity:'0.8',top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2});
- },
- highlight: function(element, errorClass) {
- //高亮显示
- $(element).addClass(errorClass);
- $(element).parents('li:first').children('label').addClass(errorClass);
- },
- unhighlight:function(element, errorClass){
- $(element).removeClass(errorClass);
- $(element).parents('li:first').children('label').removeClass(errorClass);
- }
- });
Html代码
- .tooltip {
- position: absolute;
- z-index: 1020;
- display: block;
- visibility: visible;
- padding: 5px;
- font-size: 11px;
- opacity: 0;
- filter: alpha(opacity=0);
- }
- .tooltip-inner {
- max-width: 200px;
- padding: 3px 8px;
- color: #ffffff;
- text-align: center;
- text-decoration: none;
- background-color: #000000;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- }
Html代码
- form input.error{
- color:#F00;
- border: 1px solid #CE7979;
- background:#FFF7FA;
- }
- form label.error{
- color:#F00;
- }