CakePHP 多输入 jQuery 插件
我为我的英语道歉！这个插件可以帮助你创建自动添加的输入。它们可以通过添加书籍的几页来使用。如有任何问题，请联系 men__1@mail.ru。
视图代码
<?php
echo $this->Html->script('jquery-1.7.1.min');
echo $this->Html->script('jquery.multinput');
echo $this->Form->create();
echo $this->Form->input('User.name');
?>
<div id="multi-input">
<?php
echo $this->Form->input('User.Children.multi_i.name');
echo $this->Form->input('User.Children.multi_i.age');
?>
</div>
<?php
echo $this->Form->end('test');
?>
<script>
$(function() {
$("#multi-input").multinput();
});
</script>
插件选项
- myPag - 分页器对象。如果没有传递，分页器将在当前对象之后发布。
- iterator - 要用数组索引替换的字符串
- addText - 添加输入按钮的文本
- hideOld - 是否隐藏新输入
jQuery 插件代码
jQuery.fn.multinput = function(options) {
var options = jQuery.extend({
myPag: false,
iterator: "multi_i",
addText: "Add",
hideOld: true
}, options);
var deffContent;
var count = 1;
return this.each(function(){
var thisM = this;
deffContent = jQuery(thisM).clone();
var tmpContent = deffContent.clone();
tmpContent.find("input").each(function() {
jQuery(this).attr("name", jQuery(this).attr("name").replace(options.iterator, count));
});
jQuery(thisM).html("<div multi_i='" + count + "'>" + tmpContent.html() + "</div>");
if(options.myPag == false) {
jQuery(thisM).after("<div id='multi-paginator'></div>");
var paginator = jQuery("#multi-paginator");
} else {
var paginator = options.myPag;
}
paginator.html("<ul><li><a class='multi-add' href='#'>" + options.addText + "</a></li><li class='active'><a href='#'>" + count + "</a></li></ul>");
if(options.hideOld) {
paginator.find("ul li a").live("click", function() {
if(!jQuery(this).hasClass("multi-add")) {
var id = $(this).text();
jQuery(thisM).children().each(function() {
if($(this).attr("multi_i") == id) {
$(this).show();
} else {
$(this).hide();
}
});
}
});
}
paginator.find("ul li a.multi-add").click(function() {
count++;
paginator.find("ul li").removeClass("active").parent().append("<li class='active'><a href='#'>" + count + "</a></li>");
var tmpContent = deffContent.clone();
tmpContent.find("input").each(function() {
jQuery(this).attr("name", jQuery(this).attr("name").replace(options.iterator, count));
});
if(options.hideOld) {jQuery(thisM).children().hide();};
jQuery(thisM).append("<div multi_i='" + count + "'>" + tmpContent.html() + "</div>");
});
});
};
结果
Array
(
[User] => Array
(
[name] => menOne
[Children] => Array
(
[1] => Array
(
[name] => Max
[age] => 34
)
[2] => Array
(
[name] => Jon
[age] => 23
)
[3] => Array
(
[name] => Frad
[age] => 5
)
)
)
)
如有任何问题，请联系 men__1@mail.ru。