ACE框架整合记录3Menu插件与Tab插件整合【完结】

 使用方式

数据格式 id-children
例子-目前能适应多级 但是具体效果没测试，主打二级菜单
 $("#main-tab").aceaddtab({ title: "主页", url: "c.aspx" });
                $('#menu').acemenu({
                    menuTabID: "main-tab",
                    data: [{
                        id: '1',
                        title: '系统设置',
                        icon: 'icon-cog',
                        url: ''
                    }, {
                        id: '2',
                        title: '基础数据',
                        icon: 'icon-leaf',
                        url: '',
                        children: [{
                            id: '21',
                            title: '基础特征',
                            icon: 'icon-glass',
                            url: 'a.aspx',
                        }, {
                            id: '22',
                            title: '特征管理',
                            icon: 'icon-glass',
                            url: 'b.aspx'
                        }, {
                            id: '23',
                            title: '物料维护',
                            icon: 'icon-glass',
                            url: '/Model/Index'
                        }, {
                            id: '24',
                            title: '站点管理',
                            icon: 'icon-glass',
                            url: '/Station/Index'
                        }]
                    }, {
                        id: '3',
                        title: '权限管理',
                        icon: 'icon-user',
                        url: '',
                        children: [{
                            id: '31',
                            title: '用户管理',
                            icon: 'icon-user',
                            url: '/SystemSetting/User'
                        }, {
                            id: '32',
                            title: '角色管理',
                            icon: 'icon-apple',
                            url: '/SystemSetting/Role'
                        }, {
                            id: '33',
                            title: '菜单管理',
                            icon: 'icon-list',
                            url: '/SystemSetting/Menu'
                        }, {
                            id: '34',
                            title: '部门管理',
                            icon: 'icon-glass',
                            url: '/SystemSetting/Department'
                        }]
                    }, {
                        id: '4',
                        title: '订单管理',
                        icon: 'icon-envelope',
                        url: '',
                        children: [{
                            id: '48',
                            title: '订单导入',
                            icon: 'icon-glass',
                            url: '/Order/Import'
                        }]
                    }]
                });

            });

效果图

插件代码：
/**
*说明：与ace配套的在主页面使用的Menu插件
*作者：黄枰凯
*更新时间：2016-4-18 15：24 完结 目前能适应多级 但是具体效果没测试，主打二级菜单
*/
(function ($, window) {

 $.fn.acemenu = function (options) {
  // 默认参数

  var defaults = {
   //绑定对应展示的TabID
   menuTabID: "",
   //数据对象数据格式 title、icon、url、children[]
   data:null
  };
  //为了给自定义方法用
  var _self = $(this);
  _self.addClass("nav").addClass("nav-list");
  // 插件配置
  var opt = $.extend(defaults, options);

  
  var _init = function (target,data) {
   $.each(data, function (i, item) {
    var li = $("<li></li>");
    var a = $("<a></a>");
    var i = $("<i></i>");
    var span = $("<span></span>");
    target.append(li);
    if (item.children && item.children.length > 0) {
     li.append(a);
     //li.addClass("active").addClass("open");
     if (target.hasClass("nav") && target.hasClass("nav-list")) {
      //是第一级菜单
     } else {
      //是子菜单
      //a.append("<i class=\"icon-double-angle-right\"></i>")
     }
     a.addClass("dropdown-toggle");
     if (item.url == "") {
      a.attr("href", "javascript:ovid(0);");
     } else {
         a.attr("href", item.url).addClass("tabli");
     }
     a.append(i);
     i.addClass(item.icon);
     a.append(span);
     span.addClass("menu-text").text(item.title);
     var b = $("<b></b>");
     b.addClass("arrow").addClass("icon-angle-down");
     a.append(b);
     var ul = $("<ul></ul>");
     ul.addClass("submenu");
     li.append(ul);
     _init(ul, item.children);
    } else {
        li.append(a);
     if (item.url == "") {
      a.attr("href", "javascript:ovid(0);");
     } else {
         a.attr("href", item.url).addClass("tabli");
     }

     if (target.hasClass("nav") && target.hasClass("nav-list")) {
      //是第一级菜单
     } else {
      //是子菜单
      a.append("<i class=\"icon-double-angle-right\"></i>")
     }
     a.append(i);
     i.addClass(item.icon);
     a.append(span);
     span.addClass("menu-text").text(item.title);
    }

   });
  }
  if (opt.data) {
      _init(_self, opt.data);
      //事件处理
      $(_self).find(".dropdown-toggle").bind("click", function () {
          $.each($(_self).find(".dropdown-toggle"), function () {
              $(this).next().hide();
          })
          $(this).next().animate({
              height: 'toggle'
          });
      });
      //打开第一个
      $(_self).find(".dropdown-toggle").first().next().animate({
          height: 'toggle'
      });
      $(_self).find(".dropdown-toggle").first().next().find("li").first().addClass("active");
      var tabA = $(_self).find(".tabli").first();
      $("#" + opt.menuTabID).aceaddtab({
          icon: tabA.find("i").last().attr("class"),
          title: tabA.find("span").first().text(),
          url: tabA.attr("href")
      });
      //打开Tab
      $(_self).find(".tabli").bind("click", function () {
          $.each($(_self).find(".tabli"), function () {
              $(this).parent().removeClass("active");
          })
          $(this).parent().addClass("active");
         
          $("#" + opt.menuTabID).aceaddtab({
              icon: $(this).find("i").last().attr("class"),
              title: $(this).find("span").first().text(),
              url: $(this).attr("href")
          });
          return false;
      });
  }
  //-----------------------

  return this;

 }
})(jQuery, window);

 

