首页 > 代码库 > Jquery-ui后台管理(2)

Jquery-ui后台管理(2)

2024-08-11 07:18:55   222人阅读

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

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="http://www.mamicode.com/jquery-2.1.4/jquery.min.js"></script>
<script src="http://www.mamicode.com/EasyUI1.4.4/jquery.easyui.min.js"></script>
<link href="http://www.mamicode.com/EasyUI1.4.4/themes/default/easyui.css" rel="stylesheet" />
<link href="http://www.mamicode.com/EasyUI1.4.4/themes/icon.css" rel="stylesheet" />
<script src="http://www.mamicode.com/js/admin.js"></script>
<link href="http://www.mamicode.com/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="http://www.mamicode.com/#">登出</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;   
}
 
Jquery-ui后台管理(2)






























        

            
                
                  
                
                

                    联系

                    我们