javascript 中 easyui的使用案列
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>easyui的應用</title>
<script src="easyui/jquery.min.js"></script>
<script src="easyui/jquery.easyui.min.js"></script>
<script src="easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="easyui/themes/icon.css">
<link rel="stylesheet" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" href="easyui的應用.css">
<script>
var _menu={"menus":[
{
"menuid":"1",
"menuname":"系統管理",
"children":[{
"menuid":"1-1","menuname":"菜單管理","url":"http://www.baidu.com"
},{
"menuid":"1-2","menuname":"用戶管理","url":"http://www.baidu.com"
},{
"menuid":"1-3","menuname":"角色管理","url":"http://www.baidu.com"
},{
"menuid":"1-4","menuname":"信息管理","url":"http://www.baidu.com"
},{
"menuid":"1-5","menuname":"內容管理","url":"http://www.baidu.com"
}]
},{
"menuid":"2",
"menuname":"會員管理",
"children":[{
"menuid":"2-1","menuname":"菜單管理","url":"http://www.baidu.com"
},{
"menuid":"2-2","menuname":"用戶管理","url":"http://www.baidu.com"
},{
"menuid":"2-3","menuname":"角色管理","url":"http://www.baidu.com"
},{
"menuid":"2-4","menuname":"信息管理","url":"http://www.baidu.com"
},{
"menuid":"2-5","menuname":"內容管理","url":"http://www.baidu.com"
}]
},{
"menuid":"3",
"menuname":"部門管理",
"children":[{
"menuid":"3-1","menuname":"菜單管理","url":"http://www.baidu.com"
},{
"menuid":"3-2","menuname":"用戶管理","url":"http://www.baidu.com"
},{
"menuid":"3-3","menuname":"角色管理","url":"http://www.baidu.com"
},{
"menuid":"3-4","menuname":"信息管理","url":"http://www.baidu.com"
},{
"menuid":"3-5","menuname":"內容管理","url":"http://www.baidu.com"
}]
}
]}
</script>
</head>
<body class="easyui-layout" style="overflow-y: hidden" scroll="no">
<div data-options="region:‘north‘,split:true" class="north">
<span style="margin-left: 10px;font-size: 16px">
我的小世界
<img src="blocks.gif" width="20px" height="20px" >
</span>
<span style="float: right;margin-right: 10px">
歡迎張三的到來
<a href="#">修改密碼</a>
<a href="#">安全退出</a>
</span>
</div>
<div data-options="region:‘south‘" class="south" style="height: 80px;">
<p>© 2017 上海百度公司 意見反饋 京公網安備11000002000001號</p>
</div>
<div data-options="region:‘west‘,split:true" style="width: 180px">
<div class="easyui-accordion" fit="true">
<!--導航部分-->
</div>
</div>
<div data-options="region:‘center‘,split:true" style="overflow: hidden">
<div class="easyui-tabs" fit="true" id="san">
<!--tab切換-->
</div>
</div>
</body>
<script>
$(".easyui-accordion").empty(); //初始化菜單
var menulist="";
$.each(_menu.menus,function(index,node){
// console.log(node)
menulist+=‘<div title="‘+node.menuname+‘" style="overflow:auto">‘
//<div title="系統管理">
menulist+=‘<ul>‘
$.each(node.children,function(ci,cn){
// console.log(cn)
menulist+="<li><a target=‘mykj‘ href=‘"+cn.url+"‘>"+cn.menuname+"</a></li>"
// <li><a href="">菜單管理</a></li>
})
menulist+="</ul></div>"
//</ul> </div>
})
// console.log(menulist)
$(".easyui-accordion").append(menulist)
// <div title="部門管理">
// <ul>
// <li><a href="">菜單管理</a></li>
// <li><a href="">菜單管理</a></li>
// <li><a href="">菜單管理</a></li>
// </ul>
// </div>
//菜單點擊
$(".easyui-accordion li a").click(function(){
var tabTitle = $(this).text()
var tabUrl = $(this).attr("href")
addtab(tabTitle,tabUrl)
})
//創建一個選項卡
function addtab(t,u){
if(!$("#san").tabs(‘exists‘,t)){ //如果選項卡的標題不存在
$("#san").tabs(‘add‘,{ //新增tab
title:t,
content:creatIframe(u), //選項卡的內容 來源於創建的框架
closable:true
})
}else{
$("#san").tabs("select",t) //如果選項卡存在 讓其處於選中狀態
}
}
//創建一個能夠打開URL的框架
function creatIframe(url){
var s="<iframe name=‘mykj‘ src=‘"+url+"‘ style=‘width:100%;height:100%‘></iframe>"
return s
}
</script>
</html>
//CSS部分
*{
font-size: 12px;
font-family: "微軟雅黑";
margin: 0;
padding: 0;
}
a{
color: black;
text-decoration: none;
}
a:hover{
color: red;
text-decoration: dashed;
}
.north{
height: 50px;
line-height: 50px;
overflow: hidden;
background: url("layout-browser-hd-bg.gif")repeat-x center 50%;
}
.north a{ font-size:15px;}
.south{
height: 30px;
line-height: 30px;
text-align: center;
background-color: #d9d9d9
}
效果：
圖片素材：
javascript 中 easyui的使用案列