显示或使可见活动标签 [英] show or make visible active tab
问题描述
我有bootstrap标签的工作代码。在那里我可以添加和删除选项卡。当选项卡溢出时,还会显示向下箭头。因此用户可以单击箭头以查看有多少个选项卡可用。
问题:
I have working code of bootstrap tabs. where I can add and delete the tabs. Also shows the arrow down when tabs are overflowed. so user can click on arrow to see how many tabs are available. Problems:
- 当我从下拉菜单中点击标签时,向左滚动。使用户可以在顶部查看活动标签。
- 添加和删除按钮可以工作。但当选项卡溢出时,它显示新的加号图标添加新的添加。那么我不能删除。 (可能b问题与DOM准备好。)试图做点击文档。但是没有工作。
- 当我尝试从下拉菜单中删除标签时,它不会删除。
谢谢...
Example Jsfiddle
chkPlusIcon();
function chkPlusIcon() {
setTimeout(function () {
var pageWidth = $(".pull-left-db-nav-tabs").width();
var lastElementLi = $(".db-nav-tabs");
var elementWidth = $(lastElementLi).width();
var elementLeft = $(lastElementLi).position().left;
$('.pull-right-db-nav-tabs-ul').empty();
if (pageWidth - (elementWidth + elementLeft) < 0) {
console.log("overflow!");
$('.pull-right-db-nav-tabs').css('display', 'block');
if ($('.pull-right-db-nav-tabs-ul li') >= 1) {} else {
$('.db-nav-tabs > li').clone().appendTo('.pull-right-db-nav-tabs-ul');
} /* $('.add-tab-last').css('display','none');*/
} else {
console.log("doesn't overflow");
$('.pull-right-db-nav-tabs').css('display', 'none');
$('.pull-right-db-nav-tabs-ul').empty();
}
}, 500);
}
$(window).resize(function () {
chkPlusIcon();
});
// add New tabs
var tabCount = 9;
//$('.db-add-new-tab').click(function (e) {
$(document).on('click', '.db-add-new-tab', function (e) {
console.log('add tab button clicked');
chkPlusIcon();
tabCount++;
var nextTab = tabCount;
var addTabLast = $('.db-nav-tabs li.add-tab-last');
var addTabLastDropDown = $('.pull-right-db-nav-tabs-u li.add-tab-last');
// create the tab
$('<li class=""><a href="#tab' + nextTab + '" data-toggle="tab">tab ' + nextTab + '<i class="glyphicon glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both " ></i><i class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both" > </i> </a> </li> ').insertBefore(addTabLast);
$('<li class=""><a href="#tab' + nextTab + '" data-toggle="tab">tab ' + nextTab + '<i class="glyphicon glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both " ></i><i class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both" > </i> </a> </li> ').insertBefore(addTabLastDropDown);
// create the tab content
$('<div class="tab-pane fade in" id="tab' + nextTab + '">tab' + nextTab + ' content</div>').appendTo('.tab-content');
// make the new tab active
$('#tabs').find('.glyphicon-trash').click(removeTab);
$('#tabs a:last').tab('show');
});
// remove tab
var removeTab = function () {
chkPlusIcon();
var contentId = $(this).closest('li').find('a').attr('href');
contentId = contentId.replace('#', '');
$('#' + contentId).remove();
$(this).closest('li').remove();
//$('.pull-right-db-nav-tabs-ul').find('#' + contentId).remove();
//$('#tabs a:first').tab('show');
$('#tabs a:first').tab('show');
};
$('.db-del-tab').click(removeTab);
推荐答案
我发现的问题
1.你没有给粉红色div溢出,你怎么能滚动它。我不认为这是可能的。
2.无法重现此问题。
3.当我点击粉红色栏中的垃圾桶,我得到信息中心-content
作为 contentId 和i当点击下拉,我得到 overview-content
。两者都不一样,所以在下拉列表中删除不工作。
1.You didn't give overflow to the pink div , how can you scroll it . i don't think it is possible.
2.Unable to reproduce this issue.
3.when i click on trash in pink bar i got dashboard-content
as contentId and i when clicked in drop down i got overview-content
. both are not same so delete in dropdown is not working.
第三个问题的可能修复是 overview-content
与 dashboard-content
,它看起来像函数removeTab有不正确的逻辑。
Possible Fix for 3rd issue is replace overview-content
with dashboard-content
and it looks like function removeTab has incorrect logic.
这篇关于显示或使可见活动标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!