layout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 1jQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<!-- 2css资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
<!-- 3图标资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
<!-- 4easyui的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<!-- 5本地语言包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
//创建打开新标签的按钮
$(".easyui-linkbutton").click(function(){ var tab_title=$(this).text();
var tab_href=$(this).attr("title");
if($("#tt").tabs("exists",tab_title))
{
$("#tt").tabs("select",tab_title)
}
else
{
$("#tt").tabs('add',{
title:tab_title,
closable:true,
href:tab_href }) }
}); }) </script> </head>
<body class="easyui-layout">
<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 id="ac" class="easyui-accordion" data-options="fit:true,selected:1"> <div title="员工信息"><a id="add_tab" style="width:100%;align:center" href="#"></a><br>
<a class="easyui-linkbutton" title="addUser.html" style="align:center; width:100% " href="#">添加新员工</a><br>
<a class="easyui-linkbutton" title="edit.html" style="align:center; width:100% " href="#">修改员工</a><br>
<a class="easyui-linkbutton" title="delete.html" style="align:center; width:100% " href="#">删除员工</a><br>
<a class="easyui-linkbutton" title="productlist.html" style="align:center; width:100% " href="#">产品列表</a><br>
<a class="easyui-linkbutton" style="align:center; width:100% " href="#">查找新员工</a><br>
</div>
<div title="考勤信息">这是考勤信息模块</div>
<div title="招聘信息">这是招聘信息模块</div>
<div title="薪酬信息">这是薪酬信息模块</div>
<div title="员工信息">这是员工信息模块</div>
</div> </div>
<div data-options="region:'center',title:'center title',fit:true" style="padding:5px;background:#eee;" >
<div id="tt" class="easyui-tabs" data-options="fit:true" style="width:500px;align:center;height:250px;" >
<div title="Tab1" style="padding:20px;width:100%;align:center;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;width:100%;align:center;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;width:100%;align:center;">
tab3
</div>
</div>
</div> </body>
</html>
layout的更多相关文章
- 前端框架 EasyUI (2)页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- Android Studio分类整理res/Layout中的布局文件(创建子目录)
res/layout中的布局文件太杂,没有层次感,受不了的我治好想办法解决这个问题. 前几天看博客说可以使用插件分组,可惜我没找到.知道看到另一篇博客时,才知道这个方法不能用了. 不能用插件,那就手动 ...
- 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]
如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...
- [Android]异步 layout inflation(翻译)
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5829809.html 异步 layout inflation ...
- Express 4 handlebars 不使用layout写法
Express 4 handlebars 不使用layout写法 Express node nodejs handlebars layout 最近刚开始学习使用nodejs. 使用express搭建了 ...
- Android在layout xml中使用include
Android include与merge标签使用详解 - shuqiaoniu的博客 - 博客频道 - CSDN.NEThttp://blog.csdn.net/shuqiaoniu/article ...
- Duilib源码分析(五)UI布局—Layout与各子控件
接下来,继续分析duilib之UI布局Layout,目前提供的布局有:VerticalLayout.HorizontalLayout.TileLayout.TabLayout.ChildLayout分 ...
- compass reset和layout [Sass和compass学习笔记]
reset 可以重置浏览器的的html的默认样式,因为各个浏览器对有些元素解析差别很大 通过重置样式可以让样式的浏览器兼容 更简单 使用方法简单 @import "compass/reset ...
- 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理
系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)— ...
- Qt And MFC UI Layout
界面布局 起初,计算机的交互是通过输入的代码进行的, 慢慢的有了图形之后, 就开始了图形界面的交互. 目前来说还有语音交互, 视频交互等多媒体的交互. 不管哪一种交互, 最终在计算机的角度都是信号的输 ...
随机推荐
- 如何在Meteor中使用npm模块?
首先,请在AtmosphereJs上搜索有无相关的封装包.尽量采用已有的封装包,而不是自己封装. 有两种方法在项目中使用来自npm的模块. 封装为Meteor包并在项目中添加包.使用meteor cr ...
- Good Bye 2016 - A
题目链接:http://codeforces.com/contest/750/problem/A 题意:有n场比赛要打,第i场比赛需要花i*5分钟来完成,比赛从20:00开始.然后新年派对24:00开 ...
- 谈谈PHP代码规范
[转] http://www.syyong.com/php/Talk-about-PHP-code-specification.html 我向往这样一个php世界,里面没有代码规范之争.你我都一样,都 ...
- 二分+DP+Trie HDOJ 5715 XOR 游戏
题目链接 XOR 游戏 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- shell中${ } 的一些特异功能
假设我们定义了一个变量为: file=/dir1/dir2/dir3/my.file.txt 我们可以用 ${ } 分别替换获得不同的值: ${file#*/}:拿掉第一条 / 及其左边的字符串:di ...
- margin:0 auto;不居中
margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码 ...
- Data对象
var myDate = new Date(); Date()返回当日的日期 例如今天是2016/8/19 getFullYear()返回当前日期的年 myDate.getFullYear() 201 ...
- SElinux对一些服务关系的影响
kerberos 允许系统使用kerberos setsebool -P allow_kerberos 1 setsebool -P krb5kdc_disable_trans 1 service ...
- Hibernate criteria 增加排序项
- python反射问题
python中的__import__是以字符串的形式反射导入模块并以字符串的形式执行函数