layui搭建后台管理页-Sham@双目瞿

前面Sham做v1版小程序的时候，用简单使用layui搭建后台管理页，这个周末，把框架结构重新调整了下，主要是在顶部增加了选项卡，用于放置大类，然后下面左侧树形选项卡放置大类对应的小类，界面框架上基本实现和layui官网演示的差不多了，特记录分享下。

这里只放首页的代码，子页面的不放了，简单的就是首页点击选项卡之后，在首页内的iframe里直接打开对应的网址，如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>行政服务小程序-后台管理</title>
        <link rel="stylesheet" href="../public/layui/css/layui.css">
    </head>
    <body class="layui-layout-body">
	<!--判断是否已经登录，如果没有，跳转到登录页-->
      <?php
        session_start();
         if($_SESSION['admin']!=="admin"){echo "<script>location.href='adminlogin.php';</script>";
  }
  ?>
  <!--正式页面开始-->
        <div class="layui-layout layui-layout-admin">
          <!--1.头部区域-->
          <div class="layui-header">
            <div class="layui-logo">行政服务小程序</div>
            <!-- 头部区域（可配合layui已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
            	<li class="layui-nav-item showtab layui-this" data-id="setting"  mytitle="小程序设置"><a>小程序设置</a></li>
            	<li class="layui-nav-item showtab" data-id="staffs"  mytitle="员工管理"><a>员工管理</a></li>
            	<li class="layui-nav-item showtab" data-id="canteen"  mytitle="餐饮管理"><a>餐饮管理</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
           
              <li class="layui-nav-item"><a href="d48643a96a96925336b3ab966f72d583.php?logout">退出登录</a></li>
            </ul>
          </div>
            <!--2.左侧导航-->
          <div class="layui-side layui-bg-black"  style="width:210px;">
            <div class="layui-side-scroll">
              <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
              <ul class="layui-nav layui-nav-tree"  lay-filter="test">
              	<li class="layui-nav-item layui-nav-itemed" id="setting" name="tabs">
                  <a href="javascript:;">小程序设置</a>
                  <dl class="layui-nav-child">
                	<dd class="leftdaohang "  data-url="usercenter.php"  mytitle="个人中心"><a>个人中心</a></dd>
                	<dd class="leftdaohang"  data-url="canteen.php"  mytitle="餐饮服务"><a>餐饮服务</a></dd>
                  </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed" id="staffs" name="tabs" style="display:none;">
                  <a href="javascript:;">员工管理</a>
                  <dl class="layui-nav-child">
                	<dd class="leftdaohang" data-url="userlist.php" mytitle="已登记员工清单"><a>已登记员工清单</a></dd>
                    <dd class="leftdaohang" data-url="upstaffinfo.php" mytitle="上传更新员工信息"><a>上传更新员工信息</a></dd>
                  </dl>
                </li>
                <li class="layui-nav-item  layui-nav-itemed" id="canteen" name="tabs" style="display:none;">
                  <a href="javascript:;">餐饮管理</a>
                  <dl class="layui-nav-child">
                    <dd class="leftdaohang" data-url="foodmenus.php" mytitle="菜单明细"><a>菜单明细</a></dd>
                    <dd class="leftdaohang" data-url="upfoodmenu.php" mytitle="上传食堂菜单"><a>上传食堂菜单</a></dd>
                  </dl>
                </li>
               </ul>
            </div>
          </div>
          <!--3.右侧主体内容区-->
          <div class="layui-body" style="margin-bottom:-50px;" >
              <!--tabs标签-->
              <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">
              <ul class="layui-tab-title">
           <!-- <li class="layui-this" lay-id=""><i class="layui-icon">&#xe68e;</i> <cite>后台首页</cite></li>-->
              </ul>
              <div class="layui-tab-content">
              <!-- <div class="layui-tab-item layui-show">
						<iframe style='width: 100%;margin-top:0px;border:none;' height='550' src='setting/usercenter.php' ></iframe>
					</div>-->
              </div>
            </div> 
          </div>
          

        </div>
        <script src="../public/layui/layui.all.js"></script>
        <script>
            //添加事件执行
            layui.use('element', function(){
              var $ = layui.jquery
              ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
              //触发事件
              var active = {
                tabAdd: function(){
                  //新增一个Tab项
                  var htmlurl=$(this).attr('data-url');
                  var mytitle=$(this).attr('mytitle'); 
//                  alert("触发tab增加事件："+mytitle);
                  //先判断是否已经有了tab
                  var arrayObj = new Array();　//创建一个数组  
                      $(".layui-tab-title").find('li').each(function() {
                          var y = $(this).attr("lay-id"); 
                          arrayObj.push(y);
                   });
//                    alert("遍历取到的数组："+arrayObj);
                    var have=$.inArray(mytitle, arrayObj);  //返回 3,
                    if (have>=0) {
                        //tab已有标签
//                        alert("遍历的已有标签："+mytitle);
                      element.tabChange('demo', mytitle); //切换到当前点击的页面
                    } else{
                    	var h = $(window).height()-150;
                      //没有相同tab
//                      alert("遍历的没有相同tab："+mytitle);
                      element.tabAdd('demo', {
                        title:mytitle //用于演
                        ,content: '<iframe style="width: 100%;height:'+h+'px;margin-top:0px;border:none;" scrolling="auto" src='+htmlurl+' ></iframe>'
                        ,id: mytitle //实际使用一般是规定好的id，这里以时间戳模拟下
                      })
                      element.tabChange('demo', mytitle); //切换到当前点击的页面
                    }
                }
               
              };
             //这里是实现点击竖式选项卡，执行添加
              $(".leftdaohang").click(function(){
                var type="tabAdd";
                var othis = $(this);
//                var htmlurl=$(this).attr('data-url');
//                var mytitle=$(this).attr('mytitle');
                active[type] ? active[type].call(this, othis) : '';
              });
             //这里是实现点击顶部选项卡之后，显示或隐藏对应的竖式选项卡
             $('.showtab').click(function(){
             	var dataid=$(this).attr('data-id');
                var dataids=document.getElementById(dataid);
            	var tabs=document.getElementsByName('tabs');
		        $(tabs).hide();
		        $(dataids).show();
    		})
            });
        </script>
    </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

