Worth sharing bootstrap Ace Templates implement menu and tab effects _javascript tips

This article shares a menu style and an iframe-based tab effect in your project that uses ACE templates.

One, the effect shows

Toss for a long time, and finally the menu style and the tab page effect from the project out.

1, the initial load out of the effect

2, expand the menu (Support multi-level expansion, the following code introduction)

3, click the submenu, the form of a tab page to open the corresponding page

4. Support Menu Folding

5, open the menu too much when the automatic line-wrapping display, folding after the adaptive

Second, the code example
There are ready-made things used very convenient, overall bootstrap Ace template function is still relatively strong, and support a variety of terminal equipment. This article mainly uses the effect of its menu, below to see the Ace Template menu effect implementation code.

1. Menu effect
Since Aces are based on Bootstrap, you first need to refer to the jquery and bootstrap components to see what files they need to reference first.

<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>

Oh, look at it is quite a lot of it. In addition to the last JS file (<script src= "/content/sidebar-menu/sidebar-menu.js" ></script>) is the blogger's own encapsulation, the other basic components are the required feature components. See what HTML tags are 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" Icon-double-angle-left "data-icon2=" Icon-double-angle-right "></i>
    </div>
   </div>

Let's look at the sidebar-menu.js in this 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);
  });
  The 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);

method to invoke Sidebar-menu directly above the page

$ (function () {$ (' #menu '). Sidebarmenu {data: [{ID: ' 1 ', Text: ' System settings ', Icon: ' icon-cog ', url
    : ', menus: [{ID: ' One ', Text: ' Code management ', icon: ' Icon-glass ', url: '/codetype/index '}] }, {id: ' 2 ', text: ' Base data ', Icon: ' icon-leaf ', url: ', menus: [{ID: '], Text: '
      Basic Features ', Icon: ' Icon-glass ', url: '/basicdata/basicfeature/index '}, {id: ', ', Text: ' Feature Management ',  Icon: ' icon-glass ', url: '/basicdata/features/index '}, {id: ' A ', text: ' Material maintenance ', Icon: ' Icon-glass ', url: '/model/index '}, {id: ' On ', Text: ' Site Management ', Icon: ' Icon-glass ', url
      : '/station/index '}]}, {ID: ' 3 ', Text: ' Rights Management ', icon: ' Icon-user ', url: ', menus: [{
      ID: ' To ', Text: ' User admin ', Icon: ' Icon-user ', url: '/systemsetting/user '}, {id: ' 32 ',
      Text: ' Role management ',Icon: ' icon-apple ', url: '/systemsetting/role '}, {id: ' A ', Text: ' Menu Management ', icon: ' Icon-list ' , url: '/systemsetting/menu '}, {id: '% ', Text: ' Department management ', icon: ' Icon-glass ', url: '/sy Stemsetting/department '}]}, {ID: ' 4 ', Text: ' Order Management ', Icon: ' Icon-envelope ', url: ', m 
      Enus: [{id: ' ' 42 ', Text: ' Order Inquiry ', Icon: ' Icon-glass ', url: '/order/query '}, {id: ' ", Text: ' Order scheduling ', Icon: ' Icon-glass ', url: '/order/plantproduct '}, {id: ' ", Text: ' Order withdrawal Platoon ', Icon: ' Icon-glass ', url: '/order/cancelproduct '}, {id: ' The ', Text: ' Order hold ', icon : ' Icon-glass ', url: '/order/hold '}, {ID: ' $ ', Text: ' Order delete ', Icon: ' Icon-glass ', url
     : '/order/delete '}, {ID: ' $ ', Text: ' Order card ', Icon: ' Icon-glass ', url: '/order/insertorder ' }, {id: ' 48 ', Text: ' Order import ', Icon: ' Icon-glass ', url: '/order/import '}]};
 });

A very important point to note here is the small icon on the front of the menu:

When con's value is Icon-user, the menu displays a small icon like a picture. Of course, in general, the menu must be dynamically loaded, if you need to fetch data from the background, you can call this method directly:

$ (' #menu '). Sidebarmenu ({url: "/api/userapi/getmenubyuser/", param: {struser: ' admin '}});
can, oh, very simple.

2, tab page effect
The effect of the tab page is really closely related to the left menu, first or look at the tab effect of the JS reference.
<script src= "/scripts/bootstrap-tab.js" ></script>
HTML tags for pages:

 <div class= "main-content" ><div class= "page-content" >
     <div class= "Row" >
      <div class= " Col-xs-12 "style=" padding-left:5px; " >
       <ul class= "nav nav-tabs" role= "Tablist" >
        <li class= "active" ><a href= "#Index" role= "tab" data-toggle= "tab" > Home </a></li>
       </ul>
       <div class= "tab-content" >
        <div Role= "TabPanel" class= "Tab-pane Active" id= "Index" >
        </div>
       </div>
      </div>
     </div>
    </div>
   </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 tab does not exist, create a new tab if (!$ ("#" + ID) [0]) {//Fixed tab in the iframe height mainheight = $ (document.body). Height ()-90;  Create new tab Title title = ' <li role= ' presentation ' id= ' tab_ ' + ID + ' ><a href= ' # ' + ID + ' aria-controls= ' + ID
  + ' role= ' tab ' data-toggle= ' tab ' > ' + options.title; Allow to close if (options.close) {title = ' <i class= ' Glyphicon glyphicon-remove ' tabclose= ' + ID + ' "></i>
  ';
  title = = ' </a></li> '; Whether to specify tab content if (options.content) {content = ' <div role= ' tabpanel ' class= ' tab-pane ' id= ' ' + ID + ' ' > ' + options
  . Content + ' </div> '; else {//no content, use IFRAME to open link content = ' <div role= ' tabpanel ' class= ' tab-pane ' id= ' + ID + ' "><iframe src=" ' + Options.url + ' "width=" 100% "height=" ' + mainheight + ' "frameborder=" no "border=" 0 "Marg
  Inwidth= "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 current active tab is turned off, 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 do you call the Addtabs method? The answer is the Registration menu click event, this part of the code in front of the Sidebar-menu component packaging, you can see above.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the Bootstrap Ace template menu and tab effect Display, in general, the basic function has, but the menu style has yet to be adjusted, such as clicking on a menu, click on the menu to give a selected status. If your project is also using the bootstrap style, study the ace template, you can use it to try.