<!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的更多相关文章

  1. 前端框架 EasyUI （2）页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  2. Android Studio分类整理res/Layout中的布局文件(创建子目录)

    res/layout中的布局文件太杂,没有层次感,受不了的我治好想办法解决这个问题. 前几天看博客说可以使用插件分组,可惜我没找到.知道看到另一篇博客时,才知道这个方法不能用了. 不能用插件,那就手动 ...

  3. 如何在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 ...

  4. [Android]异步 layout inflation（翻译）

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5829809.html 异步 layout inflation ...

  5. Express 4 handlebars 不使用layout写法

    Express 4 handlebars 不使用layout写法 Express node nodejs handlebars layout 最近刚开始学习使用nodejs. 使用express搭建了 ...

  6. Android在layout xml中使用include

    Android include与merge标签使用详解 - shuqiaoniu的博客 - 博客频道 - CSDN.NEThttp://blog.csdn.net/shuqiaoniu/article ...

  7. Duilib源码分析(五)UI布局—Layout与各子控件

    接下来,继续分析duilib之UI布局Layout,目前提供的布局有:VerticalLayout.HorizontalLayout.TileLayout.TabLayout.ChildLayout分 ...

  8. compass reset和layout [Sass和compass学习笔记]

    reset 可以重置浏览器的的html的默认样式,因为各个浏览器对有些元素解析差别很大 通过重置样式可以让样式的浏览器兼容 更简单 使用方法简单 @import "compass/reset ...

  9. 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理

    系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)— ...

  10. Qt And MFC UI Layout

    界面布局 起初,计算机的交互是通过输入的代码进行的, 慢慢的有了图形之后, 就开始了图形界面的交互. 目前来说还有语音交互, 视频交互等多媒体的交互. 不管哪一种交互, 最终在计算机的角度都是信号的输 ...

随机推荐

  1. Delphi的三目运算 ifthen 和iif

    system.Math和system.StrUtils都有IfThen方法, 返回字符串和 返回 数值型 system.Math.IfThen(vehicle.MILE=0,0,StrToFloat( ...

  2. Arc GIS engine10.2与VS2012的安装及匹配步骤

      本文章已收录于:   .embody { padding: 10px 10px 10px; margin: 0 -20px; border-bottom: solid 1px #ededed } ...

  3. [资料分享]组件方式开发 Web App全站

  4. 解决svn uuid变更问题

    简介: 今天在snv根目录下重新定位上传的url,更改后出现如下错误 .可以看到,原来Repository创建者的uuid是前者,而现在我操作的是后者的uuid.因此,目前的操作办法是 使用相关命令更 ...

  5. 半吊子学习Swift--天气预报程序-准备工作

    MacBookPro买完快半年了,当初想着买个本本学点ios,买完就看了几天的教程[捂脸],最近发现人都要废了,想重新开始学习Swift并将每天的进程通过博客发布来督促自己. 由于文笔不好,接触Swi ...

  6. Easyui Ajax验证Form表单。。。

        今天做项目用到easyui Ajax验证表单.本想自定义一个easyui的验证,查资料发现easyui 自带了一个通用的验证!见以下下截图. 后台返回值 true验证通过,返回false验证失 ...

  7. css 大话盒子模型

    什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 ...

  8. lua的C库

    在云风的ejoy2d里是没有dll和so之类的东西的, 所有的C扩展都是类似这样写的: int ejoy2d_shader(lua_State *L) {      luaL_Reg l[] = { ...

  9. browser-sync

    引入 大家写网页的时候,肯定都遇到这种情况,每次用sublime写完都要返回浏览器,刷新页面,而这个工具正好解决了这个问题,提高前端开发效率,这是一个npm的包 browser-sync browse ...

  10. Activemq mqtt 点对点聊天实现（转载）

    我这想到一个点对点聊天的方法,不用没割人都建立一个topic了,思路还是自定义一个分发策略,具体如下: 1.  建立一个topic,所有人都用匹配订阅的方式订阅以该topic为头的topic,例如:所 ...