整个网页布局代码
 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="PRMPortal.Index" %>

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>Process Rule Management</title>
    <!-- basic styles -->
    <link href="JSPlug/Assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="JSPlug/Assets/css/font-awesome.min.css" />
    <!--[if IE 7]>
        <link rel="stylesheet" href="JSPlug/Assets/css/font-awesome-ie7.min.css" />
    <![endif]-->
    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="JSPlug/Assets/css/jquery-ui-1.10.3.custom.min.css" />
    <link rel="stylesheet" href="JSPlug/Assets/css/jquery.gritter.css" />
    <!-- fonts -->
    <!-- ace styles -->
    <link rel="stylesheet" href="JSPlug/Assets/css/ace.min.css" />
    <link rel="stylesheet" href="JSPlug/Assets/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="JSPlug/Assets/css/ace-skins.min.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="JSPlug/Assets/css/ace-ie.min.css" />
    <![endif]-->
    <!-- ace settings handler -->
    <script src="JSPlug/Assets/js/ace-extra.min.js"></script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="JSPlug/Assets/js/html5shiv.js"></script>
        <script src="JSPlug/Assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body style="overflow: hidden;">
    <form id="form1" runat="server">
        <div class="navbar navbar-default" id="navbar">
            <div class="navbar-container" id="navbar-container">
                <div class="navbar-header pull-left">
                    <a href="#"  class="navbar-brand">
                        <small>
                            <i class="icon-leaf"></i>
                            Admin
                        </small>

                    </a>

                    <!-- /.brand -->

                </div>

                <!-- /.navbar-header -->

                <div class="navbar-header pull-right" role="navigation">

                    <ul class="nav ace-nav">

                        <li class="grey">

                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">

                                <i class="icon-tasks"></i>

                                <span class="badge badge-grey">4</span>

                            </a>

                            <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">

                                <li class="dropdown-header">

                                    <i class="icon-ok"></i>

                                    4 Tasks to complete

                                </li>

                                <li>

                                    <a href="#">

                                        <div class="clearfix">

                                            <span class="pull-left">Software Update</span>

                                            <span class="pull-right">65%</span>

                                        </div>

                                        <div class="progress progress-mini ">

                                            <div style="width: 65%" class="progress-bar "></div>

                                        </div>

                                    </a>

                                </li>

                                <li>

                                    <a href="#">

                                        <div class="clearfix">

                                            <span class="pull-left">Hardware Upgrade</span>

                                            <span class="pull-right">35%</span>

                                        </div>

                                        <div class="progress progress-mini ">

                                            <div style="width: 35%" class="progress-bar progress-bar-danger"></div>

                                        </div>

                                    </a>

                                </li>

                                <li>

                                    <a href="#">

                                        <div class="clearfix">

                                            <span class="pull-left">Unit Testing</span>

                                            <span class="pull-right">15%</span>

                                        </div>

                                        <div class="progress progress-mini ">

                                            <div style="width: 15%" class="progress-bar progress-bar-warning"></div>

                                        </div>

                                    </a>

                                </li>

                                <li>

                                    <a href="#">

                                        <div class="clearfix">

                                            <span class="pull-left">Bug Fixes</span>

                                            <span class="pull-right">90%</span>

                                        </div>

                                        <div class="progress progress-mini progress-striped active">

                                            <div style="width: 90%" class="progress-bar progress-bar-success"></div>

                                        </div>

                                    </a>

                                </li>

                                <li>

                                    <a href="#">See tasks with details

          <i class="icon-arrow-right"></i>

                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="purple">

                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">

                                <i class="icon-bell-alt icon-animated-bell"></i>

                                <span class="badge badge-important">8</span>

                            </a>

                            <ul class="pull-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">

                                <li class="dropdown-header">

                                    <i class="icon-warning-sign"></i>

                                    8 Notifications

                                </li>

                                <li>

                                    <a href="#">

                                        <div class="clearfix">

                                            <span class="pull-left">

                                                <i class="btn btn-xs no-hover btn-pink icon-comment"></i>

                                                New Comments

                                            </span>

                                            <span class="pull-right badge badge-info">+12</span>

                                        </div>

                                    </a>

                                </li>

                                <li>

                                    <a href="#">

                                        <i class="btn btn-xs btn-primary icon-user"></i>

                                        Bob just signed up as an editor ...

                                    </a>

                                </li>

                                <li>

                                    <a href="#">

                                        <div class="clearfix">

                                            <span class="pull-left">

                                                <i class="btn btn-xs no-hover btn-success icon-shopping-cart"></i>

                                                New Orders

                                            </span>

                                            <span class="pull-right badge badge-success">+8</span>

                                        </div>

                                    </a>

                                </li>

                                <li>

                                    <a href="#">

                                        <div class="clearfix">

                                            <span class="pull-left">

                                                <i class="btn btn-xs no-hover btn-info icon-twitter"></i>

                                                Followers

                                            </span>

                                            <span class="pull-right badge badge-info">+11</span>

                                        </div>

                                    </a>

                                </li>

                                <li>

                                    <a href="#">See all notifications

          <i class="icon-arrow-right"></i>

                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="green">

                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">

                                <i class="icon-envelope icon-animated-vertical"></i>

                                <span class="badge badge-success">5</span>

                            </a>

                            <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">

                                <li class="dropdown-header">

                                    <i class="icon-envelope-alt"></i>

                                    5 Messages

                                </li>

                                <li>

                                    <a href="#">

                                        <img src="JSPlug/Assets/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />

                                        <span class="msg-body">

                                            <span class="msg-title">

                                                <span class="blue">Alex:</span>

                                                Ciao sociis natoque penatibus et auctor ...

                                            </span>

                                            <span class="msg-time">

                                                <i class="icon-time"></i>

                                                <span>a moment ago</span>

                                            </span>

                                        </span>

                                    </a>

                                </li>

                                <li>

                                    <a href="#">

                                        <img src="JSPlug/Assets/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />

                                        <span class="msg-body">

                                            <span class="msg-title">

                                                <span class="blue">Susan:</span>

                                                Vestibulum id ligula porta felis euismod ...

                                            </span>

                                            <span class="msg-time">

                                                <i class="icon-time"></i>

                                                <span>20 minutes ago</span>

                                            </span>

                                        </span>

                                    </a>

                                </li>

                                <li>

                                    <a href="#">

                                        <img src="JSPlug/Assets/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />

                                        <span class="msg-body">

                                            <span class="msg-title">

                                                <span class="blue">Bob:</span>

                                                Nullam quis risus eget urna mollis ornare ...

                                            </span>

                                            <span class="msg-time">

                                                <i class="icon-time"></i>

                                                <span>3:15 pm</span>

                                            </span>

                                        </span>

                                    </a>

                                </li>

                                <li>

                                    <a href="inbox.html">See all messages

          <i class="icon-arrow-right"></i>

                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="light-blue">

                            <a data-toggle="dropdown" href="#" class="dropdown-toggle">

                                <img class="nav-user-photo" src="JSPlug/Assets/avatars/user.jpg" alt="Jason's Photo" />

                                <span class="user-info">

                                    <small>Welcome,</small>

                                    Jason

                                </span>

                                <i class="icon-caret-down"></i>

                            </a>

                            <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">

                                <li>

                                    <a href="#">

                                        <i class="icon-cog"></i>

                                        Settings

                                    </a>

                                </li>

                                <li>

                                    <a href="#">

                                        <i class="icon-user"></i>

                                        Profile

                                    </a>

                                </li>

                                <li class="divider"></li>

                                <li>

                                    <a href="#">

                                        <i class="icon-off"></i>

                                        Logout

                                    </a>

                                </li>

                            </ul>

                        </li>

                    </ul>

                    <!-- /.ace-nav -->

                </div>

                <!-- /.navbar-header -->

            </div>

            <!-- /.container -->

        </div>

        <div class="main-container" id="main-container">

            <div class="main-container-inner">

                <a class="menu-toggler" id="menu-toggler" href="#">

                    <span class="menu-text"></span>

                </a>

                <div class="sidebar" id="sidebar">
                    <div class="sidebar-shortcuts" id="sidebar-shortcuts">

                        <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">

                            <button class="btn btn-success">

                                <i class="icon-signal"></i>

                            </button>

                            <button class="btn btn-info">

                                <i class="icon-pencil"></i>

                            </button>

                            <button class="btn btn-warning">

                                <i class="icon-group"></i>

                            </button>

                            <button class="btn btn-danger">

                                <i class="icon-cogs"></i>

                            </button>

                        </div>

                        <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">

                            <span class="btn btn-success"></span>

                            <span class="btn btn-info"></span>

                            <span class="btn btn-warning"></span>

                            <span class="btn btn-danger"></span>

                        </div>

                    </div>
                    <!-- #sidebar-shortcuts -->
                    <ul 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>

                <div class="main-content">

                    <div class="breadcrumbs" id="breadcrumbs" style="background-color: white; border: none; padding-right: 2px;">

                        <div class="row" style="margin: 0px;">

                            <!-- 适应各种屏幕大小的12 -->

                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin: 0px 0px 0px 1px; padding: 0px;">

                                <!-- 主要内容区域 -->

                                <div id="main-tab">

                                  
                                  

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <!-- /.main-content -->

                <!-- /#ace-settings-container -->

            </div>

            <!-- /.main-container-inner -->

 

        </div>

        <!-- /.main-container -->

        <!-- basic scripts -->

 

        <script type="text/javascript">

            window.jQuery || document.write("<script src='JSPlug/Assets/js/jquery.min.js'>" + "<" + "/script>");

        </script>

        <!-- <![endif]-->

        <!--[if IE]>

