<!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="addUserhtml.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"  title="studentlist.html" 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'" 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. 新建android工程的时候eclipse没有生成MainActivity和layout布局

    一.新建android工程的时候eclipse没有生成MainActivity和layout布局 最近由于工作上的原因,开始学习Android开发,在入门的时候就遇到了不少的坑,遇到的第一个坑就是&q ...

  2. layout布局实例化

    实例化xml中的Layout布局在开发中经常会用到,有几种方法可以使用 1.在Activity中使用getLayoutInflater()方法 View layout = getLayoutInfla ...

  3. ASP.NET MVC3 系列教程 – 新的Layout布局系统

    原文地址:http://www.cnblogs.com/highend/archive/2011/04/18/asp_net_mvc3_layout.html I:回忆MVC2当中MasterPage ...

  4. Android 布局学习之——Layout(布局)具体解释二（常见布局和布局參数）

     [Android布局学习系列]   1.Android 布局学习之--Layout(布局)具体解释一   2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数)   ...

  5. 一天搞定CSS：支持IE的Layout布局--16

    1.BFC和Layout区别: BFC和Layout的作用是一样的,只是对浏览器的支持不同而已. BFC- -标准浏览器所具有的 Layout- -IE浏览器所具有的 BFC详解地址:http://b ...

  6. 解决thymeleaf layout布局不生效

    今天使用thymeleaf layout布局时总是不生效,特此把解决问题的步骤和几个关键点记录下来备忘. 一.检查依赖 1.thymeleaf必备maven依赖: <dependency> ...

  7. easyui中datagrid+layout布局

    1.掌握layout布局 首先,layout布局的具体使用可参考官网http://www.jeasyui.net/plugins/162.html layout布局分为东南西北中五个区域,如图我们将其 ...

  8. Springboot 使用thymeleaf模板layout布局

    使用layout布局前应该在pom文件中导入thymeleaf(dialect)依赖:如下 <properties> <project.build.sourceEncoding> ...

  9. easyui layout布局的属性说明

    layout布局的属性说明: 名称 类型 描述 默认值 fit boolean 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器.当在 'body' 标签上创建布局(layout ...

  10. Android开发中遇到的问题(二)——新建android工程的时候eclipse没有生成MainActivity和layout布局

    一.新建android工程的时候eclipse没有生成MainActivity和layout布局 最近由于工作上的原因,开始学习Android开发,在入门的时候就遇到了不少的坑,遇到的第一个坑就是&q ...

随机推荐

  1. 致青春——IT之路

    我的IT青春献给了笔试.面试.人事. 笔试 如果去问一个学生最怕的是什么,或许是考试.参加过高考的都知道,高三过的是什么日子,三天一大考,一天一小考. 当时没觉得什么,因为已经麻木了. 走入职场依然要 ...

  2. Introduction to OOC Programming Language

    Introduction to OOC Programming Language 文/akisann @ cnblogs.com / zhaihj @ github.com 本文同时发布在github ...

  3. c/c++性能优化--I/O优化（上）

    这节本想直接介绍I/O优化的,后来思考一下有必要对常用的I/O操作函数的特点介绍一下,这样要好些.下面就先介绍和I/O有关的库函数(以C99为准) 不同的操作系统有不同的文件管理方式,现行的主要有FA ...

  4. app wap开发mobile隐藏地址栏的js

    function scrolltol (){ setTimeout ( function () { , ) }, ); } window . onload = function () { if ( d ...

  5. 使用JDK中的安全包对数据进行加解密

    本文以使用DES对称加密算法为例使用jdk对数据进行加密解密. 首先需要了解Provider类,它是jdk引入的密码服务提供者概念,实现了Java安全性的一部分或者全部.Provider 可能实现的服 ...

  6. phper談談最近重構代碼的感受(3)

    这篇文章本来该和同一系列的文章一起写的,因为最近换工作的缘故滞后了.重构是非常细碎的叠加,有很多值得注意的地方. 1.消灭过多的临时变量. 有时候过多的无意义的临时变量,真心让人抓狂,特别是过了比较长 ...

  7. SQL 网文链接

    使用自定义表类型(SQL Server 2008) http://www.cnblogs.com/chenxizhang/archive/2009/04/28/1445234.html

  8. Golang爬虫示例包系列教程(一):pedaily.com投资界爬虫

    Golang爬虫示例包 文件结构 自己用Golang原生包封装了一个爬虫库,源码见go get -u -v github.com/hunterhug/go_tool/spider ---- data ...

  9. 办理英属哥伦比亚大学(本科)学历认证『微信171922772』UBC学位证成绩单使馆认证University of British Columbia

    办理英属哥伦比亚大学(本科)学历认证『微信171922772』UBC学位证成绩单使馆认证University of British Columbia Q.微信:171922772办理教育部国外学历学位 ...

  10. JS实现的在线推荐逻辑

    import _ from 'lodash';import cfg from '../cfg/cfg';import {Response} from '../shared/lib/response'; ...