<!DOCTYPE html>

<html>

<head>

<title>行政服务小程序-后台管理</title>

</head>

<?php

session_start();

if($_SESSION['admin']!=="admin"){echo "<script>location.href='adminlogin.php';</script>";

}

<div class="layui-logo">行政服务小程序</div>

<li class="layui-nav-item showtab layui-this" data-id="setting" mytitle="小程序设置"><a>小程序设置</a></li>

</ul>

</ul>

</div>

<a href="javascript:;">小程序设置</a>

</dl>

</li>

<dd class="leftdaohang" data-url="userlist.php" mytitle="已登记员工清单"><a>已登记员工清单</a></dd>

<dd class="leftdaohang" data-url="upstaffinfo.php" mytitle="上传更新员工信息"><a>上传更新员工信息</a></dd>

</dl>

</li>

<dd class="leftdaohang" data-url="upfoodmenu.php" mytitle="上传食堂菜单"><a>上传食堂菜单</a></dd>

</dl>

</li>

</ul>

</div>

</ul>

<!-- <div class="layui-tab-item layui-show">

</div>-->

</div>

//添加事件执行

layui.use('element', function(){

var $ = layui.jquery

,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

//触发事件

var active = {

tabAdd: function(){

//新增一个Tab项

var htmlurl=$(this).attr('data-url');

var mytitle=$(this).attr('mytitle');

// alert("触发tab增加事件："+mytitle);

//先判断是否已经有了tab

var arrayObj = new Array();　//创建一个数组

$(".layui-tab-title").find('li').each(function() {

var y = $(this).attr("lay-id");

arrayObj.push(y);

});

// alert("遍历取到的数组："+arrayObj);

var have=$.inArray(mytitle, arrayObj); //返回 3,

if (have>=0) {

//tab已有标签

// alert("遍历的已有标签："+mytitle);

element.tabChange('demo', mytitle); //切换到当前点击的页面

} else{

var h = $(window).height()-150;

//没有相同tab

// alert("遍历的没有相同tab："+mytitle);

element.tabAdd('demo', {

title:mytitle //用于演

,content: '<iframe style="width: 100%;height:'+h+'px;margin-top:0px;border:none;" scrolling="auto" src='+htmlurl+' ></iframe>'

,id: mytitle //实际使用一般是规定好的id，这里以时间戳模拟下

})

element.tabChange('demo', mytitle); //切换到当前点击的页面

}

};

//这里是实现点击竖式选项卡，执行添加

$(".leftdaohang").click(function(){

var type="tabAdd";

var othis = $(this);

// var htmlurl=$(this).attr('data-url');

// var mytitle=$(this).attr('mytitle');

active[type] ? active[type].call(this, othis) : '';

});

//这里是实现点击顶部选项卡之后，显示或隐藏对应的竖式选项卡

$('.showtab').click(function(){

var dataid=$(this).attr('data-id');

var dataids=document.getElementById(dataid);

var tabs=document.getElementsByName('tabs');

$(tabs).hide();

$(dataids).show();

})

});

</script>

</body>

</html>

然后，自行下载layui之后，修改顶部调用css及中下部调用js的地址就可以，试试吧。

layui搭建后台管理页

相关推荐

评论抢沙发

最新评论

热门文章

热门标签

网站统计

如果你觉得文章好，请赏1杯速溶咖啡给Sham吧！

微信扫一扫打赏

相关推荐

评论 抢沙发

最新评论

热门文章

热门标签

网站统计

如果你觉得文章好，请赏1杯速溶咖啡给Sham吧！

微信扫一扫打赏

评论抢沙发