考勤系统主页的布局用的是easyui的Layout控件
Layout:布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。
<div id="cc" class="easyui-layout" style="width:600px;height:400px;"> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </div>
页面展示：
我们的考勤系统就是采用layout控件进行布局，还需要tabs选项卡
考勤系统我们仅需要上部，左部，中部
View Code
左侧导航我们使用linkbutton来建立标签，title指向要显示的界面，通过jQuery来控制点击事件
<a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-ok'" title="rikaoqinxinxi.jsp">日考勤信息</a><br>
tabs选项卡：选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。
<!-- 标签页 --> <div id="tt" class="easyui-tabs" style="width:100%;height:100%;background:url(images/background.png)"></div>
使用jQuery来控制标签页的打开
View Code
为linkbutton添加点击事件，首先我们要获取linkbutton的text值，传给tabs,使得新打开的标签页与linkbutton的名字相同，对应到相应的页面上，其次再控制新的标签页。
延伸阅读
- 云村系统个人感想 2023-04-15 14:11:20.08
- 一览图书管理系统 2023-04-15 10:53:04.617
- 健身房后台管理系统 2023-04-15 09:32:01.857
- 教务排课系统 2024-03-26 11:24:56.74
- 居然之家仓库管理系统 2023-04-08 15:51:54.733
- LOFT酒店预订系统 2023-04-08 15:39:38.123
- 云村系统 2023-04-08 13:49:33.69
- 医院订餐系统 2023-04-08 11:37:58.257
- 多敲代码，不断试错 2022-09-08 15:46:35.223
- 企业日程管理系统 2022-07-15 13:59:27.237
云村系统个人感想