值得分享的Bootstrap Ace模板实现菜单和Tab页效果（转）

shy1766IT

Ace模板地址：http://code.google.com/p/ace-engine/wiki/AceTemplate（有时会打不开）

Ace英文官网：http://wrapbootstrap.com/preview/WB0B30DGR

Ace模板功能介绍地址：http://www.cnblogs.com/txw1958/p/Ace-Responsive-Admin-Template.html

 

1、菜单效果

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

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

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

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

再来看看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 = $(\'<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);

在页面上面直接调用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属性对应的是http://v3.bootcss.com/components/页面里面的图标的样式：

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标签：

<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">首页</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这个文件里面封装了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 = \'<li role="presentation" id="tab_\' + id + \'"><a href="#\' + id + \'" aria-controls="\' + id + \'" role="tab" data-toggle="tab">\' + options.title;
    //是否允许关闭
    if (options.close) {
      title += \' <i class="glyphicon glyphicon-remove" tabclose="\' + id + \'"></i>\';
    }
    title += \'</a></li>\';
    //是否指定TAB内容
    if (options.content) {
      content = \'<div role="tabpanel" class="tab-pane" id="\' + id + \'">\' + options.content + \'</div>\';
    } else {//没有内容，使用IFRAME打开链接
      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>\';
    }
    //加入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标签样式. 
这里写图片描述

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">首页</a></li>
  <li><a href="#profile" data-toggle="tab">介绍</a></li>
  <li><a href="#messages" data-toggle="tab">消息</a></li>
  <li><a href="#settings" data-toggle="tab">设置</a></li>
</ul>

通过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
警示
按钮
折叠
旋转木马
预输入
附件

 

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode