Home > Developer > Web Develop
The following is mainly the layout of the background home page.
The HTML is as follows:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Admin Page </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"/>
<body class= "Easyui-layout" >
<div data-options= "region: ' North ', Title: ' Header ', split:true,noheader:true" style= "Height:60px;background: #666 ">
<div class= "logo" >
Background management
</div>
<div class= "Logout" > Hello: xxx |<a href= "#" > Logout </a> </div>
</div>
<div data-options= "region: ' South ', Title: ' Footer ', split:true,noheader:true" style= "height:35px;line-height : 30px;text-align:center ">
© Choi
</div>
<div id= "Accordion" data-options= "region: ' West ', title: ' Navigation ', 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= "Start Page" style= "padding:0 10px;display:block ">
Welcome to the Backstage management system!
</div>
</div>
</div>
</body>
The JS code is as follows:
$ (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) {new tab
if ($ ("#tabs"). Tabs ("exists", url)) {
$ ("#tabs"). Tabs ("select", URL)
}
else {
$ ("#tabs"). Tabs (
' Add ',
{
Title:url,
Closable:true,
HREF://page displayed
});
}
}
Simulate left navigation menu
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,//' new content ',
Selected:false,
});
}
$ ("#accordion ul li"). Click (function () {Addtabs (this.id)});
});
The CSS code is as follows:
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 Background Management (2)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
