HTML:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>错误警告组件</title> <link href="Styles/JExtension.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.6.min.js" type="text/javascript"></script> <script src="JExtensions/JErrorProvider.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#error").blur(function () { if ($("#error").val() == "") { $("#error").errorProvider({ msg: '不可空白', type: 'error', distance: 0 }); } else { $("#error").errorProvider({ msg: '', type: 'error', distance: 0 }); } }); $("#warn").blur(function () { if ($("#warn").val() == "") { $("#warn").errorProvider({ msg: '不可空白', type: 'warn', distance: 0 }); } else { $("#warn").errorProvider({ msg: '', type: 'warn', distance: 0 }); } }); }); </script> </head> <body> <input id="error" type="text" /><br /> <input id="warn" type="text" /> </body> </html> SCRIPT:
$.fn.extend({ errorProvider: function(cfg) { if (!cfg.hasOwnProperty("msg")) { throw new Error("msg未设置"); } if (!cfg.hasOwnProperty("type")) { cfg.type = "warn"; } if (!cfg.hasOwnProperty("distance")) { cfg.distance = 0; } var siblings = this.next("span[esist='true']"); if(cfg.msg!='') { if(siblings.length==0) { var sign = $('<span>').attr("title", cfg.msg).attr("esist","true").html(" "); if (cfg.type == "error") { sign.attr("class", "error").css("left", cfg.distance); } else { sign.attr("class", "warn").css("left", cfg.distance); } sign.insertAfter(this); } else { $(siblings).show(); } } else { if(siblings.length>0) { $(siblings).hide(); } } } }); CSS:
.error { background-image: url("./images/error.png"); background-repeat: no-repeat; border-width: 0; position: relative; width: 24px; height: 24px; background-position: center; } .warn { background-image: url("./images/warning.png"); background-repeat: no-repeat; border-width: 0; position: relative; width: 24px; height: 24px; background-position: center; }
