zoukankan      html  css  js  c++  java

  • layui iframe版动态菜单解决方案

    <!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>xxxxxxx</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
</head>
<body class="layui-layout-body">
  
  <div id="LAY_app">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <!-- 头部区域 -->
        <ul class="layui-nav layui-layout-left">
          <li class="layui-nav-item layadmin-flexible" lay-unselect>
            <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
              <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
            </a>
          </li>
          <li class="layui-nav-item" lay-unselect>
            <a href="javascript:;" layadmin-event="refresh" title="刷新">
              <i class="layui-icon layui-icon-refresh-3"></i>
            </a>
          </li>
        </ul>
        <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
          <li class="layui-nav-item" lay-unselect>
            <a href="javascript:;">
              <cite id="userName">物资管理员</cite>
            </a>
            <dl class="layui-nav-child">
   <!--           <dd><a lay-href="set/user/info.html">基本资料</a></dd>-->
              <dd id="updatePassword"><!--<a lay-href="users/password.html">修改密码</a>--></dd>
              <hr>
              <dd id="logout" style="text-align: center;"><a style="cursor: pointer">退出</a></dd>
            </dl>
          </li>

        </ul>
      </div>
      
      <!-- 侧边菜单 -->
      <div class="layui-side layui-side-menu">
        <div class="layui-side-scroll">
          <div class="layui-logo" lay-href="home/console.html">
            <span>云酒店平台OTA1.1</span>
          </div>
          
          <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
                
          </ul>
        </div>
      </div>

      <!-- 页面标签 -->
      <div class="layadmin-pagetabs" id="LAY_app_tabs">
        <!--<div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>-->
        <!--<div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>-->
        <div class="layui-icon layadmin-tabs-control layui-icon-down">
          <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
            <li class="layui-nav-item" lay-unselect>
              <a href="javascript:;"></a>
              <dl class="layui-nav-child layui-anim-fadein">
                <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
              </dl>
            </li>
          </ul>
        </div>
        <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
          <ul class="layui-tab-title" id="LAY_app_tabsheader">
            <li lay-id="home/console.html" lay-attr="home/console.html" class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
          </ul>
        </div>
      </div>
      
      
      <!-- 主体内容 -->
      <div class="layui-body" id="LAY_app_body">
        <div class="layadmin-tabsbody-item layui-show">
          <iframe src="" frameborder="0" class="layadmin-iframe" id="fIndex"></iframe>
        </div>
      </div>
      
      <!-- 辅助元素，一般用于移动设备下遮罩 -->
      <div class="layadmin-body-shade" layadmin-event="shade"></div>
    </div>
  </div>

  <script src="../layuiadmin/layui/layui.js"></script>
  <script>
      //alert(getCookie("token"))
      layui.use('layer', function(){
          var $ = layui.$ //由于layer弹层依赖jQuery，所以可以直接得到
              ,layer = layui.layer;
          var html="";
          var userName="";
          //console.log("token1:"+ getCookie("token"));
          $.ajax({
              type: "POST",
              url: "/selectUserPower"  //这里是你的接口数据 示例 {"msg":"success","code":0,"data":[{"mid":8,"mname":"财务管理","pmid":0,"url":null,"icons":"layui-icon  layui-icon-rmb","sort":0,"childList":[{"mid":9,"mname":"财务视图","pmid":8,"url":"/views/finance/index.html","icons":null,"sort":0,"childList":null},{"mid":12,"mname":"财务配置","pmid":8,"url":"/views/finance/setting.html","icons":null,"sort":0,"childList":null},{"mid":10,"mname":"财务进账","pmid":8,"url":"/views/finance/income.html","icons":null,"sort":1,"childList":null},{"mid":11,"mname":"财务结算","pmid":8,"url":"/views/finance/settlement.html","icons":null,"sort":2,"childList":null}]},{"mid":5,"mname":"酒店管理","pmid":0,"url":null,"icons":"layui-icon layui-icon-tree","sort":1,"childList":[{"mid":6,"mname":"酒店列表","pmid":5,"url":"/views/hotel/hotelList.html","icons":null,"sort":0,"childList":null},{"mid":7,"mname":"酒店导入","pmid":5,"url":"/views/hotel/importHotel.html","icons":null,"sort":0,"childList":null}]},{"mid":1,"mname":"系统管理","pmid":0,"url":null,"icons":"layui-icon layui-icon-set","sort":2,"childList":[{"mid":3,"mname":"权限组管理","pmid":1,"url":"/views/admin/role/userPower.html","icons":null,"sort":0,"childList":null},{"mid":2,"mname":"管理员管理","pmid":1,"url":"/views/admin/user/userList.html","icons":"","sort":1,"childList":null},{"mid":4,"mname":"分类管理","pmid":1,"url":"/views/admin/type/typeList.html","icons":null,"sort":1,"childList":null}]}],"userName":"admin"}
              dataType: "json",
              async: false,
              success: function(res){
                  if(res.code==-1){
                      window.location.href="/views/login.html"  //这里是session失效返回登录的 后台配置 不要在意
                  }else{
                      var data=res.data;
                      userName=res.userName;  //后台传的登录人 不要的话后台可以不传
                      var t=0;
                      for (var i=0;i<data.length;i++){  //主菜单的数据
                          html+='<li data-name="home" class="layui-nav-item">
'+
                              '<a href="javascript:;" lay-tips="'+data[i]["mname"]+'" lay-direction="2">
' +
                              '                <i class="'+data[i]["icons"]+'"></i>
' +
                              '                <cite>'+data[i]["mname"]+'</cite>
' +
                              '              </a>
';
                          var child=data[i]["childList"];
                          if(child.length!=0){
                              html+='<dl class="layui-nav-child">
';
                          }

                          for(var j=0;j<child.length;j++){  //二级菜单的数据 如果你有三级菜单的话 我就没法了 
                              if(t==0){
                                  if(j==0){
                                      console.log(child[j]["url"])
                                      t=1;
                                      $("#fIndex").attr("src",child[j]["url"]+"?token="+getCookie("token"))
                                  }
                              }

                              html+='  <dd data-name="home" class="">
' +
                                  '                      <a lay-href="'+child[j]["url"]+'?token='+getCookie("token")+'">'+child[j]["mname"]+'</a>
' +
                                  '                      </dd>
'
                          }
                          if(child.length!=0){
                              html+='</dl>
';
                          }
                          html+='</li>';
                      }

                  }

              }

          });


          $("#userName").html(userName);

          $("#LAY-system-side-menu").html(html)

          var pw='<a lay-href="/views/system/password.html?token='+getCookie("token")+'" style="text-align: center;">修改密码</a>';
          $("#updatePassword").html(pw)
      });

  layui.config({
    base: '../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use('index',function () {
      var $ = layui.$
      $("#logout").click(function () {
          clearCookie("token");
          window.open("/login.html","_top")
      })
  });
  </script>
