您的位置：首页 > Web前端 > JQuery

扩展Jquery自定义的一个错误警告控件ErrorProvider

2011-11-03 18:02 435 查看

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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航