admin-lte3-i-frame-json_menus
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <title>AdminLTE 3 | 仪表盘 3</title>

 <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
</head>

<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
  <!-- 导航栏 -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- 左侧导航栏链接 -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
    </ul>

    <!-- 搜索表单 -->
    <form class="form-inline ml-3">
      <div class="input-group input-group-sm">
        <input class="form-control form-control-navbar" type="search" placeholder="搜索" aria-label="Search">
        <div class="input-group-append">
          <button class="btn btn-navbar" type="submit">
            <i class="fas fa-search"></i>
          </button>
        </div>
      </div>
    </form>

    <!-- 右侧导航栏链接 -->
    <ul class="navbar-nav ml-auto">
      <!-- 通知下拉菜单 -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-bell"></i>123
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <span class="dropdown-item dropdown-header">用户:123456</span>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">退出</a>
        </div>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- 主侧边栏容器 -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Logo -->
    <a href="index3.html" class="brand-link">
      <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-text font-weight-light">AdminLTE 3</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar" style="height: calc(100vh - (7rem + 1px));">
      <!-- 侧边栏菜单 -->
      <nav class="mt-2">
		<ul id="menutree"  class="nav nav-pills nav-sidebar flex-column nav-child-indent" data-widget="treeview" role="menu" data-accordion="false">
		</ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
    <div class="footer" style="color: aliceblue;text-align:center;border-top: 1px solid #4b545c;"><p style="margin:0px">Copyright &copy; 2014-2019</p><p style="margin:0px">*** 保留所有权利</p></div>

  </aside>

  <!-- Content Wrapper. 包含页面内容 -->
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper iframe-mode" data-widget="iframe" data-loading-screen="750">
      <div class="nav navbar navbar-expand navbar-white navbar-light border-bottom p-0">
        <div class="nav-item dropdown">
          <a class="nav-link bg-danger dropdown-toggle" data-toggle="dropdown" href="#" role="button"
            aria-haspopup="true" aria-expanded="false">关闭</a>
          <div class="dropdown-menu mt-0">
            <a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all">全部关闭</a>
            <a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all-other">关闭其他</a>
          </div>
        </div>
        <a class="nav-link bg-light" href="#" data-widget="iframe-scrollleft"><i
            class="fas fa-angle-double-left"></i></a>
        <ul class="navbar-nav overflow-hidden" role="tablist"></ul>
        <a class="nav-link bg-light" href="#" data-widget="iframe-scrollright"><i
            class="fas fa-angle-double-right"></i></a>
        <a class="nav-link bg-light" href="#" data-widget="iframe-fullscreen"><i class="fas fa-expand"></i></a>
      </div>
      <div class="tab-content">
         <div class="tab-empty">
          <!--<h5 class="display-4" style="font-size: 1.5rem;">无页面展示!</h5>-->
        </div>
        <div class="tab-loading">
          <div>
            <h2 class="display-4" style="font-size: 1.5rem;">加载中…… <i class="fa fa-sync fa-spin"></i></h2>
          </div>
        </div>
      </div>
    </div>
  <!-- /.content-wrapper -->

</div>
<!-- ./wrapper -->

<!-- 载入脚本 -->

<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src="plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.js"></script>
<!-- menu -->
<script src="plugins/data.json"></script>

<script src="plugins/adminlte3-menu/menu.js"></script>

<script type="text/javascript">


$(document).ready(function(){
	setContentSize();
    $(window).resize(function(){
		setContentSize();
	});
	$("#menutree").AdminLTE3Menu({
			leafKey:"leaf",
			childKey:"children",
			menuURLKey:"url",
			menuNameKey:"text",
			menuIconKey:"icon",
			menuIdKey:"id",
			menuRightTextKey:"right_text",
			menuData:menuData.menus,
		});
});
/*
*iframe窗口大小适应
*/
function setContentSize(){
	var wh = $(window).height();
	console.log(wh);
	$("#iframeMain").height(wh-57-6);
}
</script>
</body>
</html>