本文介绍了一个基于JQuery的快速添加/移除插件EasyInsert，该插件支持动态添加多行标签，并提供了丰富的配置选项。文章通过多个示例展示了如何使用此插件进行自定义输入框和其他元素的添加。
<!--
JQuery快速添加/移除插件EasyInsert用着很方便，记录一下，备用。感谢原作者，辛苦！
这个版本支持动态添加多行需要的标签，并没有添加标签元素的事件
为保证原文件完整我另外添加了针对某个标签元素的点击事件,按照这样的思路可添加其它标签的其它事件。
如果直接在原文件脚本中做修改最好，会更完整！
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title></title>
<style type="text/css">
body
{
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
}
ul
{
margin: 0;
padding: 0;
list-style: none;
}
a
{
margin-left: 5px;
color: #07F;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
input
{
border: 1px solid #ccc;
margin: 2px;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
td
{
margin: 0;
padding: 10px;
border: 1px solid #ccc;
}
</style>
<script src="jquery.js" type="text/javascript"></script>
<!--这里要引用一下JQuery库文件，注意路径，并JQuery1.4版本以上-->
<script type="text/javascript">
$(function () {
/***********************************************************
取值
************************************************************/
$("#getValue1").click(function () {
$('input[name="demo1"]').each(function () {
var index = $('input[name="demo1"]').index($(this)) + 1;
alert('demo1第' + index + '个值为:' + $(this).val());
});
});
/**********************************************************************
创建时定义一个有name名称的，这样利于取值，默认是i-text
***********************************************************************/
$("#demo1").easyinsert({
name: ["demo1"],
value: [""],
maxlength: 15,
className: ["demo1_class1"],
toplimit: 5,
initValue: [[""]]
});
$("#demo2").easyinsert({
name: ["demo2", "demo2"], //可以同时添加两个（或更多），name值相同也必须分开设置，name数组的长度就是每组input的个数。type、value、maxlength、className四种属性，若同组组员的设置一样，可以只设置一次。
value: ["默认值2-1", "默认值2-2"], //可以给同组input分别设置默认值
maxlength: 15, //每组input的maxlength都一样，无需使用数组
className: ["demo2_class1", "demo2_class2"], //不用我解释了吧
toplimit: 5, //可以添加组数上限（默认是0，表示无上限），它是总管，so，name相当于小组组长
initValue: [//初始化的时候，各input的value就是归它管，必须是数组
["初始值2-1", "初始值2-2"] ]
});
$("#demo3").easyinsert({
name: "demo3",
toplimit: 2,
initValue: [ ["初始值3-1"], //必须是数组，就算每组只有一个input
["初始值3-2"],
["初始值3-3"]//总管只允许添加两组
]
});
$("#demo4").easyinsert({
name: ["demo4", "demo4", "demo4", "demo4", "demo4", "demo4"],
type: ["text", "radio", "password", "checkbox", "file", "button"],
value: ["我是text", "我是radio", "我是password", "我是checkbox", "", "我是button"],
className: ["demo4_text", "demo4_radio", "demo4_password", "demo4_checkbox", "demo4_file", "demo4_button"]
});
$("#demo5").easyinsert({//type新增custom和select
name: ["demo5", "demo5", "demo5", "demo5"],
type: ["custom", "text", "custom", "select"],
value: ["<strong style=\"color:#ff7b0e;\">科目：</strong>", "", "<strong style=\"color:#ff7b0e;\">类型：</strong>", { '理论': '1', '技能': '2', '上机': '3'}],
initValue: [
["<strong style=\"color:#ff7b0e;\">科目：</strong>", "初始值5-1", "<strong style=\"color:#ff7b0e;\">类型：</strong>", { '理论a': '1', '技能a': '2', '上机a': '3'}],
["<strong style=\"color:#ff7b0e;\">科目：</strong>", "初始值5-1", "<strong style=\"color:#ff7b0e;\">类型：</strong>", { '理论b': '1', '技能b': '2', '上机b': '3'}]]
});
});
; (function ($) {
$.fn.extend({
"easyinsert": function (o) {
o = $.extend({
//触发器
clicker: null, //根据class（或id）选择，默认.next()获取
//父标签
wrap: "li",
name: "i-text",
type: "text",
value: "",
maxlength: 20,
className: "i-text",
//新增上限值
toplimit: 0, //0表示不限制
//初始化值，二维数组
initValue: null//用于修改某资料时显示已有的数据
}, o || {});
var oo = {
remove: "<a href=\"#nogo\" class=\"remove\">移除</a>",
error1: "参数配置错误，数组的长度不一致，请检查。",
error2: "参数配置错误，每组初始化值都必须是数组，请检查。"
}
//容器
var $container = $(this);
var allowed = true;
//把属性拼成数组（这步不知道是否可以优化？）
var arrCfg = new Array(o.name, o.type, o.value, o.maxlength, o.className);
//arr ==> [name, type, value, maxlength, className]
var arr = new Array();
$.each(arrCfg, function (i, n) {
if ($.isArray(n)) {
arr[i] = n;
} else {
arr[i] = new Array();
if (i === 0) {
arr[0].push(n);
} else {
//补全各属性数组（根据name数组长度）
$.each(arr[0], function () {
arr[i].push(n);
});
}
}
//判断各属性数组的长度是否一致
if (arr[i].length !== arr[0].length) {
allowed = false;
$container.text(oo.error1);
}
});
if (allowed) {
//获取触发器
var $Clicker = !o.clicker ? $container.next() : $(o.clicker);
$Clicker.bind("click", function () {
//未添加前的组数
var len = $container.children(o.wrap).length;
//定义一个变量，判断是否已经达到上限
var isMax = o.toplimit === 0 ? false : (len < o.toplimit ? false : true);
if (!isMax) {//没有达到上限才允许添加
var $Item = $("<" + o.wrap + ">").appendTo($container);
$.each(arr[0], function (i) {
switch (arr[1][i]) {
case "select": //下拉框
var option = "";
$.each(arr[2][i], function (i, n) {
option += "<option value='" + n + "'>" + i + "</option>";
});
$("<select>", {
name: arr[0][i],
className: arr[4][i]
}).append(option).appendTo($Item);
break;
case "custom": //自定义内容，支持html
$Item.append(arr[2][i]);
break;
default: //默认是input
$("<input>", {//jQuery1.4新增方法
name: arr[0][i],
type: arr[1][i],
value: arr[2][i],
maxlength: arr[3][i],
className: arr[4][i]
}).appendTo($Item);
}
});
$Item = $container.children(o.wrap);
//新组数
len = $Item.length;
if (len > 1) {
$Item.last().append(oo.remove);
if (len === 2) {//超过一组时，为第一组添加“移除”按钮
$Item.first().append(oo.remove);
}
}
$Item.find(".remove").click(function () {
//移除本组
$(this).parent().remove();
//统计剩下的组数
len = $container.children(o.wrap).length;
if (len === 1) {//只剩一个的时候，把“移除”按钮干掉
$container.find(".remove").remove();
}
//取消“移除”按钮的默认动作
return false;
});
}
//取消触发器的默认动作
return false;
});
//初始化
if ($.isArray(o.initValue)) {//判断初始值是否是数组（必需的）
$.each(o.initValue, function (i, n) {
if (!$.isArray(n)) {
$container.empty().text(oo.error2);
return false;
} else {
if (n.length !== arr[0].length) {
$container.empty().text(oo.error1);
return false;
}
}
var arrValue = new Array();
//初始值替换默认值
$.each(n, function (j, m) {
arrValue[j] = arr[2][j]
arr[2][j] = m;
});
$Clicker.click();
//默认值替换初始值
$.each(arrValue, function (j, m) {
arr[2][j] = m;
});
//上面这种[移形换位法]不知道效率怎么样，我想不出别的更好的方法
});
} else {
$Clicker.click();
}
}
}
});
})(jQuery);
</script>
</head>
<body>
<table width="90%" align="center">
<tr>
<td width="10%" align="right">
<strong>Demo1</strong>
</td>
<td width="90%">
<ul id="demo1">
</ul>
<a href="#">+ 添加</a><a href="#" id="getValue1">+ 取值</a>
</td>
</tr>
<tr>
<td align="right">
<strong>Demo2</strong>
</td>
<td>
<ul id="demo2">
</ul>
<a href="#">+ 添加（最多5项）</a>
</td>
</tr>
<tr>
<td align="right">
<strong>Demo3</strong>
</td>
<td>
<ul id="demo3">
</ul>
<a href="#">+ 添加（最多2项）</a>
</td>
</tr>
<tr>
<td align="right">
<strong>Demo4</strong>
</td>
<td>
<ul id="demo4">
</ul>
<a href="#">+ 添加</a>
</td>
</tr>
<tr>
<td align="right">
<strong>Demo5</strong> <sup style="color: #F00;">NEW</sup>
</td>
<td>
<ul id="demo5">
</ul>
<a href="#">+ 添加</a>
</td>
</tr>
</table>
</body>
<script text="text/javascript">
$(function(){
/**********************************************************
对所有demo4中的ClassName是demo4_button的元素添加
点击事件、请注意这里用到了JQuery中的live()方法，bind()则
无法实现
**********************************************************/
$('input[name="demo4"]').each(function(){
if($(this).attr("class")==="demo4_button")
{
addBtnEvent("demo4_button",button_click);
}
});
function button_click(){
alert("aa");
}
function addBtnEvent(classname,fun){
/*
只针对已存在元素
$("."+classname).bind("click",fun);
*/
/*
无论是第一次加载还是动态生成都起作用
注意die()方法的使用
参阅最新JQuery帮助文档
*/
$("."+classname).die().live("click",fun);
}
//***********************************************************
});
</script>
</html>
扫一扫
221
评论 6
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
