Jquery-ui后台管理(2)

下面主要是后台主页的布局。

html如下：



<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>后台管理页面</title>
    <script src="../jquery-2.1.4/jquery.min.js"></script>
<script src="../EasyUI1.4.4/jquery.easyui.min.js"></script>
<link href="../EasyUI1.4.4/themes/default/easyui.css" rel="stylesheet" />
<link href="../EasyUI1.4.4/themes/icon.css" rel="stylesheet" />
<script src="js/admin.js"></script>
<link href="css/admin.css" rel="stylesheet" />
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'header',split:true,noheader:true" style="height:60px;background:#666">
        <div class="logo">
            后台管理
        </div>
        <div class="logout">你好：xxx        |<a href="#">登出</a>  </div>
    </div>   
    
    
    <div data-options="region:'south',title:'footer',split:true,noheader:true" style="height:35px;line-height:30px;text-align:center">
        &copy  choi
    </div>   
  
    <div  id="accordion" data-options="region:'west',title:'导航',split:true,border:false,collapsible:false" style="width:180px;padding:0px;position:relative">
    
    </div>   
    <div data-options="region:'center'" style="">
        <div id="tabs">
            <div title="起始页" style="padding:0 10px;display:block">
                欢迎来到后台管理系统!
            </div>
        </div>
    </div>   
</body>  
</html>


 




js代码如下：




$(function () {
    $("#tabs").tabs({
        fit: true,
        border: false,


    });



    $("#accordion").accordion({
        //width: 500,
        //height: 500,
        fit: true,


        //  border: false,
        // animate: false,
        // multiple: true,
        selected: 1,


    });


    function addtabs(url) {                   新增tab
        if ($("#tabs").tabs("exists", url)) {
            $("#tabs").tabs("select", url)
        }
        else {
            $("#tabs").tabs(
           'add',
           {
               title: url,
               closable: true,
               //href:                   //显示的页面
           });
        }


    }


    //模拟左导航菜单
    for (var i = 0; i < 2; i++) {
        var content = $("<ul></ul>");
        for (var j = 0; j < 2; j++) {
            content.append("<li id='"+i.toString()+"_"+j.toString()+"'><a>aaaa</a></li>")
        }


        $('#accordion').accordion('add', {
            title: i.toString(),
            content: content,//'新内容',
            selected: false,
        });
    }
    $("#accordion ul  li").click(function () { addtabs(this.id) });
});




css代码如下：




body {
}


.logo {
    width: 180px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    float: left;
    color: #fff;
}


.logout {
    float: right;
    padding: 30px 15px 0 0;
    color: #fff;
}


a {
    color: #fff;
    text-decoration: none;
}


a:hover {
    text-decoration: underline;
    color: blue;
}


#accordion ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    fit: inherit;
    position: relative;


    background:#95B8E7;
}


#accordion li {
    text-align:center;
    padding: 0px;
    margin: 1px;
    font-size:18pt;
    color:black;
    border:1px,solid,#95B8E7;
    border-top:1px,solid,#95B8E7;
    background:#E0ECFF;
}


#accordion li a{  
      color:black;
      text-decoration:none;
}
#accordion li:hover{  
    background:#95B8E7;   
}




 






            

            
posted @ 
2016-08-30 01:29 
许轩霖 
阅读(1330) 
评论(0) 
编辑 
收藏 
举报