哈哈 手工馒头好吃,今天小编跟大家分享手工js表单验证代码,感兴趣的朋友快来吧。
因为是自定义样式,所以兼容所有浏览器版本,个人认为非常漂亮:网址wuxi.rongzi.com
css
/*tooltip*//* CSS属性顺序按照 字母首字母 排列*/
.ui-slider-tooltip{ background:#fa; border:px solid #fa; color:#fff; display: block; text-align: left; padding: px px px px; position: absolute; z-index:; }
.ui-corner-all { border-radius: px; -moz-border-radius-bottomleft:px; -moz-border-radius-bottomright:px; -moz-border-radius-topleft:px; -moz-border-radius-topright:px; -webkit-border-top-left-radius:px px; -webkit-border-top-right-radius:px px;-webkit-border-bottom-right-radius:px px; -webkit-border-bottom-left-radius:px px;}
.ui-tooltip-pointer-down { border-bottom-width: ; border-left: px dashed transparent; border-right: px dashed transparent; border-top: px solid #fa; bottom: -px; display: block; height:; left: %; margin-left: -px; position: absolute; width:;}
.ui-tooltip-pointer-down-inner { border-left: px dashed transparent; border-right: px dashed transparent; border-top: px solid #fa; left: -px; top: -px; position: absolute; }
.tip{ font-size:pt; line-height:px;}
.error{ border: px solid rgb(,);}
前台:
js:
调用的js:
提示信息最小宽度为
options.flagWidth = "auto"; // (parseInt(options.flagWidth) < ) ? : parseInt(options.flagWidth);+ "px"
var oTip = $("");
var oPointer = $("
");
var oTipInfo = $("
" + options.flagInfo + "
").attr("class",options.flagCss).css("width",options.flagWidth);
//合并提示信息
oToolTip = $(oTip).append(oTipInfo).append(oPointer);
if ($("#tipWrap_" + $(this).attr("id")).length > ) $("#tipWrap_" + $(this).attr("id")).remove();
//添加淡入效果
if (options.isAnimate) {
$(oToolTip).fadeIn("slow");
}
$(obj).after(oToolTip);
//计算提示信息的top、left和width //position.top
var position = $(obj).position();
var oTipTop = eval(position.top - $(oTip).outerHeight() - );
var oTipLeft = position.left;
$(oToolTip).css("top",oTipTop + "px").css("left",oTipLeft + "px");
};
fun_show();
$('.error').removeClass('error');
$(this).addClass("error");
setTimeout(function () { $(oToolTip).remove(); },);
});
return this;
}
})(jQuery);