<!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. JS简单解决并发量

    经常在写代码的时候碰到这样的场景:页面初始化时显示loading页,同时启动多个ajax并发请求获取数据,当每个ajax请求返回时结束loading. 举个例子,一个下订单的页面,要查询常用地址信息. ...

  2. MOD

    题目链接:http://acm.hrbust.edu.cn/index.php?m=ProblemSet&a=showProblem&problem_id=2318 ///这是哈理工校 ...

  3. iTerm 2 && Oh My Zsh

    一年前,在搞终端的时候偶然一次机会,让我看到了各种强大的DIY界面,这让我很想去自己搞一个.于是在网上不断的寻找资源,也请教了大多数朋友.最终以失败告终.最近,本人又突然想起当时这件事,于是,决定边做 ...

  4. java 随机获取国内IP

    /* * 随机生成国内IP地址 */ public static String getRandomIp(){ //ip范围 int[][] range = {{607649792,608174079} ...

  5. SparkLauncher 1.6 版本bug

    背景 近期在研究使用java api的方式来调用Spark程序,通过句柄的方式来完成监控Job运行状态.及时杀死Job等功能.官方文档直接指出使用Java/Scala创建Job的方式——利用Spark ...

  6. js中的文本编辑器控件KindEditor---那些打酱油的日子

    使用文本编辑器控件KindEditor渲染文本域页面显示 this.sync()同步KindEditor的值到textarea文本框 editor.isEmpty()判断文本域是否是空 editer. ...

  7. 缺少.lib文件导致的Link2019 解决方案汇总

    环境Vs2015,  Win10 添加lib的方法在末尾 下面的错误都是我在写Direct3D程序中遇到的, 记下来方便查找 4.ws2_32.lib 3.   version.lib _GetFil ...

  8. Visual Studio 常用快捷键

    作为一个使用VisualStudio的程序员,使用快捷键会为你的开发提供助力. 下附个人开发过程中感觉比较实用的快捷键: 开始运行"devenv",启动相应版本的VisualStu ...

  9. 深入理解JavaScript中 fn() 和 return fn() 的区别

    在js中,经常会遇到在函数里调用其它函数的情况,这时候会有 fn() 这种调用方式,还有一种是 return fn() 这种调用方式,一些初学者经常会一脸萌逼地被这两种方式给绕晕了.这里用一个优雅的面 ...

  10. MAC帧和IP数据报