近期在开发后台的项目中,需使用多条件联合查询表单同时操作,为了使操作更人性化,在参考相关文档及手册后(老大提供的资料),自己模拟实现了一个简单的颜色标注插件,希望对Java爱好者有点小帮助,写得不好,还请指正,谢谢。不多说了,下面开始代码的编写吧
一、color-plugin.js文件代码如下:
//设置表单背景颜色
( function($) {
//插件
$.extend($, {
//命名空间
color : {
//依赖关系
init:function(){
$("[bedepended]").each(function(){
$(this).click(function(){
var check = $(this).attr("checked");
var depends = $(this).attr("bedepended");
if(check){
$(depends).removeAttr("disabled");
}else{
$(depends).attr("disabled","disabled");
$(depends).attr("value","");
}
});
});
},
//设置颜色
set:function(groupId){
$("[setBackGroundColor="+groupId+"]").each(function(){
var node=$(this);
//如果值为空,过滤掉
var v=node.val().replace(/(^\s+)|(\s+$)/g,"");
if(v.length<1) return;
//过滤掉指定的值
var skipValue=node.attr("skipValue");
if(skipValue==-1000) return;
//过滤指定isInt=yes 而值不是int的
var isUserInt=(node.attr("isInt")=="yes");
var isInt=/^-*\d+$/.test(v);
if(isUserInt&&!isInt) return;
//如果为checkBox 而又未选中
var isCheckBox=/checkbox/.test(node.attr("type"));
if(isCheckBox && !node.attr("checked")) return ;
//有依赖关系的组件
var isUseDepend = node.attr("depend");//获得父节点的Id
var isNotDepend = (!!isUseDepend && !$(isUseDepend).attr("checked"));//如果是父节点,但未被选中
if(isNotDepend){return;}
node.css("background-color","#FFE8F0");
});
},
//清除颜色
clear:function(groupId){
$("[setBackGroundColor="+groupId+"]").each(function(){
var node=$(this);
node.css("background-color","");
});
}
}
});
})(jQuery);
二、test-color-plugin.html文件,需要注意各个表单的属性关系
<head>
<title>jquery之颜色插件</title>
<script language="javascript" src="jquery-1.4.3.js" ></script>
<script language="javascript" src="color-plugin.js" ></script>
<script language="javascript">
$(function(){
$.color.init();//只初始化一次
$("#btn").click(function(){
//先清空所有样式,再使用set()方法设置对应表单的样式
$.color.clear(1);
$.color.set(1);
});
})
</script>
</head>
<body>
用户ID号:<input type="text" class="name" setBackGroundColor="1" isInt="yes" /><br />
注册日期:<input type="text" class="name" setBackGroundColor="1" /> 到 <input type="text" class="name" setBackGroundColor="1" /><br />
审核日期:<input type="text" class="name" setBackGroundColor="1" /> 到 <input type="text" class="name" setBackGroundColor="1" /><br />
体育爱好:<input type="checkbox" class="name" setBackGroundColor="1" />篮球<input type="checkbox" class="name" setBackGroundColor="1" />下棋<br />
依赖关系:<input type="checkbox" id="parentId" bedepended="#book,#game" />
书籍:<input type="text" id="book" depend="#parentId" class="name" disabled="disabled" setBackGroundColor="1" />
游戏:<input type="text" id="game" depend="#parentId" class="name" disabled="disabled" setBackGroundColor="1" /><br />
此项过滤:<input type="text" class="name" skipValue="-1000" setBackGroundColor="1" /><br />
<input type="button" id="btn" value="点击我" />
</body>
一)、test-color-plugin.html 表单属性说明:
1、setBackGroundColor:用于分组的属性,所有需要标注颜色的表单都需添加这个属性,且值为"1",如:setBackGroundColor="1"
2、用户ID号的 isInt 属性:整形属性;如果输入的数据为整数类型,则标,否则不标注
3、此项过滤的 skipValue 属性:过滤属性;说明此表单过滤掉,不标注颜色
4、依赖关系,由父子标签同时存在,在父标签中,需指定bedepended属性,这个属性的值为子标签属性的ID值,如:bedepended="#book,#game";在子标签中,需指定depend属性,值为父标签的ID属性的值,如:depend="#parentId"。这样,父标签可以通过bedepended属性找到相应的子标签,子标签可以通过depend属性找对应的父标签。
三、操作效果图: