It is worth sharing the Bootstrap Ace template for menu and Tab page effects, bootstrapace

It is worth sharing the Bootstrap Ace template for menu and Tab page effects, bootstrapace

This article describes how to use the Ace template menu style and iframe-based Tab effect in the project.

I. effect display

After a long time, I finally extracted the menu style and Tab page effects from the project.

1. Initial Loading results

2. Expand the menu (Multi-Level expansion is supported, and the code will be introduced later)

3. Click the sub-menu to open the corresponding page as a Tab

4. Support menu folding

5. Automatic line feed is displayed when the menu is opened for too many times and adaptive after folding

Ii. Sample Code
There are ready-made things that are easy to use. In general, the Bootstrap Ace template is powerful and supports various terminal devices. This article mainly uses its menu effect. The following describes the implementation code of the Ace template menu effect.

1. Menu Effect
Ace is based on Bootstrap, so we need to reference jquery and bootstrap components first. Let's take a look at the files it needs to reference.

<script src="/Scripts/jquery-1.9.1.min.js"></script>  <script src="/Content/bootstrap/js/bootstrap.min.js"></script>  <link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />  <link href="/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" />  <link href="/Content/ace/css/ace-rtl.min.css" rel="stylesheet" />  <link href="/Content/ace/css/ace-skins.min.css" rel="stylesheet" />  <link href="/Content/sidebar-menu/sidebar-menu.css" rel="stylesheet"/>  <script src="/Content/ace/js/ace-extra.min.js"></script>  <script src="/Content/ace/js/ace.min.js"></script>　 <script src="/Content/sidebar-menu/sidebar-menu.js"></script>

Well, there's still a lot to look. Except for the last js file (<script src = "/Content/sidebar-menu/sidebar-menu.js"> </script>, others are the feature components required by some components. Check the html tags on the page:

　<div class="sidebar" id="sidebar">        <ul class="nav nav-list" id="menu"></ul>        <div class="sidebar-collapse" id="sidebar-collapse">          <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>        </div>      </div>

Let's take a look at the methods encapsulated in the sidebar-menu.js file:

(function ($) {  $.fn.sidebarMenu = function (options) {    options = $.extend({}, $.fn.sidebarMenu.defaults, options || {});    var target = $(this);    target.addClass('nav');    target.addClass('nav-list');    if (options.data) {      init(target, options.data);    }    else {      if (!options.url) return;      $.getJSON(options.url, options.param, function (data) {        init(target, data);      });    }    var url = window.location.pathname;    //menu = target.find("[href='" + url + "']");    //menu.parent().addClass('active');    //menu.parent().parentsUntil('.nav-list', 'li').addClass('active').addClass('open');    function init(target, data) {      $.each(data, function (i, item) {        var li = $('<li></li>');        var a = $('<a></a>');        var icon = $('<i></i>');        //icon.addClass('glyphicon');        icon.addClass(item.icon);        var text = $('<span></span>');        text.addClass('menu-text').text(item.text);        a.append(icon);        a.append(text);        if (item.menus&&item.menus.length>0) {          a.attr('href', '#');          a.addClass('dropdown-toggle');          var arrow = $('<b></b>');          arrow.addClass('arrow').addClass('icon-angle-down');          a.append(arrow);          li.append(a);          var menus = $('<ul></ul>');          menus.addClass('submenu');          init(menus, item.menus);          li.append(menus);        }        else {          var href = 'javascript:addTabs({id:\'' + item.id + '\',title: \'' + item.text + '\',close: true,url: \'' + item.url + '\'});';          a.attr('href', href);          //if (item.istab)          //  a.attr('href', href);          //else {          //  a.attr('href', item.url);          //  a.attr('title', item.text);          //  a.attr('target', '_blank')          //}          li.append(a);        }        target.append(li);      });    }  }  $.fn.sidebarMenu.defaults = {    url: null,    param: null,    data: null  };})(jQuery);

Call the sidebar-menu method directly on the page.

$ (Function () {$ ('# menu '). sidebarMenu ({data: [{id: '1', text: 'System settings', icon: 'icon-cog', url: '', menus: [{id: '11', text: 'encoding management', icon: 'icon-glass ', url:'/CodeType/Index'}]}, {id: '2', text: 'Basic data', icon: 'icon-leaf', url: '', menus: [{id: '21', text: 'Basic feature', icon: 'icon-glass ', url:'/BasicData/BasicFeature/Index'}, {id: '22', text: 'feature management', icon: 'icon-glass ', url: '/BasicData/Features/Index'}, {id: '23', text: 'material maintenance', icon: 'icon-glass ', url: '/Model/Index'}, {id: '24', text: 'site management', icon: 'icon-glass', url: '/Station/Index'}]}, {id: '3', text: 'permission management', icon: 'icon-user', url: '', menus: [{id: '31', text: 'user management', icon: 'icon-user', url: '/SystemSetting/user'}, {id: '32 ', text: 'Role management', icon: 'icon-apple', url: '/SystemSetting/role'}, {id: '33', text: 'menu management ', icon: 'icon-list', url: '/SystemSetting/Menu'}, {id: '34', text: 'department management', icon: 'icon-glass ', url: '/SystemSetting/Department'}]}, {id: '4', text: 'order management', icon: 'icon-envelope ', url :'', menus: [{id: '41', text: 'order query', icon: 'icon-glass ', url:'/Order/query'}, {id: '42', text: 'order production', icon: 'icon-glass ', url:'/Order/plantproduct'}, {id: '43 ', text: 'order offset', icon: 'icon-glass ', url:'/Order/cancelproduct'}, {id: '44', text: 'order collect', icon: 'icon-glass ', url:'/Order/hold '}, {id: '45', text: 'order delete', icon: 'icon-glass', url: '/Order/delete'}, {id: '47', text: 'order insert', icon: 'icon-glass', url: '/Order/insertorder'}, {id: '48', text: 'order import', icon: 'icon-glass', url: '/Order/import'}]});

The important thing to note here is the small icon in front of the menu:

When con is set to icon-user, a small icon is displayed on the menu. Of course, menus must be dynamically loaded. to retrieve data from the background, you can directly call this method:

$ ('# Menu'). sidebarMenu ({url: "/api/UserApi/GetMenuByUser/", param: {strUser: 'admin '}});
That's it. It's easy.

2. Tab page Effect
The effect of the Tab page is closely related to the left menu. First, let's look at the js reference of the Tab page effect.
<Script src = "/Scripts/bootstrap-tab.js"> </script>
Html tag of the page:

<Div class = "main-content"> <div class = "page-content"> <div class = "row"> <div class = "col-xs-12" style = "padding- left: 5px; "> <ul class =" nav-tabs "role =" tablist "> <li class =" active "> <a href =" # Index "role =" tab "data -toggle = "tab"> homepage </a> </li> </ul> <div class = "tab-content"> <div role = "tabpanel" class =" tab-pane active "id =" Index "> </div>

Bootstrap-tab.js this file encapsulates the addTabs Method

Var addTabs = function (options) {// var rand = Math. random (). toString (); // var id = rand. substring (rand. indexOf ('. ') + 1); var url = window. location. protocol + '//' + window. location. host; options. url = url + options. url; id = "tab _" + options. id; $ (". active "). removeClass ("active"); // if the TAB does not exist, create a new TAB if (! $ ("#" + Id) [0]) {// fixed the IFRAME height mainHeight In the TAB = $ (document. body ). height ()-90; // create a new TAB title = '<li role = "presentation" id = "tab _' + id + '"> <a href = "#' + id +' "aria-controls =" '+ id +' "role =" tab "data-toggle =" tab "> '+ options. title; // whether to allow if (options. close) {title + = '<I class = "glyphicon-remove" tabclose = "' + id + '"> </I> ';} title + = '</a> </li>'; // whether to specify the TAB content if (options. content) {content = '<div role = "tabpanel" class = "tab-pane" id = "' + id + '">' + options. content + '</div>';} else {// NO content, use IFRAME to open the link content = '<div role = "tabpanel" class = "tab-pane" id = "' + id + '"> <iframe src = "' + options. url + '"width =" 100% "height ="' + mainHeight + '"frameborder =" no "border =" 0 "marginwidth =" 0 "marginheight =" 0 "scrolling = "yes" allowtransparency = "yes"> </iframe> </div> ';} // Add TABS $ (". nav-tabs "). append (title); $ (". tab-content "). append (content) ;}// activate TAB $ ("# tab _" + id ). addClass ('active'); $ ("#" + id ). addClass ("active") ;}; var closeTab = function (id) {// if the active TAB is disabled, activate his previous TAB if ($ ("li. active "). attr ('id') = "tab _" + id) {$ ("# tab _" + id ). prev (). addClass ('active'); $ ("#" + id ). prev (). addClass ('active');} // close TAB $ ("# tab _" + id ). remove (); $ ("#" + id ). remove () ;}; $ (function () {mainHeight = $ (document. body ). height ()-45; $ ('. main-left ,. main-right '). height (mainHeight); $ ("[addtabs]"). click (function () {addTabs ({id: $ (this ). attr ("id"), title: $ (this ). attr ('title'), close: true}) ;}); $ (". nav-tabs "). on ("click", "[tabclose]", function (e) {id = $ (this ). attr ("tabclose"); closeTab (id );});});

So when will the Addtabs method be called? The answer is that this part of the code is available when the sidebar-menu component is encapsulated when the menu click event is registered. You can check the above Code.

The above shows the menu and Tab page effects of the bootstrap ace template. In general, the basic functions are available, but the menu style remains to be adjusted. For example, after clicking a menu, the menu you click must be selected. If your project uses the bootstrap style, study the ace template and try it out.

Articles you may be interested in:

• Bootstrap table server-side paging example sharing
• Learning the Bootstrap component drop-down menu
• Bootstrap daily required drop-down menu
• Detailed description of Bootstrap flat-based background framework Ace