<script type="text/javascript">

 window.jQuery || document.write("<script src='JSPlug/Assets/js/jquery.min.js'>"+"<"+"/script>");

</script>

<![endif]-->

        <script type="text/javascript">

            if ("ontouchend" in document) document.write("<script src='JSPlug/Assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");

        </script>

        <script src="JSPlug/Assets/js/bootstrap.min.js"></script>

        <script src="JSPlug/Assets/js/typeahead-bs2.min.js"></script>

        <!-- page specific plugin scripts -->

        <!--[if lte IE 8]>

    <script src="JSPlug/Assets/js/excanvas.min.js"></script>

  <![endif]-->

        <script src="JSPlug/Assets/js/jquery-ui-1.10.3.custom.min.js"></script>

        <script src="JSPlug/Assets/js/jquery.ui.touch-punch.min.js"></script>

        <script src="JSPlug/Assets/js/bootbox.min.js"></script>

        <script src="JSPlug/Assets/js/jquery.easy-pie-chart.min.js"></script>

        <script src="JSPlug/Assets/js/jquery.gritter.min.js"></script>

        <!-- ace scripts -->

        <script src="JSPlug/Assets/js/ace-elements.min.js"></script>

        <script src="JSPlug/Assets/js/ace.min.js"></script>

        <!-- ace extend scripts -->
        <script src="JSPlug/Assets-Extend/ace.extend.home.tabs.js"></script>
        <script src="JSPlug/Assets-Extend/ace.extend.home.menu.js"></script>
        <!-- inline scripts related to this page -->

        <script type="text/javascript">

            $(function () {
                $("#main-tab").aceaddtab({ title: "主页", url: "c.aspx" });
                $('#menu').acemenu({
                    menuTabID: "main-tab",
                    data: [{
                        id: '1',
                        title: '系统设置',
                        icon: 'icon-cog',
                        url: ''
                    }, {
                        id: '2',
                        title: '基础数据',
                        icon: 'icon-leaf',
                        url: '',
                        children: [{
                            id: '21',
                            title: '基础特征',
                            icon: 'icon-glass',
                            url: 'a.aspx',
                        }, {
                            id: '22',
                            title: '特征管理',
                            icon: 'icon-glass',
                            url: 'b.aspx'
                        }, {
                            id: '23',
                            title: '物料维护',
                            icon: 'icon-glass',
                            url: '/Model/Index'
                        }, {
                            id: '24',
                            title: '站点管理',
                            icon: 'icon-glass',
                            url: '/Station/Index'
                        }]
                    }, {
                        id: '3',
                        title: '权限管理',
                        icon: 'icon-user',
                        url: '',
                        children: [{
                            id: '31',
                            title: '用户管理',
                            icon: 'icon-user',
                            url: '/SystemSetting/User'
                        }, {
                            id: '32',
                            title: '角色管理',
                            icon: 'icon-apple',
                            url: '/SystemSetting/Role'
                        }, {
                            id: '33',
                            title: '菜单管理',
                            icon: 'icon-list',
                            url: '/SystemSetting/Menu'
                        }, {
                            id: '34',
                            title: '部门管理',
                            icon: 'icon-glass',
                            url: '/SystemSetting/Department'
                        }]
                    }, {
                        id: '4',
                        title: '订单管理',
                        icon: 'icon-envelope',
                        url: '',
                        children: [{
                            id: '48',
                            title: '订单导入',
                            icon: 'icon-glass',
                            url: '/Order/Import'
                        }]
                    }]
                });

            });
        </script>

    </form>

</body>

</html>