首頁 > 開發者 > 網站開發

Jquery-ui後台管理(2)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

下面主要是後台首頁的布局。

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; 
}


 


Jquery-ui後台管理(2)

                

                    
本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

                

            


                                                                    

        

            

                

                                        

                        

                    

                

                

    

                    
聯繫我們

            
該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

            

                如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至：
                info-contact@alibabacloud.com
                進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。
            

            



                

                

            

        

    

    


    


  

    

      

        

          

            

              
A Free Trial That Lets You Build Big!

              
 Start building with 50+ products and up to 12 months usage for Elastic Compute Service 

              

                Get Started for Free
              

            

          

          

            

              
    
                
  • 
                  
    Sales Support
    
                  
    
                    1 on 1 presale consultation
                  
    
                  
    
                    Chat
                    Contact Sales
                  
    
                
    • 
                
  • 
                  
    After-Sales Support
    
                  
    
                    24/7 Technical Support
                    6 Free Tickets per Quarter
                    Faster Response
                  
    
                  
    
                    Open a Ticket
                  
    
                
    • 
                
  • 
                  
    
                  
     Alibaba Cloud offers highly flexible support services tailored to meet your exact needs. 
    
                  
    
                    Learn More
                  
    
                
    •