首页 > 代码库 > easyui 例子2
easyui 例子2
!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#ud{
margin-top:-5px;
}
ul li {
list-style:none;
}
ul li a {
color:blue;
text-decoration:none;
}
</style>
</head>
<script src="http://www.mamicode.com/jquery.min.js"></script>
<script src="http://www.mamicode.com/jquery.easyui.min.js"></script>
<script src="http://www.mamicode.com/locale/easyui-lang-zh_CN.js"></script>
<link href="http://www.mamicode.com/themes/default/easyui.css" rel="stylesheet" />
<link href="http://www.mamicode.com/themes/icon.css" rel="stylesheet" />
<body class="easyui-layout">
<div data-options="region:‘north‘,split:false,title:‘North Title‘," style="height:100px;"></div>
<div data-options="region:‘south‘,title:‘South Title‘,split:false" style="height:100px;"></div>
<div data-options="region:‘east‘,collapsible:false,split:false,iconCls:‘icon-reload‘,title:‘East‘," style="width:100px;"></div>
<div data-options="region:‘west‘,collapsible:false,split:false,title:‘West‘," style="width:180px;">
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
<div title="人员配置" 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="信息管理" data-options="iconCls:‘icon-reload‘,selected:true" style="padding:10px;">
<ul id="ud">
<li><a href="http://www.mamicode.com/#" class="munn" targeturl="HtmlPage2.html">教师介绍</a></li>
<li><a href="http://www.mamicode.com/#"class="munn">校友采访</a></li>
<li><a href="http://www.mamicode.com/#"class="munn">校园风采</a></li>
<li><a href="http://www.mamicode.com/#"class="munn">校长简介</a></li>
</ul>
</div>
<div title="领导介绍">
content3
</div>
</div>
</div>
<div data-options="region:‘center‘,split:false,title:‘center title‘" style="padding:5px;background:#eee;">
<div id="tabs" class="easyui-tabs" data-options="fit:true">
</div>
</div>
<script type="text/javascript">
$(‘.munn‘).click(function () {
$(‘#tabs‘).tabs(‘add‘, {
title: $(this).text(),
href: $(this).attr(‘targeturl‘),
closable: true,
});
})
</script>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<table class="easyui-datagrid" style=""
data-options="fit:true,singleSelect:true,collapsible:true,url:‘datagrid_data1.json‘,method:‘get‘">
<thead>
<tr>
<th data-options="field:‘bianhao‘,width:80">编号</th>
<th data-options="field:‘name‘,width:100">姓名</th>
<th data-options="field:‘sex‘,width:80,align:‘right‘">年龄</th>
<th data-options="field:‘age‘,width:80,align:‘right‘">性别</th>
<th data-options="field:‘hdry‘,width:250">获得荣誉</th>
<th data-options="field:‘beizhu‘,width:60,align:‘center‘">备注</th>
</tr>
</thead>
</table>
</body>
</html>
easyui 例子2