<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<!-- 、JQuery的js包 -->

<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>

<!--  css资源 -->

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">

<!-- 、图标资源 -->

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">

<!-- 、easyui的js包 -->

<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

<!-- 、本地语言 -->

<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',split:false" style="height:80px;"></div>

    <div data-options="region:'south',title:'底部 Title',split:true" style="height:100px;"></div>

    <div data-options="region:'east',iconCls:'icon-reload',title:'工具',split:true" style="width:100px;"></div>

    <div data-options="region:'west',title:'菜单',split:true" style="width:150px;">

    <div id="ac" class="easyui-accordion" data-options="fit:true,selected:0">

    <div title="员工信息">

    <a id="add_tab" style="width:100%"href="#" class="easyui-linkbutton">新标签页</a>

    <a style="width:100%" title="addUser.html" href="#" class="easyui-linkbutton">添加员工</a>

    <br>

    <a style="width:100%" title="editUser.html" href="#" class="easyui-linkbutton">修改员工</a>

        <br>

    <a style="width:100%" title="deleteUser.html" href="#" class="easyui-linkbutton">删除员工</a>

    </div>

    <div title="考勤信息">这是员工考勤信息模块</div>

    <div title="招聘信息">这是员工招聘信息模块</div>

    <div title="培训员工信息">这是培训员工信息模块</div>

    </div>

    </div>

    <div data-options="region:'center',title:'主窗口'" style="padding:5px;background:#eee;" class="easyui-layout">

    <div id="tt" class="easyui-tabs" data-options="fit:true">

    <div title="Tab1" style="padding:20px;">

        tab1

    </div>

    <div title="Tab2" data-options="closable:true,selected:true" style="overflow:auto;padding:20px;">

        tab2

    </div>

    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">

        tab3

    </div>  

</div>  

    </div> 

</body>

</html>

layout 布局、手风琴accordion、选项卡tabs【转载】的更多相关文章

  1. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  2. 7.Layout布局(tabs、accordion、layout)

    一.tabs选项卡: 二.accordion手风琴: 三.经由div标记创建layout布局: 注意:center不是定位得到的,而是通过其他的几个位置计算得到的,如果不写center整个布局就无法初 ...

  3. java web前端easyui（layout+tree+双tabs）布局+树+2个选项卡tabs

    1.列出要实现的样式: 2.实现的代码: 分三大部分: 1):页面主体部分:mian.vm <html> <head> <title>Ks UI</title ...

  4. EasyUI之Layout布局和Tabs页签的使用

    1.JQuery EasyUI之LayOut布局 EasyUI是一款基于JQuery开发的前端框架,它集成很多漂亮的样式和相应的功能,大大方便了我们对前端开发的难度.对于web项目而言,主页面的一定是 ...

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

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

  6. Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）

    [Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.And ...

  7. 第二百零二节，jQuery EasyUI，Layout(布局)组件

    jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...

  8. Android捕获View焦点事件，LinearLayout结合HorizontalScrollView实现ViewPgaer和选项卡Tabs联动

     <Android捕获View焦点事件,LinearLayout结合HorizontalScrollView实现ViewPgaer和选项卡Tabs联动.> 如图: package zh ...

  9. easyui实现树形菜单Tab功能、layout布局

    一:常见三种前端ui框架 在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面 ...

  10. 新建android工程的时候eclipse没有生成MainActivity和layout布局

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

随机推荐

  1. 查看linux 内核版本信息

    uname -r2.6.32-696.el6.x86_64uname -ix86_64

  2. DevExpress v18.1新版亮点——Reporting篇（二）

    用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExpress Reporting v18.1 的新功能,快来下载试用新版本 ...

  3. 互评Final版本

    作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2478] 基于NABCD评论作品,及改进建议 杨老师粉丝群.作品:<Pin ...

  4. L260

    Innovative UK technology that can deliver drugs deep into the brain to treat neurological diseases, ...

  5. Sample Credential Providers

        Windows Vista Sample Credential Providers Overview Contents Terms of Use Release Notes SampleCre ...

  6. FileInputStream类与FileOutputStream类

    FileInputStream类是InputStream类的子类.他实现了文件的读取,是文件字节输入流.该类适用于比较简单的文件读取,其所有方法都是从InputStream类继承并重写的.创建文件字节 ...

  7. java学习笔记21（迭代器）

    java中有很多集合,内部有各种的存储的方法,取出的方法也各不相同,那么有没有一种通用的方法来取出来呢? java提供的遍历集合元素的方法有两种: 1.for-each结构(增强型for循环) 格式: ...

  8. vue--http请求的封装--session

    export function Fecth (url, data, file, _method) { if (file) { // 需要上传文件 return new Promise((resolve ...

  9. input默认显示当前时间

    方法一: // 获取当天的年月日 new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().get ...

  10. 了解Git的工作区和暂存区

    Git有工作区,暂存区之分. 1.工作区 我们电脑上的某个被Git管理的文件夹,就是一个工作区. 比如说我的GitWorkText文件夹,如图: 2.版本库(Repository) 在工作区有一个隐藏 ...