ace--3.meau

 是根据此文章总结而成，楼猪花了两天总结并指出一些错误https://www.cnblogs.com/bubugao/p/ACE.html

 

1      基本结构

 

 

2      基本操作

2.1  Navigation.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<style>
    .menu-toggler {/* 改变手机端内置菜单样式宽度*/
        width: 5px;
    }
</style>

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

<!--导航栏-->
<div class="sidebar" id="sidebar">
    <script type="text/javascript">
        try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
    </script>

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

    <script type="text/javascript">
        try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
    </script>
</div>

2.2  sidebar-menu.css

#sidebar{
    overflow-x: hidden;
    overflow-y: auto;
}

2.3  Test.json

可以点开看原文

[
  {
    "id":"1",
    "text":"系统设置",
    "icon":"icon-cog",
    "url":"",
    "menus":[
      {
        "id":"11",
        "text":"编码管理",
        "icon":"icon-glass",
        "url":"txl0"
      }
    ]
  },
  {
    "id":"2",
    "text":"基础数据",
    "icon":"icon-leaf",
    "url":"",
    "menus":[
      {
        "id":"21",
        "text":"基础特征",
        "icon":"icon-glass",
        "url":"txl1.do"
      },
      {
        "id":"22",
        "text":"特征管理",
        "icon":"icon-glass",
        "url":"${path}/txl/txl1.do"
      },
      {
        "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"
      }
    ]
  }

]

2.4  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 id="li_' + item.id+ '"></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);//当有子menu目录时，递归调用
                    li.append(menus);
                }
                else {
                    var href = 'javascript:addTabs({id:\'' + item.id + '\',title: \'' + item.text+ '\',close:true,url: \'' + item.url + '\',icon:\''+ item.icon +'\'});';
                    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);

$(function() {
    $.ajax({
        url: '/yjxt/test.json',
        type: 'post',
        timeout: 20000,
        data:'json',
        success: function (result) {
            $('#menu').sidebarMenu({
                data:result
            });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("访问后台发生错误:" + XMLHttpRequest.status)
        }
    });
    $('#sidebar').height($(window).height() - 80);
    // $('#menu').sidebarMenu({ url:"/api/Api/GetMenuByUser/", param: { strUser: 'admin' } });

}); 

 

 http://download.youkuaiyun.com/download/qq_26553781/10226387