dmt-AdminLTE-tabs
/
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Dashboard</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="plugin/bootstrap-3.3.7/css/bootstrap.css">
    <link rel="stylesheet" href="plugin/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="plugin/metisMenu-2.7.0/metisMenu.css">
    <link rel="stylesheet" href="plugin/AdminLTE-2.4.0-rc/css/AdminLTE.css">
    <link rel="stylesheet" href="plugin/AdminLTE-2.4.0-rc/css/skins/skin-blue.css">
    <link rel="stylesheet" href="css/index.css">
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <header class="main-header clearfix">
        <a href="#" class="logo">
            <span class="logo-mini"><b>A</b>LT</span>
            <span class="logo-lg"><b>Admin</b>LTE</span>
        </a>
        <nav class="navbar navbar-static-top clearfix" style="height: 50px;">

            <a href="#" class="sidebar-toggle" data-toggle="push-menu">
                <span class="sr-only">Toggle navigation</span>
            </a>

            <div class="navbar-header">
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <li class="dropdown messages-menu">
                            <a href="#">
                                <i class="fa fa-envelope-o"></i>
                                <span class="label label-success">4</span>
                            </a>
                        </li>
                        <li class="dropdown notifications-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-bell-o"></i>
                                <span class="label label-warning">10</span>
                            </a>
                        </li>
                        <li class="dropdown tasks-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-flag-o"></i>
                                <span class="label label-danger">9</span>
                            </a>
                        </li>
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <!--<img src="" class="user-image" alt="User Image">-->
                                <span class="hidden-xs">Alexander Pierce</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                        </li>
                        <li id="menusButton">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menusTitle" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <i class="fa fa-bars"></i>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="menusTitle" class="navbar-collapse collapse">
<!--                <ul class="nav navbar-nav">
                    <li class="active"><a href="#menuZone1" data-toggle="tab">Link1</a></li>
                    <li><a href="#menuZone2" data-toggle="tab">Link2</a></li>
                </ul>-->
            </div>
        </nav>
    </header>

    <aside class="main-sidebar">
        <section class="sidebar">
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p>Alexander Pierce</p>
                    <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                </div>
            </div>

            <form action="#" class="sidebar-form">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="Search...">
                    <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat">
                  <i class="fa fa-search"></i>
                </button>
              </span>
                </div>
            </form>

            <div id="menusContent" class="tab-content">
<!--                <div id="menuZone1" class="tab-pane fade in active">
                    <ul class="sidebar-menu" data-widget="tree">
                        <li class="header">MAIN NAVIGATION</li>
                        <li class="active treeview menu-open">
                            <a href="javascript:app.tabs.open('1','page1','page1.html')">
                                <i class="fa fa-dashboard"></i> <span>Dashboard</span>
                                <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="javascript:app.tabs.open('7','page1','page1.html')"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
                                <li class="active"><a href="javascript:app.tabs.open('8','page2','page2.html')"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
                            </ul>
                        </li>
                        <li class="treeview">
                            <a href="javascript:app.tabs.open('2','page2','page2.html')">
                                <i class="fa fa-files-o"></i>
                                <span>Layout Options</span>
                                <span class="pull-right-container">
                                <span class="label label-primary pull-right">4</span>
                            </span>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="javascript:app.tabs.open('3','page3','page3.html')"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
                                <li><a href="javascript:app.tabs.open('4','page1','page1.html')"><i class="fa fa-circle-o"></i> Boxed</a></li>
                                <li><a href="javascript:app.tabs.open('5','page2','page2.html')"><i class="fa fa-circle-o"></i> Fixed</a></li>
                                <li><a href="javascript:app.tabs.open('6','page3','page3.html')"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div id="menuZone2" class="tab-pane fade">
                    <ul class="sidebar-menu" data-widget="tree">
                        <li class="header">22MAIN NAVIGATION</li>
                        <li class="active treeview menu-open">
                            <a href="javascript:app.tabs.open('21','page1','page1.html')">
                                <i class="fa fa-dashboard"></i> <span>22Dashboard</span>
                                <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                             </span>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="javascript:app.tabs.open('27','page1','page1.html')"><i class="fa fa-circle-o"></i> 22Dashboard v1</a></li>
                                <li class="active"><a href="javascript:app.tabs.open('28','page2','page2.html')"><i class="fa fa-circle-o"></i> 22Dashboard v2</a></li>
                            </ul>
                        </li>
                        <li class="treeview">
                            <a href="javascript:app.tabs.open('22','page2','page2.html')">
                                <i class="fa fa-files-o"></i>
                                <span>Layout Options</span>
                                <span class="pull-right-container">
                                <span class="label label-primary pull-right">4</span>
                            </span>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="javascript:app.tabs.open('23','page3','page3.html')"><i class="fa fa-circle-o"></i> 22Top Navigation</a></li>
                                <li><a href="javascript:app.tabs.open('24','page1','page1.html')"><i class="fa fa-circle-o"></i> 22Boxed</a></li>
                                <li><a href="javascript:app.tabs.open('25','page2','page2.html')"><i class="fa fa-circle-o"></i> 22Fixed</a></li>
                                <li><a href="javascript:app.tabs.open('26','page3','page3.html')"><i class="fa fa-circle-o"></i> 22Collapsed Sidebar</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>-->
            </div>
        </section>
    </aside>

    <div class="content-wrapper">
        <div style="height: 100%;position: relative;">
            <div class="tabs_title" id="tabs_title">
            </div>
            <div class="nav-tabs-custom">
                <div id="tabs_content" class="tab-content">
                </div>
            </div>
        </div>
    </div>


    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 2.4.0
        </div>
        <strong>Copyright &copy; 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights
        reserved.
    </footer>

    <div class="control-sidebar-bg"></div>
</div>


<script src="plugin/jquery-3.2.1/jquery.js"></script>
<script src="plugin/bootstrap-3.3.7/js/bootstrap.js"></script>
<script src="plugin/slimScroll-1.3.8/jquery.slimscroll.js"></script>
<script src="plugin/metisMenu-2.7.0/metisMenu.js"></script>


<script src="js/index.js"></script>
<script src="plugin/AdminLTE-2.4.0-rc/js/adminlte.js"></script>

<script>


    app.menus.init('#menusContent');
    app.tabs.init('#tabs_title','#tabs_content');


    app.tabs.open('default', "大家好", 'page1.html', null, false);


    var menuData = [
        {
            id:1,
            title:"page1",
            url: "page1.html"
        },{
            id:2,
            title:"bb"
        },{
            id:3,
            title:"page1",
            parent: 1,
            url: "page1.html"
        },{
            id:4,
            title:"page2",
            parent: 2,
            url: "page2.html"
        },{
            id:5,
            title:"page1",
            url: "page1.html"
        },{
            id:6,
            title:"page2",
            url: "page2.html",
            icon: "fa fa-circle-o"
        },{
            id:7,
            title:"page3",
            url: "page3.html"
        }
    ];

    app.menus.loadByData(menuData);

//    menus.loadByData($("#menu_zone"), menuData)
//        .on('show.metisMenu', function() {
//
//
//        })
//        .on('hidde.metisMenu', function() {
//
//        })
//        .on('shown.metisMenu', function() {
//            //$.AdminLTE.layout.fix();
//
//        })
//        .on('hidden.metisMenu', function() {
//            //$.AdminLTE.layout.fix();
//        });
</script>
</body>
</html>