jQuery、Bootstrap 单击以删除选项卡
jQuery, Bootstrap click to remove tab
我构建了一些允许用户添加和删除选项卡的功能。 'add' 功能按我想要的方式工作,只有 5 个选项卡可见,其余选项卡将显示在下拉列表中。 见jsfiddle
我在添加 'remove' 功能时遇到了一些问题。正在正确删除选项卡,但现在出现问题:
如果我添加了 6 个以上的选项卡(例如 12 个)并单击按钮删除当前选定的选项卡(有效),则设置“.active”class在第一个下拉元素上使其不可点击?我尝试了以下方法:
$('.dropdown ul #tab6').parent().removeClass('active');
- 我也不确定如何在删除标签时更新标签上的数字。例如,我有 Device [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] 并且我删除了 Device/tab 9 如何让选项卡仍然按顺序读取( [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] 而不是 [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12])?
- 如果第 2 点是处理此问题的正确方法,有什么意见吗?
我真的被困在这个问题上,所以任何帮助都会非常感激。
编辑:
我意识到选项卡的 ID 并不重要,只要它们是唯一的即可。我更新了 fiddle,它添加了一个简单的 .each() 来更新选项卡选择中的文本。
当我从下拉列表中删除一个选项卡时,我仍然遇到第一个下拉列表被选中的问题,有人可以帮忙吗?
对于您的第一个问题:您需要将 data-toggle="tab"
添加到您的第一个选项卡以使其可点击。
要在删除某些选项卡时更新选项卡,您可以在单击删除选项卡按钮时使用每个选项卡:
// Set a controller to see when 'each' comes to the dropdown menu
var dropdown = false;
// For each #tabs li a...
$('#tabs li a').each(function(index){
// Test if the 'a' has a dropdown-toggle class
if($(this).hasClass('dropdown-toggle')) {
// It's in the dropdown, set the controller to true
dropdown = true;
return true;
} else {
// If the 'a' has not a dropdown-toggle class, just update
// with index+1 (because index starts with 0)
// Also check if the dropdown is false
if(!dropdown) {
$(this).attr('href','#tab'+(index + 1)).html('Device ' + (index+1));
} else {
// If dropdown is true, we just have to plus 'index'
// because if not, dropdown menu will start with tab 7
// instead of 6
$(this).attr('href','#tab'+(index)).html('Tab ' + (index));
}
}
});
// Don't forget to update your 'nextTab' var
nextTab = 0;
$('#tabs li a').each(function(index) {
nextTab = nextTab + 1;
});
// Update the tab-pane too.
$('.tab-content .tab-pane').each(function(index){
$(this).attr('id','tab' + (index+1)).html('This is device number ' + (index+1) + '<div><a href="#" class="btn btn-primary btn-remove" id="btnRmv">Remove device</a></div>');
});
我也更新了删除按钮部分:
// REMOVE TAB TAB
if (nextTab < 6) {
$('.nav-tabs li.active').remove();
} else if(nextTab > 6) {
$('.nav-tabs li.active .dropdown-menu li.active').remove();
// Check if there's tabs inside the dropdown, if not,
// remove the dropdown.
if(!$(".dropdown-menu").find("li").length) {
$('.dropdown').remove();
}
}
这是分叉的jsFiddle。
另一种方式。它应该是你要找的。
HTML(稍作修改)
<script id="tabTemp" type="text/x-jquery-tmpl">
<div class='tab-pane' id='tab${device}'>
This is device number <span class="dev-nr"></span>
<p>Random string (to see tabs difference): <b>${randomStr}</b></p>
<div>
<a href="#" class="btn btn-danger btn-remove btnRmv">Remove device</a>
</div>
</div>
</script>
<script id="navTemp" type="text/x-jquery-tmpl">
<li class="li-tab-toggle">
<a href="#tab${device}" class="tab-toggle" data-toggle="tab">
Device <span class="dev-nr"></span>
</a>
</li>
</script>
<script id="dropTemp" type="text/x-jquery-tmpl">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
More Devices <b class="caret"></b>
</a>
<ul class="dropdown-menu" id="drop"></ul>
</li>
</script>
<a href="#" class="btn btn-primary" id="btnAdd">Add device</a>
<ul class="nav nav-tabs" id="tabs">
<li class="li-tab-toggle active"><a class="tab-toggle" href="#tab1" data-toggle="tab">Device 1</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">Device 1 content</div>
</div>
脚本:
var maxTabs = 4, index = 1;
$('#btnAdd').click(function(e){
e.preventDefault();
index++;
$('.tab-toggle').length !== maxTabs ||
$('#tabs').append($.tmpl(dropTemp))
.find('#drop').append($('.li-tab-toggle:last').removeClass('active'));
$.tmpl(navTemp, {"device" : index}).insertAfter('.li-tab-toggle:last');
$.tmpl(tabTemp, {"device" : index}).appendTo('.tab-content');
$('.li-tab-toggle:last a').tab('show');
updateTabs();
});
$(document).on('click', '.btnRmv', function(e){
var tabs = $('.li-tab-toggle').length,
nav = $('.li-tab-toggle.active');
nav.parent('#tabs').find('#drop li:first').insertBefore('#tabs .dropdown');
tabs !== maxTabs+1 || $('#drop li').insertBefore('#tabs .dropdown').siblings('.dropdown').remove();
$('a', nav.is('li:last') ? nav.prev() : nav.next()).tab('show');
nav.add($('a', nav).attr('href')).remove();
updateTabs();
});
function updateTabs(){
for(var i=0; i < $('.tab-toggle').length; i++){
$('.tab-toggle:eq('+i+') .dev-nr, .tab-pane:eq('+i+') .dev-nr').text(i+1);
}
}
还有一点 beautified version
我构建了一些允许用户添加和删除选项卡的功能。 'add' 功能按我想要的方式工作,只有 5 个选项卡可见,其余选项卡将显示在下拉列表中。 见jsfiddle
我在添加 'remove' 功能时遇到了一些问题。正在正确删除选项卡,但现在出现问题:
如果我添加了 6 个以上的选项卡(例如 12 个)并单击按钮删除当前选定的选项卡(有效),则设置“.active”class在第一个下拉元素上使其不可点击?我尝试了以下方法:
$('.dropdown ul #tab6').parent().removeClass('active');
- 我也不确定如何在删除标签时更新标签上的数字。例如,我有 Device [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] 并且我删除了 Device/tab 9 如何让选项卡仍然按顺序读取( [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] 而不是 [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12])?
- 如果第 2 点是处理此问题的正确方法,有什么意见吗?
我真的被困在这个问题上,所以任何帮助都会非常感激。
编辑:
我意识到选项卡的 ID 并不重要,只要它们是唯一的即可。我更新了 fiddle,它添加了一个简单的 .each() 来更新选项卡选择中的文本。
当我从下拉列表中删除一个选项卡时,我仍然遇到第一个下拉列表被选中的问题,有人可以帮忙吗?
对于您的第一个问题:您需要将 data-toggle="tab"
添加到您的第一个选项卡以使其可点击。
要在删除某些选项卡时更新选项卡,您可以在单击删除选项卡按钮时使用每个选项卡:
// Set a controller to see when 'each' comes to the dropdown menu
var dropdown = false;
// For each #tabs li a...
$('#tabs li a').each(function(index){
// Test if the 'a' has a dropdown-toggle class
if($(this).hasClass('dropdown-toggle')) {
// It's in the dropdown, set the controller to true
dropdown = true;
return true;
} else {
// If the 'a' has not a dropdown-toggle class, just update
// with index+1 (because index starts with 0)
// Also check if the dropdown is false
if(!dropdown) {
$(this).attr('href','#tab'+(index + 1)).html('Device ' + (index+1));
} else {
// If dropdown is true, we just have to plus 'index'
// because if not, dropdown menu will start with tab 7
// instead of 6
$(this).attr('href','#tab'+(index)).html('Tab ' + (index));
}
}
});
// Don't forget to update your 'nextTab' var
nextTab = 0;
$('#tabs li a').each(function(index) {
nextTab = nextTab + 1;
});
// Update the tab-pane too.
$('.tab-content .tab-pane').each(function(index){
$(this).attr('id','tab' + (index+1)).html('This is device number ' + (index+1) + '<div><a href="#" class="btn btn-primary btn-remove" id="btnRmv">Remove device</a></div>');
});
我也更新了删除按钮部分:
// REMOVE TAB TAB
if (nextTab < 6) {
$('.nav-tabs li.active').remove();
} else if(nextTab > 6) {
$('.nav-tabs li.active .dropdown-menu li.active').remove();
// Check if there's tabs inside the dropdown, if not,
// remove the dropdown.
if(!$(".dropdown-menu").find("li").length) {
$('.dropdown').remove();
}
}
这是分叉的jsFiddle。
另一种方式。它应该是你要找的。
HTML(稍作修改)
<script id="tabTemp" type="text/x-jquery-tmpl">
<div class='tab-pane' id='tab${device}'>
This is device number <span class="dev-nr"></span>
<p>Random string (to see tabs difference): <b>${randomStr}</b></p>
<div>
<a href="#" class="btn btn-danger btn-remove btnRmv">Remove device</a>
</div>
</div>
</script>
<script id="navTemp" type="text/x-jquery-tmpl">
<li class="li-tab-toggle">
<a href="#tab${device}" class="tab-toggle" data-toggle="tab">
Device <span class="dev-nr"></span>
</a>
</li>
</script>
<script id="dropTemp" type="text/x-jquery-tmpl">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
More Devices <b class="caret"></b>
</a>
<ul class="dropdown-menu" id="drop"></ul>
</li>
</script>
<a href="#" class="btn btn-primary" id="btnAdd">Add device</a>
<ul class="nav nav-tabs" id="tabs">
<li class="li-tab-toggle active"><a class="tab-toggle" href="#tab1" data-toggle="tab">Device 1</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">Device 1 content</div>
</div>
脚本:
var maxTabs = 4, index = 1;
$('#btnAdd').click(function(e){
e.preventDefault();
index++;
$('.tab-toggle').length !== maxTabs ||
$('#tabs').append($.tmpl(dropTemp))
.find('#drop').append($('.li-tab-toggle:last').removeClass('active'));
$.tmpl(navTemp, {"device" : index}).insertAfter('.li-tab-toggle:last');
$.tmpl(tabTemp, {"device" : index}).appendTo('.tab-content');
$('.li-tab-toggle:last a').tab('show');
updateTabs();
});
$(document).on('click', '.btnRmv', function(e){
var tabs = $('.li-tab-toggle').length,
nav = $('.li-tab-toggle.active');
nav.parent('#tabs').find('#drop li:first').insertBefore('#tabs .dropdown');
tabs !== maxTabs+1 || $('#drop li').insertBefore('#tabs .dropdown').siblings('.dropdown').remove();
$('a', nav.is('li:last') ? nav.prev() : nav.next()).tab('show');
nav.add($('a', nav).attr('href')).remove();
updateTabs();
});
function updateTabs(){
for(var i=0; i < $('.tab-toggle').length; i++){
$('.tab-toggle:eq('+i+') .dev-nr, .tab-pane:eq('+i+') .dev-nr').text(i+1);
}
}
还有一点 beautified version