如何克隆选择的插件 [英] How can I Clone Chosen Plugin
问题描述
我想使用 http://harvesthq.github.com/chosen/ 女巫 jquery克隆功能:
I wanted to use http://harvesthq.github.com/chosen/ witch jquery clone function:
<script type="text/javascript">
$(function(){
var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
$('a.add').relCopy({ append: removeLink});
});
</script>
<form method="post" action="">
<div id="cloner">
<p class="clone">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".chzn-select").data("placeholder","Search...").chosen();
});
</script>
<select data-placeholder="Search..." name="actor_name[]" class="chzn-select" style="width:350px;" tabindex="2">
<option value=""></option>
<?php
require_once '../engine/db.php';
$rezultat_url = mysql_query("SELECT `id`, `actor_name` FROM `actors` ORDER BY `id` DESC");
while($row=mysql_fetch_array($rezultat_url)){
$id = $row[id];
$aktor = $row[actor_name];
echo'<option value="'.$id.'">'.$actor.'</option>';
}
?>
</select>
<input type="text" name="role_name[]" value="" />
<input type="text" name="epi_count[]" value="" />
</p>
</div>
<p><a href="#" class="add" rel=".clone">Add More</a></p>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script src="prism.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../administrator/js/reCopy.js"></script>
</form>
这是我的表单克隆脚本:
This is my form clone'ing script:
/**
* jQuery-Plugin "relCopy"
*
* @version: 1.1.0, 25.02.2010
*
* @author: Andres Vidal
* code@andresvidal.com
* http://www.andresvidal.com
*
* Instructions: Call $(selector).relCopy(options) on an element with a jQuery type selector
* defined in the attribute "rel" tag. This defines the DOM element to copy.
* @example: $('a.copy').relCopy({limit: 5}); // <a href="example.com" class="copy" rel=".phone">Copy Phone</a>
*
* @param: string excludeSelector - A jQuery selector used to exclude an element and its children
* @param: integer limit - The number of allowed copies. Default: 0 is unlimited
* @param: string append - HTML to attach at the end of each copy. Default: remove link
* @param: string copyClass - A class to attach to each copy
* @param: boolean clearInputs - Option to clear each copies text input fields or textarea
*
*/
(function($) {
$.fn.relCopy = function(options) {
var settings = jQuery.extend({
excludeSelector: ".exclude",
emptySelector: ".empty",
copyClass: "copy",
append: '',
clearInputs: true,
limit: 0 // 0 = unlimited
}, options);
settings.limit = parseInt(settings.limit);
// loop each element
this.each(function() {
// set click action
$(this).click(function(){
var rel = $(this).attr('rel'); // rel in jquery selector format
var counter = $(rel).length;
// stop limit
if (settings.limit != 0 && counter >= settings.limit){
return false;
};
var master = $(rel+":first");
var parent = $(master).parent();
var clone = $(master).clone(true).addClass(settings.copyClass+counter).append(settings.append);
//Remove Elements with excludeSelector
if (settings.excludeSelector){
$(clone).find(settings.excludeSelector).remove();
};
//Empty Elements with emptySelector
if (settings.emptySelector){
$(clone).find(settings.emptySelector).empty();
};
// Increment Clone IDs
if ( $(clone).attr('id') ){
var newid = $(clone).attr('id') + (counter +1);
$(clone).attr('id', newid);
};
// Increment Clone Children IDs
$(clone).find('[id]').each(function(){
var newid = $(this).attr('id') + (counter +1);
$(this).attr('id', newid);
});
//Clear Inputs/Textarea
if (settings.clearInputs){
$(clone).find(':input').each(function(){
var type = $(this).attr('type');
switch(type)
{
case "button":
break;
case "reset":
break;
case "submit":
break;
case "checkbox":
$(this).attr('checked', '');
break;
default:
$(this).val("");
}
});
};
$(parent).find(rel+':last').after(clone);
return false;
}); // end click action
}); //end each loop
return this; // return to jQuery
};
})(jQuery)
问题是，当我克隆选择插件表单时，只有第一个有效，所有克隆的都显示第一个的下拉列表.
The problem is, that when i cloned Chosen plugin form, only the first one work and the all cloned ones shows dropdown from the firs one.
我在这里找到了一些解决方案的类似问题 --> 如何将选择的插件添加到动态创建/克隆的 CSS div?
I found similar problem with some solution here --> How to add Chosen Plugin to dynamically created / cloned CSS div?
但我不知道如何将它适合我的脚本.有人可以帮助调整它以适应我的脚本，并可以告诉我应该在哪里复制它.
But i have no idea how to fit it to my script. Can someone help adapt it to my script and can show me where should I copy it.
推荐答案
我会在清除输入区域添加一个条件来检查 .chz-select 类的选择并执行重新初始化，如您链接的答案:
I would add a condition to the clear inputs area to check for selects with the .chz-select class and perform the re-initialization as in the answer you linked:
更新
由于您使用 true 参数进行克隆，因此您需要在重新初始化之前从元素中删除数据，而且我还发现所选插件在添加 display 后没有获得元素的计算宽度的问题:inline-block; 所以我不得不在重新初始化之前使用超时来引入最小延迟
Since you're cloning using the true parameter, you need to remove the data from the element before reinitializing it, also I found an issue with the chosen plugin not getting the calculated width of the element after adding display:inline-block; so I had to use a timeout to introduce a minimal delay before the reinitialization
//Clear Inputs/Textarea
if (settings.clearInputs){
$(clone).find(':input').each(function(){
var type = $(this).attr('type');
switch(type)
{
case "button":
break;
case "reset":
break;
case "submit":
break;
case "checkbox":
$(this).attr('checked', '');
break;
default:
$(this).val("");
}
if ($(this).hasClass('chzn-select')) {
$(this).next('.chzn-container').remove();
$(this).css({display: "inline-block"}).removeClass("chzn-done");
var that = $(this);
setTimeout(function () {
that.removeData('chosen').chosen();
}, 0);
}
});
};
这篇关于如何克隆选择的插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
