BootstrapとJQueryに基づいて、tabページを動的に開いたり閉じたりする例示的なコードを実現します。
1. テスト環境
JQuery-3.2.1.min.j
Bootstrap-33.7-dist
win 7
1.2. 実践
HTMLコードのセグメント
以上述べたように、BootstrapとJQueryに基づいて動的にtabページを開けたり閉じたりする実例コードを紹介しました。皆さんに助けてほしいです。もし何か質問があれば、メッセージをください。編集者はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。
JQuery-3.2.1.min.j
Bootstrap-33.7-dist
win 7
1.2. 実践
HTMLコードのセグメント
<div class="container-fluid">
<div class="row">
<!-- -->
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="pannel-group" id="accordion">
<div id="left-nav" class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" class="nav-header collapsed" data-parent="#accordion" href="#tag20"><iclass="glyphiconglyphicon-cog"></i> <span class="pull-right glyphiconglyphicon-chevron-toggle"></span></a></h4>
</div>
<div id="tag20" class="panel-collapse collapse in">
<div class="panel-body">
<ulclass="navnav-list">
<li class="active"><a href="#" onclick="addTab({'menuID':'21', 'father':'navtab', 'tabName':' 1', 'tabContentID':'tabContent', 'tabUrl':'/testulr'})"><iclass="glyphiconglyphicon-cog"></i> 1</a></li>
<li class="active"><a href="#" onclick="addTab({'menuID':'22', 'father':'navtab', 'tabName':' 2', 'tabContentID':'tabContent', 'tabUrl':''})"><iclass="glyphiconglyphicon-cog"></i> 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- tab -->
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
<ulid="navtab" class="navnav-tabs">
<!-- js tab-->
</ul>
<!-- tab -->
<div id="tabContent" class="tab-content">
<!-- js tab -->
</div>
</div>
</div>
</div>
</body>
</html>
JSコードセグメント
/**
* tab
* @param options:
* menuIDtab id, tab id
* tabName tab
* tabUrl tab“ ” url
* tabContentID tab (div )
*
* @returns {boolean}
*/
function addTab(options) {
setBreadcrumb(options.level1, options.level2, options.tabName);
//tabUrl: tab URL
varisExists= isTabExists(options.menuID);
if(isExists){ // tab , 、
$("#tab-a-" + options.menuID).click(); // , a
} else {
// tab
// '<i class="glyphiconglyphicon-remove"></i></a>'
$("#" + tabFatherElementID).append(
'<li role="presentation" id="tab-li-' + options.menuID + '">' +
' <a href="#tab-content-' +options.menuID + '" data-toggle="tab" role="tab" id="tab-a-' + options.menuID + '">'+ options.tabName + '<button class="close closeTab" type="button" onclick="closeTab(this,' + "'" + options.level1 + "','" + options.level2 + "','" + options.tabName + "'" +');">×</button>' + '</a>' +
'</li>');
// tab
var content = '<iframe name="tabIframe" src="' + options.tabUrl + '" width="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes" onload="changeFrameHeight()"></iframe>';
$("#" + options.tabContentID).append('<div id="tab-content-' + options.menuID + '" role="tabpanel" class="tab-pane">' + content + '</div>');
$("#tab-a-" + options.menuID).click(); // tab
currentIframID= 'iframe' + options.menuID;
}
}
/***
* tab
* @paramtabName tab
* @returns {boolean}
*/
function isTabExists(menuID){
var tab = $('#tab-li-' + menuID + ' > #tab-a-' + menuID);
return tab.length>0;
}
/**
* tab
* @param button
*/
function closeTab(button) {
// x , li id
var li_id= $(button).parent().parent().attr('id');
var id = li_id.replace('tab-li-', '');
var li_active= $("#"+ tabFatherElementID+ " >li.active");
if (li_active.attr('id') == li_id) { // TAB
if (li_active.prev()[0]) { // tab tab , (
li_active.prev().find("a").click();
} else if (li_active.next()[0]) { // tab tab , tab , tab
li_active.next().find("a").click();
}
}
// TAB
$("#" + li_id).remove();
$("#tab-content-" + id).remove(); //
}
/**
* tab iframe
*/
function changeFrameHeight(){
var iframes = document.getElementsByName('tabIframe');
var contentContainer= $('#' + tabContentID); // tab div //
var offsetTop= 0;
if(contentContainer.offset()) {
offsetTop= contentContainer.offset().top; // document
}
$.each(iframes, function(index, iframe){
var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
iframe.height= h - offsetTop;// offsetTop
});
}
/**
* , iframe
* , resize , changeFrameHeight(),*
*/
$(function(){
var resizeTimer= null;
window.onresize=function(){
if(resizeTimer) {
clearTimeout(resizeTimer); //
}
resizeTimer= setTimeout('changeFrameHeight()', 500); // // 500 changeFrameHeight
}
});
締め括りをつける以上述べたように、BootstrapとJQueryに基づいて動的にtabページを開けたり閉じたりする実例コードを紹介しました。皆さんに助けてほしいです。もし何か質問があれば、メッセージをください。編集者はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。