jQuery－extend扩展插件之实现多表单标注颜色（常用于多条件联合查询）

最新推荐文章于 2020-02-17 15:28:07 发布

longwentao

最新推荐文章于 2020-02-17 15:28:07 发布

阅读量1.9k

点赞数

分类专栏： Java技术文档文章标签： jquery 扩展 function input class javascript

本文链接：https://blog.csdn.net/longwentao/article/details/6934975

版权

Java技术文档专栏收录该内容

7 篇文章 0 订阅

订阅专栏

近期在开发后台的项目中，需使用多条件联合查询表单同时操作，为了使操作更人性化，在参考相关文档及手册后（老大提供的资料），自己模拟实现了一个简单的颜色标注插件，希望对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属性找对应的父标签。

三、操作效果图：

longwentao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery－extend扩展插件之实现多表单标注颜色（常用于多条件联合查询）

近期在开发后台的项目中，需使用多条件联合查询表单同时操作，为了使操作更人性化，在参考相关文档及手册后（老大提供的资料），自己模拟实现了一个简单的颜色标注插件，希望对Java爱好者有点小帮助，写得不好，还请指正，谢谢。不多说了，下面开始代码的编写吧一、color-plugin.js文件代码如下：//设置表单背景颜色( function($) {//插件$.extend($, {
复制链接

扫一扫