首页 > Web开发 > 详细

css--layui树练习

时间:2020-02-03 00:31:27      阅读:125      评论:0      收藏:0      [点我收藏+]
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>老师端</title>
        <script src="js/jquery-1.11.1.js"></script>
        <script src="js/jquery-1.9.1.min.js"></script>
        <link rel="stylesheet" href="dtree2/layui/css/layui.css">
    </head>
    <body class="layui-layout-body">
        <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">
            </ul>
            <ul class="layui-nav layui-layout-right">
              <li class="layui-nav-item">
                <a href="javascript:;">
                  <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                  贤心
                </a>
                <dl class="layui-nav-child">
                  <dd><a href="">基本资料</a></dd>
                  <dd><a href="">安全设置</a></dd>
                </dl>
              </li>
              <li class="layui-nav-item"><a href="login.jsp">退了</a></li>
            </ul>
          </div>
            <!--2.左侧导航-->
          <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
              <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
              <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item leftdaohang" data-url="${pageContext.request.contextPath}/TeacherServlet?method=add1&teachername=<%= request.getParameter("name") %>" mytitle="添加课程"><a>添加课程</a></li>
                <li class="layui-nav-item leftdaohang" data-url="${pageContext.request.contextPath}/TeacherServlet?method=modify&teachername=<%= request.getParameter("name") %>" mytitle="修改个人信息"><a>修改个人信息</a></li>
                <li class="layui-nav-item leftdaohang" data-url="${pageContext.request.contextPath}/TeacherServlet?method=all1&teachername=<%= request.getParameter("name") %>" mytitle="浏览选课学生信息"><a>浏览选课学生信息</a></li>
              </ul>
            </div>
          </div>
          <!--3.右侧主体内容区-->
          <div class="layui-body">
              <!--tabs标签-->
              <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">
              <ul class="layui-tab-title">
               <!--<li class="layui-this">角色管理</li>-->
              </ul>
              <div class="layui-tab-content" style="height: 3000px;">
                <!--<div class="layui-tab-item layui-show" style="height: 1000px;">
                   
                </div>-->
                <!--<div class="layui-tab-item">
                    <iframe  style="width: 100%;height: 100%;" scrolling="no" src="6-1-fiction.jsp" ></iframe>
                </div>-->
              </div>
            </div> 
          </div>

           <!--4.底部固定区域-->
          <div class="layui-footer">
            <!-- 底部固定区域 -->
            © layui.com - 底部固定区域
          </div>
        </div>
        <script src="dtree2/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{
                      //没有相同tab
//                      alert("遍历的没有相同tab:"+mytitle);
                      element.tabAdd(demo, {
                        title:mytitle //用于演示
                        ,content: <iframe style="width: 100%;height: 100%;" scrolling="no" 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) : ‘‘;
              });
              
            });
        </script>
        <!--<script>
            var loginurl="http://localhost:8088/user/showUser";
            var mytoken=sessionStorage.getItem("gltoken");
            console.log("缓存的token:"+mytoken);
            netWorking();
            $(".leftdaohang").click(function(){
                var htmlurl=$(this).attr(data-url);
                var mytitle=$(this).attr(mytitle);
                addTab(mytitle);
                document.getElementById("myiframe").src=htmlurl;
            });
            function addTab (tabname) {
                 $(".layui-tab-title li").removeClass("layui-this");
                $(.layui-tab-title).append("<li>"+tabname+"</li>");
                  //触发事件                
            }
            function netWorking () {
                    $.ajax({
                        type:"post",    
                        url:loginurl,    
                        data:{ 
                             token:mytoken
                        }, 
                        success: function(res) {
                           console.log("home请求数据1.:"+res);
                              var datas=JSON.parse(res);
                        },
                        error:function() { 
                            alert("失败");
                       } 
                    });        
            }
        </script>-->
    </body>
</html>

效果

技术分享图片

 

css--layui树练习

原文:https://www.cnblogs.com/chenaiiu/p/12254265.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!