纯js写出一个页面：省去美工，前端。
省去整个前台和美工。
自带一套页面的样式，完成对用户的管理。
在Demo里面复制粘贴
这是一套样式
layout(布局)：东南西北中，调用就修改，实在不行查API
$(function(){
var p = $('body').layout('panel','west').panel({
onCollapse:function(){
alert('collapse');
}
});
});
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Border Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
var p = $('body').layout('panel','west').panel({
onCollapse:function(){
alert('collapse');
}
});
});
</script>
</head>
<body class="easyui-layout">
<div region="north" border="false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" collapsed="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</body>
</html>
split就是可以操纵分隔栏，collapsible折叠面板按钮
页面布局示例
左侧页面细化加工
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
function select(){
$('#aa').accordion('select','Title1');
}
var idx = 1;
function add(){
$('#aa').accordion('add',{
title:'New Title'+idx,
content:'New Content'+idx
});
idx++;
}
function remove(){
var pp = $('#aa').accordion('getSelected');
if (pp){
var title = pp.panel('options').title;
$('#aa').accordion('remove',title);
}
}
</script>
</head>
<body>
<h2>Accordion</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click on panel header to show its content.</div>
</div>
<div style="margin: 10px 0;">
<a href="#" class="easyui-linkbutton" onclick="select()">Select</a>
<a href="#" class="easyui-linkbutton" onclick="add()">Add</a>
<a href="#" class="easyui-linkbutton" onclick="remove()">Remove</a>
</div>
<div id="aa" class="easyui-accordion" style="width:700px;height:300px;">
<div title="Title1" iconCls="icon-ok" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" iconCls="icon-reload" selected="true">
<table class="easyui-datagrid"
url="datagrid_data2.json" border="false"
fit="true" fitColumns="true">
<thead>
<tr>
<th field="itemid" width="80">Item ID</th>
<th field="productid" width="100">Product ID</th>
<th field="listprice" width="80" align="right">List Price</th>
<th field="unitcost" width="80" align="right">Unit Cost</th>
<th field="attr1" width="150">Attribute</th>
<th field="status" width="50" align="center">Status</th>
</tr>
</thead>
</table>
</div>
<div title="Title3" style="padding:10px;">
content3
</div>
</div>
</body>
</html>
加工样式显示
测试类
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"
href="js/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/themes/icon.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.1.2.6.min.js"></script>
<script type="text/javascript" src='js/index.js'>
/* */
window.onload=function(){
$('#aa').accordion({
animate:false,
border:true
});
};
</script>
</head>
<!-- <body class="easyui-layout">
<div region="north" border="false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" collapsed="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</body> -->
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
</html>
接下来读取json文件
menu.json文件
{
"menus" : [{"icon" : "icon-sys","menuid" : "1","menuname" : "客户管理","url" : "","menus" : [
{"icon" : "icon-log","menuid" : "1_1","menuname" : "客户列表","url" : "views/customer.html"
},
{"icon" : "icon-log","menuid" : "1_1","menuname" : "客户拜访","url" : "views/salevisit.html"
}
]
}
]
}
样式展示01--去寻找Tabs（选项卡）
<script type="text/javascript">
var index = 0;
function addTab(){
index++;
$('#tt').tabs('add',{
title:'哈哈 ' + index,
content:'Tab Body ' + index,
iconCls:'icon-save',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}
</script>
