另一篇：LTE Admin 模板實現sidebar菜單聯動tabs頁簽（你值得擁有）

說在前面的話：
??????? 該組件主要使用ace admin實現Tab頁聯動sidebar。實現的目標是：
??????????? 1、不改動ace admin的模板框架（Bootstrap v3.3.6）；
??????????? 2、tab頁的加載默認使用ajax，get方式，詳見(bootstrap.addtabs.js)；不用iframe；
??????????? 3、sidebar實現藍色圖標點擊選中效果；
??????????? 4、sidebar標題與tab頁的聯動，tab頁與sidebar的聯動可實現；
??????????? 5、tab標簽頁的動態滾動（左滾、右滾，左右滾動一屏）;
??????????? 6、右鍵菜單（關閉左側、右側、其他，全部關閉，刷新），全屏

一、效果展示
?

二、代碼部分

新增JS文件：bootstrap.addtabs.js，bootstrap.js（壓縮后的文件名為bootstrap.min.js）

新增CSS文件：bootstrap.addtabs.css

index.html引入對應JS、CSS文件

<!--[if lte IE 9]> <link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" /> <![endif]--> <link rel="stylesheet" href="assets/css/ace-skins.min.css" /> <link rel="stylesheet" href="assets/css/ace-rtl.min.css" /> <!-- 這里引入bootstrap.addtabs.css --> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.addtabs.css"/> <script type="text/javascript"> if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>"); </script> <!-- 這里原先引入的是壓縮后的bootstrap.min.js，修改了源碼，引入未壓縮的 --> <script src="assets/js/bootstrap.js"></script> <!-- 引入bootstrap.addtabs.js --> <script type="text/javascript" src="assets/js/bootstrap.addtabs.js" ></script>

index.html頁面結構未變，更改頁面元素的樣式，其中sidebar部分修改微小，大致如下
<ul class="submenu"> 下的
<a href="tables.html"> 改為
<a class="list-group-item" data-addtab="jqgrid" data-url="mailbox.txt">

<li class=""><a href="#" class="dropdown-toggle"><i class="menu-icon fa fa-list"></i><span class="menu-text"> Tables </span><b class="arrow fa fa-angle-down"></b></a><b class="arrow"></b><ul class="submenu"><li class=""><a class="list-group-item" data-addtab="simdyn" data-url="mailbox.txt"><i class="menu-icon fa fa-caret-right"></i>Simple &amp; Dynamic</a><b class="arrow"></b></li><li class=""><a class="list-group-item" data-addtab="jqgrid" data-url="mailbox.txt"><i class="menu-icon fa fa-caret-right"></i>jqGrid plugin</a><b class="arrow"></b></li></ul> </li>

其中a標簽還可以添加如下屬性，分別對應下面幾種情況

<a class="list-group-item" data-addtab="simdyn" data-url="mailbox.txt"> // 指定tab頁內容 data-content="Customize the content" // 使用ajax data-ajax="true" // 設置tab頁簽標題 data-title="Customize the title" // 指定在哪個tab頁內容中顯示 data-target="#tabs2"

<div class="main-content-inner"> 標簽的代碼替換成

<div class="main-content"><div class="main-content-inner content-wrapper" id="content-wrapper"><!-- nav tabs --><div class="content-tabs"><button class="roll-nav roll-left tabLeft" role="rollleft"><a href="javascript:void(0);" ><i class="glyphicon glyphicon-fast-backward"></i></a></button><nav class="page-tabs menuTabs tab-ui-menu" id="tab-menu"><ul class="page-tabs-content nav nav-tabs" style="margin-left: 0px;"><li role="presentation" id="tab_tab_home1" aria-url="example/ajax/mailbox.txt" aria-ajax="false" class="menu_tab active"><a href="#tab_home1" aria-controls="tab_home1" role="tab" data-toggle="tab">歡迎頁</a><i class="close-tab glyphicon glyphicon-remove" style="display: none;"></i></li></ul></nav><button class="roll-nav roll-right tabRight" role="roleright"><a href="javascript:void(0);"><i class="glyphicon glyphicon-fast-forward"></i></a></button><button class="roll-nav roll-right fullscreen" role = "fullscreen"><i class="glyphicon glyphicon-fullscreen"></i></button></div><!-- Tab panes --><div class="tab-content"><div class="tab-pane content active" id="tab_home1" role="tabpanel">I'm a homepage.</div></div></div> </div>

配合sidebar點擊事件即可產生效果展示中效果
?

// 給nav-list列表中有data-addtab屬性的a標簽綁定點擊事件 $(settings.monitor).on('click', '[data-addtab]', function() {// sidebar藍色圖標選中效果代碼$('.nav-list').find('.active').removeClass('active');$(this).parents("li").addClass('active').siblings('li').removeClass('active');$(this).closest("li").addClass('active').siblings().removeClass('active');_click($(this));_scrollToTab(true, (this)); });

三、滾動代碼（向左邊滾動）

_scrollTabLeft = function() {var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));var tabOuterWidth = _calSumWidth($(".content-tabs").children().not(".menuTabs"));var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;var scrollVal = 0;if($(".page-tabs-content").width() < visibleWidth) {return false;} else {var tabElement = $(".menu_tab:first");var offsetVal = 0;while((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) {offsetVal += $(tabElement).outerWidth(true);tabElement = $(tabElement).next();}offsetVal = 0;if(_calSumWidth($(tabElement).prevAll()) > visibleWidth) {while((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {offsetVal += $(tabElement).outerWidth(true);tabElement = $(tabElement).prev();}scrollVal = _calSumWidth($(tabElement).prevAll());}}$('.page-tabs-content').animate({marginLeft: 0 - scrollVal + 'px'}, "fast"); };

四、右鍵代碼（部分）

//關閉右側 $('ul.rightMenu a[data-right=remove-right]').on('click', function() {var tab_id = $(this).parent('ul').attr("aria-controls");$('#tab_' + tab_id).nextUntil().each(function() {var id = $(this).attr('id');if(id && id != 'tab_' + tab_id) {$.addtabs.close({"id": $(this).children('a').attr('aria-controls')});}});_scrollToTab(false, $('#tab_' + tab_id))// $.addtabs.drop(); });//關閉全部 $('ul.rightMenu a[data-right=remove-all]').on('click', function() {var tab_id = $(this).parent('ul').attr("aria-controls");$.addtabs.closeAll(null); });$.addtabs.closeAll = function(target) {if(typeof target == 'string') {target = $('body').find(target);} else {target = $('body').find(settings.target)}$.each(target.find('li[id]'), function() {var id = $(this).children('a').attr('aria-controls');$("#tab_" + id).remove();$("#" + id).remove();}); };

五、Ace Admin 簡介

Ace Admin官網?Dashboard - Ace Admin

Ace Admin Git??GitHub - bopoda/ace: Twitter bootstrap 3 admin template

（1）目錄結構：簡潔明了

（2）index.html入口頁面

（3）主要布局

1）Navbar導航欄
2）Sidebar側邊欄
3）Breadcrumbs面包屑（在“主要內容”中）
4）Page conten頁面內容（在“主要內容”中）
5）Settings box設置框（在“頁面內容”內）
6)? Footer?

#### 相關源碼：希望各位看官達人多多支持
（9.99元——微信打賞，一年365天）

（打賞后評論留言或者備注留言——已支持，你的郵箱地址，模板名稱，

例如：已支持，xxxx@qq.com，ace，將及時發送源碼）

總結

以上是生活随笔為你收集整理的ACE Admin 模板实现sidebar菜单联动tabs页签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。