Ace模板地址：（有时会打不开）

Ace英文官网：

Ace模板功能介绍地址：

 

1、菜单效果

由于Ace是基于Bootstrap的，所以首先需要引用jquery和bootstrap组件，先来总的看看它需要引用哪些文件吧

除了最后一个js文件（<script src="/Content/sidebar-menu/sidebar-menu.js"></script>）是博主自己封装的，其他基本都是些组件需要的特性组件。看看页面上面要放哪些html标签：

再来看看sidebar-menu.js这个文件里面封装的方法：

(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 = $('
');        var a = $('');        var icon = $('');        //icon.addClass('glyphicon');        icon.addClass(item.icon);        var text = $('');        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 = $('');          arrow.addClass('arrow').addClass('icon-angle-down');          a.append(arrow);          li.append(a);          var menus = $('
     
');          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);

在页面上面直接调用sidebar-menu的方法

$(function () {      $('#menu').sidebarMenu({        data: [{          id: '1',          text: '系统设置',          icon: 'icon-cog',          url: '',          menus: [{            id: '11',            text: '编码管理',            icon: 'icon-glass',            url: '/CodeType/Index'          }]        }, {          id: '2',          text: '基础数据',          icon: 'icon-leaf',          url: '',          menus: [{            id: '21',            text: '基础特征',            icon: 'icon-glass',            url: '/BasicData/BasicFeature/Index'          }, {            id: '22',            text: '特征管理',            icon: 'icon-glass',            url: '/BasicData/Features/Index'          }, {            id: '23',            text: '物料维护',            icon: 'icon-glass',            url: '/Model/Index'          }, {            id: '24',            text: '站点管理',            icon: 'icon-glass',            url: '/Station/Index'          }]        }, {          id: '3',          text: '权限管理',          icon: 'icon-user',          url: '',          menus: [{            id: '31',            text: '用户管理',            icon: 'icon-user',            url: '/SystemSetting/User'          }, {            id: '32',            text: '角色管理',            icon: 'icon-apple',            url: '/SystemSetting/Role'          }, {            id: '33',            text: '菜单管理',            icon: 'icon-list',            url: '/SystemSetting/Menu'          }, {            id: '34',            text: '部门管理',            icon: 'icon-glass',            url: '/SystemSetting/Department'          }]        }, {          id: '4',          text: '订单管理',          icon: 'icon-envelope',          url: '',          menus: [{            id: '41',            text: '订单查询',            icon: 'icon-glass',            url: '/Order/Query'          }, {            id: '42',            text: '订单排产',            icon: 'icon-glass',            url: '/Order/PLANTPRODUCT'          }, {            id: '43',            text: '订单撤排',            icon: 'icon-glass',            url: '/Order/cancelPRODUCT'          }, {            id: '44',            text: '订单HOLD',            icon: 'icon-glass',            url: '/Order/hold'          }, {            id: '45',            text: '订单删除',            icon: 'icon-glass',            url: '/Order/delete'          }, {            id: '47',            text: '订单插单',            icon: 'icon-glass',            url: '/Order/insertorder'          }, {            id: '48',            text: '订单导入',            icon: 'icon-glass',            url: '/Order/Import'          }]        }]      });    });

这里需要说明的很重要的一点就是关于菜单前面的小图标，icon属性对应的是页面里面的图标的样式：

con的值为icon-user的时候，菜单上面就会显示一个如图的小图标。当然一般情况下，菜单肯定是动态加载的的，如果需要从后台取数据，可以直接调用此方法：

$('#menu').sidebarMenu({ url: "/api/UserApi/GetMenuByUser/", param: { strUser: 'admin' } });

2、Tab页效果 

Tab页的效果其实是和左边菜单息息相关的，首先还是看看Tab页效果的js引用。

<script src="/Scripts/bootstrap-tab.js"></script>

页面的html标签：

     
      
          
       
            
        
              
         
                
          
首页
              
         
              
         
                
          
 
          
              
         
            
        
          
       
        
      
      
     

bootstrap-tab.js这个文件里面封装了addTabs方法

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");  //如果TAB不存在，创建一个新的TAB  if (!$("#" + id)[0]) {    //固定TAB中IFRAME高度    mainHeight = $(document.body).height() - 90;    //创建新TAB的title    title = '
' + options.title;    //是否允许关闭    if (options.close) {      title += ' ';    }    title += '
';    //是否指定TAB内容    if (options.content) {      content = '
     
      ' + options.content + '
     
';    } else {
   //没有内容，使用IFRAME打开链接      content = '
     
      
     
';    }    //加入TABS    $(".nav-tabs").append(title);    $(".tab-content").append(content);  }  //激活TAB  $("#tab_" + id).addClass('active');  $("#" + id).addClass("active");};var closeTab = function (id) {  //如果关闭的是当前激活的TAB，激活他的前一个TAB  if ($("li.active").attr('id') == "tab_" + id) {    $("#tab_" + id).prev().addClass('active');    $("#" + id).prev().addClass('active');  }  //关闭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);  });});

在注册菜单click事件的时候调用Addtabs方法，这部分代码在前面sidebar-menu组件封装的时候就有。

参考：

http://www.cnblogs.com/landeanfen/p/5043253.html

https://www.teakki.com/p/57dfb380d3a7507f975e87ec

 bootStrap中Tab页签切换

bootStrap可以简单方便的实现tab页面的切换 

用法 

通过data属性 

可以无需写任何javascript来激活标签式或圆角式的导航, 只需在元素上简单的指定 data-toggle=”tab” 或 data-toggle=”pill”. 在标签 ul 添加 nav 和 nav-tabs 属性, 将应用Bootstrap标签样式. 

    
  
     
首页
 
     
介绍
 
     
消息
 
     
设置
 
    

通过javascript

• 通过JavaScript启用可切换标签 (每个标签都需要单独激活):

$('#myTab a').click(function (e) {  e.preventDefault();  $(this).tab('show'); })

• 以多种方式激活标签:

$('#myTab a[href="#profile"]').tab('show'); // 通过名字选择$('#myTab a:first').tab('show'); // 选择第一个标签 $('#myTab a:last').tab('show'); // 择最后一个标签 $('#myTab li:eq(2) a').tab('show'); // 选择第三个标签 方法 

$().tab

激活一个标签页元素和内容容器。标签页应该含有 data-target 或 href 属性以指向dom中的某个容器节点。 

BOOTSTRAP 增加、关闭、折叠TAB

http://git.oschina.net/hbbcs/bootStrap-addTabs

 

Bootstrap 里的 JavaScript

https://bootstrap.ninghao.net/javascript.html#overview

过渡

对话框

下拉菜单

Scrollspy

选项卡

工具提示

Popover

警示

按钮

折叠

旋转木马

预输入

附件