</body>
</html>
    <!DOCTYPE html>
    <head>
      <meta charset="utf-8">
      <title>xxxxxxx</title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
      <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
      <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
    </head>
    <body class="layui-layout-body">
      
      <div id="LAY_app">
        <div class="layui-layout layui-layout-admin">
          <div class="layui-header">
            <!-- 头部区域 -->
            <ul class="layui-nav layui-layout-left">
              <li class="layui-nav-item layadmin-flexible" lay-unselect>
                <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                  <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                </a>
              </li>
              <li class="layui-nav-item" lay-unselect>
                <a href="javascript:;" layadmin-event="refresh" title="刷新">
                  <i class="layui-icon layui-icon-refresh-3"></i>
                </a>
              </li>
            </ul>
            <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
              <li class="layui-nav-item" lay-unselect>
                <a href="javascript:;">
                  <cite id="userName">物资管理员</cite>
                </a>
                <dl class="layui-nav-child">
       <!--           <dd><a lay-href="set/user/info.html">基本资料</a></dd>-->
                  <dd id="updatePassword"><!--<a lay-href="users/password.html">修改密码</a>--></dd>
                  <hr>
                  <dd id="logout" style="text-align: center;"><a style="cursor: pointer">退出</a></dd>
                </dl>
              </li>

            </ul>
          </div>
          
          <!-- 侧边菜单 -->
          <div class="layui-side layui-side-menu">
            <div class="layui-side-scroll">
              <div class="layui-logo" lay-href="home/console.html">
                <span>云酒店平台OTA1.1</span>
              </div>
              
              <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
    				
              </ul>
            </div>
          </div>

          <!-- 页面标签 -->
          <div class="layadmin-pagetabs" id="LAY_app_tabs">
            <!--<div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>-->
            <!--<div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>-->
            <div class="layui-icon layadmin-tabs-control layui-icon-down">
              <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
                <li class="layui-nav-item" lay-unselect>
                  <a href="javascript:;"></a>
                  <dl class="layui-nav-child layui-anim-fadein">
                    <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                    <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                    <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
                  </dl>
                </li>
              </ul>
            </div>
            <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
              <ul class="layui-tab-title" id="LAY_app_tabsheader">
                <li lay-id="home/console.html" lay-attr="home/console.html" class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
              </ul>
            </div>
          </div>
          
          
          <!-- 主体内容 -->
          <div class="layui-body" id="LAY_app_body">
            <div class="layadmin-tabsbody-item layui-show">
              <iframe src="" frameborder="0" class="layadmin-iframe" id="fIndex"></iframe>
            </div>
          </div>
          
          <!-- 辅助元素，一般用于移动设备下遮罩 -->
          <div class="layadmin-body-shade" layadmin-event="shade"></div>
        </div>
      </div>

      <script src="../layuiadmin/layui/layui.js"></script>
      <script>
          //alert(getCookie("token"))
          layui.use('layer', function(){
              var $ = layui.$ //由于layer弹层依赖jQuery，所以可以直接得到
                  ,layer = layui.layer;
              var html="";
              var userName="";
              //console.log("token1:"+ getCookie("token"));
              $.ajax({
                  type: "POST",
                  url: "/selectUserPower"  //这里是你的接口数据 示例 {"msg":"success","code":0,"data":[{"mid":8,"mname":"财务管理","pmid":0,"url":null,"icons":"layui-icon  layui-icon-rmb","sort":0,"childList":[{"mid":9,"mname":"财务视图","pmid":8,"url":"/views/finance/index.html","icons":null,"sort":0,"childList":null},{"mid":12,"mname":"财务配置","pmid":8,"url":"/views/finance/setting.html","icons":null,"sort":0,"childList":null},{"mid":10,"mname":"财务进账","pmid":8,"url":"/views/finance/income.html","icons":null,"sort":1,"childList":null},{"mid":11,"mname":"财务结算","pmid":8,"url":"/views/finance/settlement.html","icons":null,"sort":2,"childList":null}]},{"mid":5,"mname":"酒店管理","pmid":0,"url":null,"icons":"layui-icon layui-icon-tree","sort":1,"childList":[{"mid":6,"mname":"酒店列表","pmid":5,"url":"/views/hotel/hotelList.html","icons":null,"sort":0,"childList":null},{"mid":7,"mname":"酒店导入","pmid":5,"url":"/views/hotel/importHotel.html","icons":null,"sort":0,"childList":null}]},{"mid":1,"mname":"系统管理","pmid":0,"url":null,"icons":"layui-icon layui-icon-set","sort":2,"childList":[{"mid":3,"mname":"权限组管理","pmid":1,"url":"/views/admin/role/userPower.html","icons":null,"sort":0,"childList":null},{"mid":2,"mname":"管理员管理","pmid":1,"url":"/views/admin/user/userList.html","icons":"","sort":1,"childList":null},{"mid":4,"mname":"分类管理","pmid":1,"url":"/views/admin/type/typeList.html","icons":null,"sort":1,"childList":null}]}],"userName":"admin"}
                  dataType: "json",
                  async: false,
                  success: function(res){
                      if(res.code==-1){
                          window.location.href="/views/login.html"  //这里是session失效返回登录的 后台配置 不要在意
                      }else{
                          var data=res.data;
                          userName=res.userName;  //后台传的登录人 不要的话后台可以不传
                          var t=0;
                          for (var i=0;i<data.length;i++){  //主菜单的数据
                              html+='<li data-name="home" class="layui-nav-item">
'+
                                  '<a href="javascript:;" lay-tips="'+data[i]["mname"]+'" lay-direction="2">
' +
                                  '                <i class="'+data[i]["icons"]+'"></i>
' +
                                  '                <cite>'+data[i]["mname"]+'</cite>
' +
                                  '              </a>
';
                              var child=data[i]["childList"];
                              if(child.length!=0){
                                  html+='<dl class="layui-nav-child">
';
                              }

                              for(var j=0;j<child.length;j++){  //二级菜单的数据 如果你有三级菜单的话 我就没法了 
                                  if(t==0){
                                      if(j==0){
                                          console.log(child[j]["url"])
                                          t=1;
                                          $("#fIndex").attr("src",child[j]["url"]+"?token="+getCookie("token"))
                                      }
                                  }

                                  html+='  <dd data-name="home" class="">
' +
                                      '                      <a lay-href="'+child[j]["url"]+'?token='+getCookie("token")+'">'+child[j]["mname"]+'</a>
' +
                                      '                      </dd>
'
                              }
                              if(child.length!=0){
                                  html+='</dl>
';
                              }
                              html+='</li>';
                          }

                      }

                  }

              });


              $("#userName").html(userName);

              $("#LAY-system-side-menu").html(html)

              var pw='<a lay-href="/views/system/password.html?token='+getCookie("token")+'" style="text-align: center;">修改密码</a>';
              $("#updatePassword").html(pw)
          });

      layui.config({
        base: '../layuiadmin/' //静态资源所在路径
      }).extend({
        index: 'lib/index' //主入口模块
      }).use('index',function () {
          var $ = layui.$
          $("#logout").click(function () {
              clearCookie("token");
              window.open("/login.html","_top")
          })
      });
      </script>
    </body>
    </html>
  • 相关阅读:
    Oracle,第六周
    JAVA创建对象的几种方式
    深拷贝和浅拷贝
    Facade
    Adapter
    低谷过去了
    Oracle,第五周
    Command
    Singleton
    mybatis自动生成mapping和实体
  • 原文地址：https://www.cnblogs.com/ushowtime/p/11799639.html
Copyright © 2011-2022 走看看