从前端到后台(五)---后台管理结构的搭建

　　前一篇文章说了左侧菜单的搭建，参照http://www.cnblogs.com/blue-wz/articles/7400667.html，今天决定写一下右侧页面显示的功能；

　　从前面的文章我们了解了数据库中每个菜单都有一个url字段，对应的是左侧菜单点击显示的页面。还记得在MenuTree里面，当我们点击的$(target)=="LEFTTREENODE"即子菜单时候，我们的处理是this.freshTag($(target));而this.freshTag方法主要是调用了myBar.freshTag($e.attr("id"),$e.html(),url)方法。myBar就是右侧显示页面的封装，稍后我们实现myBar的时候，会在它的内部生成MyTag。

　　MyTag是点击菜单生成的标签，用来对应左侧菜单和操作MyBar页面，参照下图：

　　下面我们主要写一下MyTag和myBar的实现过程：

function MyTag(id,name,url,bar){
    this.id = id;
    this.name = name;
    this.url = url;
    this.bar = bar;
    this.$tagDiv = null;
    this.$conDiv = null;
    this.init = function(){
        //创建要显示标签的元素和关闭标签的按钮
        this.$tagDiv = $("<myTag tagid=\'"+id+"\' class=\'curMyTag\'>"+name+"<tagCloseBtn>✖</tagCloseBtn></myTag>").appendTo(bar.$barDiv);
        //创建容纳页面数据的容器元素，并添加到bar的容器元素
        this.$conDiv = $("<myTagCon id=\'tagCon_"+id+"\' class=\'curMyTagCon\'></myTagCon>").appendTo(bar.$conDiv);
        //请求url，填充数据并显示
        this.showAndFillData();
        //每new一次MyTag（即每点击一次菜单），都会把bar.tagsLength+1,计算打开的标签数量，超过规定数量会提示
        bar.tagsLength = bar.tagsLength+1;
        //把当前MyTag对象放到bar的barTags对象里面，key就是当前的菜单id
        bar.barTags[id] = this;
    };
    this.init();
}
MyTag.prototype.showAndFillData = function(){
    this.fillData();
    this.show();
}
//向当前菜单的url发起请求，并将请求到的数据填入$conDiv内
MyTag.prototype.fillData = function(){
    MyCircle.show();
    var self = this;
    $.ajax({
      type:\'POST\',
      url:prefix+this.url,
      data:{},
      success:function(data){
          self.$conDiv.html(parseContent(data));
        MyCircle.hide();
      },
      error:function(data){
        MyCircle.hide();
          alert("页面加载异常\n可能是菜单地址配置错误\n请联系管理员");
      }
    });
}
//当前标签和当前页面都移除
MyTag.prototype.close = function(){
    this.$conDiv.remove();
    this.$tagDiv.remove();
}
//当前bar对象的curTag就是当前的标签对象
MyTag.prototype.show = function(){
    this.bar.curTag = this;
    //当前标签高亮，兄弟标签元素调灰
    this.$tagDiv.addClass("curMyTag").siblings(".curMyTag").removeClass("curMyTag");
    //当前页面容器元素显示，兄弟页面容器元素隐藏
    this.$conDiv.removeClass("hide").siblings(":not(.hide)").addClass("hide");
}

function MyBar(){
    this.$barDiv = $("#myBar");
    this.$conDiv = $("#myFrame");
    this.barTags = {};
    this.tagsLength = 0;
    this.curTag = null;
    this.prevTag = null;
    this.init();
}

MyBar.prototype.init = function(){
    var self = this;
    this.$barDiv.click(function(e){
        var target = e.target;
        var $target = $(e.target);
        //如果点击的是标签元素
        if(target.nodeName == "MYTAG"){
            //若果当前标签是选中标签，就不操作.
            if($target.hasClass("curMyTag")) return;
            //这里的$target.attr("tagid")就是菜单的id，这步的目的是使左侧菜单对应当前选中的标签。
            self.showTag($target.attr("tagid"));
            return;
        }
        //如果选中的是标签的关闭按钮，就关闭当前标签和页面
        if(target.nodeName == "TAGCLOSEBTN"){
            self.closeTag($target.parent().attr("tagid"));
        }
    });
}
MyBar.prototype.showTag = function(tagId){
    //高亮当前标签
    this.barTags[tagId].show();
    //高亮当前标签对应的菜单
    leftTree.changeCurNodeOuter(tagId.substring(tagId.indexOf("_")+1,tagId.length));
}
MyBar.prototype.closeTag = function(tagId){
    //关闭当前标签
    this.barTags[tagId].close();
    //显示下一页面
    this.showPrev(tagId);
}
//处理显示下一页面的方法
MyBar.prototype.showPrev = function(tagId){
    this.tagsLength = this.tagsLength -1;
    if(this.curTag.id != tagId){
        delete this.barTags[tagId];
        return;
    }
    var prev = "";
    for(var key in this.barTags){
        if(key!=tagId){
            prev = key;
            continue;
        }
        if(!prev){
            continue;
        }
        break;
    }
    delete this.barTags[tagId];
    prev && this.barTags[prev].show();
}

//点击左侧菜单，即执行此方法
MyBar.prototype.freshTag = function(id,name,url){
    //从barTags对象里面取出当前的MyTag对象
    var tag = this.barTags[id];
    //这里的意思是如果已经点击过当前菜单，右侧标签是存在的，再点击的话就执行showAndFillData,重新加载一次；不存在的话即new一个；
    if(tag){
//        tag.show();
        tag.showAndFillData();
        return;
    }
    //打开的标签超过10个会提示，并return，不在打开新的标签
    if(this.tagsLength>10){
        alert("标签页过多，请先关闭一部分标签页");
        return;
    }
    //每次点击左侧菜单，都会生成对应的myTag标签,最后一个参数是把当前的MyBar传给myTag标签
    new MyTag(id,name,url,this);    
}

　　写到这里，我觉得有必要把jsp页面的所有代码展示一下。这个项目暂时分为三个jsp页面，header、index和footer。下面分别是三个jsp的代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE>
<html>
  <head>
    <title>个人平台</title>
    <link rel="stylesheet" type="text/css" href="<c:url value=\'/res/css/style.css\'/>" />
    <link rel="stylesheet" type="text/css" href="<c:url value=\'/res/css/jquery-ui.min.css\'/>" />
    <script type="text/javascript">
        var fromURI="${fromURI}";
        var prefix = "<c:url value=\'/\'/>";
        if(prefix.charAt(prefix.length-1)=="/") prefix = prefix.substring(0,prefix.length-1);
        var myBar = null;
        var leftTree = null;
    </script>
    <script type="text/javascript" src="<c:url value=\'/res/js/jquery.js\'/>"></script>
    <script type="text/javascript" src="<c:url value=\'/res/js/jquery-ui.min.js\'/>"></script>
    <script type="text/javascript" src="<c:url value=\'/res/js/defaut.js\'/>"></script>
    <script type="text/javascript" src="<c:url value=\'/res/js/Check.js\'/>"></script>
    <script type="text/javascript" src="<c:url value=\'/res/js/index.js\'/>"></script>
    <script type="text/javascript" src="<c:url value=\'/res/js/MyBar.js\'/>"></script>
    <script type="text/javascript" src="<c:url value=\'/res/js/MyTable.js\'/>"></script>
    <script type="text/javascript" src="<c:url value=\'/res/js/MyPager.js\'/>"></script>
    <script type="text/javascript" src="<c:url value=\'/res/js/MyUpload.js\'/>"></script>
    <script type="text/javascript">
        $(function(){
            myBar = new MyBar();
            leftTree = new MenuTree("leftTree","<c:url value=\'/menu/getMenuTree\'/>");
            var cur = new Date().getHours();
            $("#amOrPm").html(cur<8?"早上":(cur<12?"上午":(cur<18?"下午":"晚上")));
            //console.log(${sysUser.auths});
            $(".addUser").click(function(){
                var self = $(this);
                $.post("<c:url value=\'/sysUser/addUser\'/>",null,function(data){
                    if(data.msg) self.next().text(data.msg);
                },"json")
            })
        });
    </script>  
  </head>
  <body>
   <header>
        <platName>wz管理平台</platName>
        <!-- 从当前session中拿到登陆的用户 -->
        <div id="header_top">　　　
            <span id=\'amOrPm\'></span>好，
            ${sysUser.name}　
            <a class="logOutALink" href="<c:url value=\'/sys/logout\'/>">退出</a>
        </div>
        <!-- 右侧myBar和MyTag的容器 -->
        <myBar id="myBar"></myBar>
    </header>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="header.jsp"></jsp:include>
<style>
    .wellcome{font-size:22px;color:#48a;text-align:center;border:5px solid #eee;margin-top:10px;height:150px;border-radius:10px;}
</style>
<div id="leftTree"></div>
<div id="myFrame">
    <div class="wellcome">
        <span>个人平台</span>
        <div>
            <button class="addUser">添加用户页面</button>
            <div></div>
        </div>
    </div>
</div>
<jsp:include page="footer.jsp"></jsp:include>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<footer id="footer">
    © 上海御付信息科技有限公司 版权所有
</footer>
<script type="text/javascript">
    var MyCircle = {
        $hidder:null,
        $shower:null,
        init:function(){
            MyCircle.$hidder = createElement("div","hidder sk-circle_hidder").css("display","none").appendTo($("body"));
            MyCircle.$shower = $("<div class=\'sk-circle_shower\'></div>").css("display","none").appendTo($("body"));
            var $circleDiv = createElement("div","sk-circle").appendTo(MyCircle.$shower);
            for(var i=1;i<13;i++){
                createElement("div","sk-child").addClass("sk-circle"+i).appendTo($circleDiv);
            }
            createElement("span","","亲，稍等......").appendTo(MyCircle.$shower);
        },
        showDiv:function(flag){
            MyCircle.$hidder.css("display",flag?"":"none");
            MyCircle.$shower.css("display",flag?"":"none");
        },
        show:function(){
            MyCircle.$shower.css("left",((document.body.offsetWidth/2)-60)+"px");
            MyCircle.$shower.css("top",((document.body.offsetHeight/2)-50)+"px");
            MyCircle.showDiv(true);
        },
        hide:function(){
            MyCircle.showDiv(false);
        }
    }
    MyCircle.init();
    var $body = $("body");
    var $myFrame = $("#myFrame");
    var $leftTree= $("#leftTree");
    var $window = $(window).resize(resize);
    var resizeCh = null;
    function resize(){
    }
    $(function(){
        //resize();
    });
</script>

　　上面虽然是3个jsp，但是都是在一个body体里面，这里用到了jsp页面的jsp:include指令。heder.jsp里面一些defalut.js、MyTable.js、MyPager.js等对本项目没有影响，以后的文章会有提到。

　　最后，看一下实现效果：