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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.