說在前面的話：
該元件主要使用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檔案
index.html頁面結構未變，更改頁面元素的樣式，其中sidebar部分修改微小，大緻如下
- 下的
改為
1
2 3 4 Tables 5 6
7 8 9
10 11
- 12
- 13 14 15 Simple &Dynamic 16 17 18 19 20 21
- 22 23 24 jqGrid plugin 25 26 27 28 29
30
其中a标簽還可以添加如下屬性，分别對應下面幾種情況
// 指定tab頁内容
data-content="Customize the content"
// 使用ajax
data-ajax="true"
// 設定tab頁簽标題
data-title="Customize the title"
// 指定在哪個tab頁内容中顯示
data-target="#tabs2"
标簽的代碼替換成
1
2 3 4 5 6 7 8 9 10 11
- 12
- 13 歡迎頁 14 15 16
17 18 19 20 21 22 23 24 25 26 27 28 29 30 I'm a homepage. 31 32 33 34
配合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) { 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 簡介
(1)目錄結構：簡潔明了
(2)index.html入口頁面
(3)主要布局
1)Navbar導航欄
2)Sidebar側邊欄
3)Breadcrumbs面包屑(在“主要内容”中)
4)Page conten頁面内容(在“主要内容”中)
5)Settings box設定框(在“頁面内容”内)
6) Footer
六、相關源碼：希望各位看官達人多多支援
(9.99元—微信打賞，一年365天)
(打賞後留言，例如："已支援，[email protected]，ace-admin"，将及時發送源碼)
來源：oschina
連結：https://my.oschina.net/u/4314826/blog/4455639