[英]How to dynamically clone a tab with Jquery
Hello I am working on a web application and I have come stuck on a cloning issue. 您好,我正在开发Web应用程序,但遇到了克隆问题。 Basically any time a user selects a checkbox a tab appears.
基本上,只要用户选择复选框,就会出现一个选项卡。 The user can then add details into a table that is on this tab via a dropdown box, search box and an add button.
然后,用户可以通过下拉框,搜索框和添加按钮将详细信息添加到此选项卡上的表中。
When the user selects a different checkbox a new tab with a blank table appears next to the previous on. 当用户选择其他复选框时,前一个选项旁边会出现一个带有空白表的新选项卡。 I want the user to be able to have the option of copying from the previous selected tab or starting blank.
我希望用户能够选择从先前选择的选项卡复制还是开始空白。
Starting blank seems simple I added a link that is shown in the tab, once clicked the link is simply hidden and the tab reminds with the blank table. 开始空白似乎很简单,我添加了一个显示在选项卡中的链接,单击该链接后,该链接将被简单隐藏,并且该选项卡会提醒您空白表格。
$(document).ready(function(){
$("#tabs").tabs();
$(".selectedCodeCheckbox").change(function(){
if ($(this).is(':checked')) {
// show tab
$("#tabs").find(".tabheader-"+$(this).val()).css('display', 'block');
$("#tabs").find(".tabpanel-"+$(this).val()).css('display', 'block');
$("#tabs").tabs( "select" , $("#tabs").find(".tabpanel-"+$(this).val()).attr('id'));
$(".step2").css('display', 'block');
} else {
// remove tab
$("#tabs").find(".tabheader-"+$(this).val()).css('display', 'none');
$("#tabs").find(".tabpanel-"+$(this).val()).css('display', 'none');
}
});
This displays the tab after a checkbox is selected. 选中复选框后,将显示该选项卡。
<div style="width: 600px; float: left; margin-left: 30px; margin-top: 10px;">
<table id="clubListTable_${instanceEntry.key}" class="reports" style="width: 100%;">
<thead>
<tr>
<th>Unit Type</th>
<th>Unit Name</th>
<th><spring:message code="generic.male" text="Male" /></th>
<th><spring:message code="generic.female" text="Female" /></th>
<th>
<spring:message code="generic.remove" text="Remove" />
</th>
</tr>
</thead>
<tbody>
<tr class="emptyRow">
<td colspan="5">No Units Added</td>
</tr>
</tbody>
</table>
</div>
This is the table in the tab that I wish to clone. 这是我希望克隆的选项卡中的表。 Each tab is created dynamically from the same
<div id="tabs"
. 每个选项卡都是从相同的
<div id="tabs"
动态创建的。
The order in which the tabs is placed is in alphabetical order. 选项卡的放置顺序是字母顺序。 There can only ever be 1-6 tabs as there is only 6 checkboxes.
由于只有6个复选框,因此只能有1-6个标签。
Also if possible could somebody also explain how I would be able to not give the user any options if it is the very first checkbox selected. 另外,如果可能的话,也有人可以解释一下,如果这是第一个选中的复选框,那么我将如何不给用户任何选择。 Also just on a side not a user can select multiple checkboxes to produce multiple tabs.
而且,就一面而言,用户不能选择多个复选框来产生多个选项卡。
here i made the sample: http://jsbin.com/welcome/50444/ perhaps an example will help you 在这里,我制作了示例: http : //jsbin.com/welcome/50444/也许有一个示例可以帮助您
<div id="tabs" style="height:300px;">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li id="tab3"><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">content 1</div>
<div id="tabs-2">content 2</div>
<div id="tabs-3">content 3</div>
</div>
<script>
$(function() {
$("#tabs").tabs();
});
function cloneLast(){
var lastDiv = $('#tabs div:last-child');
var lastLi = $('#tabs').find('li').last().find('a');
$("#tabs").tabs('add','#newTab',lastLi.html());
$('#newTab').html(lastDiv.html());
}
</script>
<a href="#" onclick="if($('#tab3').is(':visible')) $('#tab3').hide(); else $('#tab3').show();">toggle visibility</a>
<a href="#" onclick="cloneLast()">clone last</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.