<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

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

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

<!-- 2 css资源 -->

<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">

<!-- 4、easyui的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',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. 第二百零二节，jQuery EasyUI，Layout(布局)组件

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

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

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

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

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

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

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

  9. android菜鸟学习笔记7----android布局(二)

    3.FrameLayout:帧布局 如同Flash或者photoshop中图层的概念,在上面的图层遮盖下面的图层,没被遮到的地方仍然显示出来. 右击res/layout,然后在弹出的菜单中选择new, ...

随机推荐

  1. nodejs 解析 base64 文本

    使用Buffer对象,在创建Buffer,指定源的编码方式 Buffer.from(data, 'base64').toString(); 当然如果是解析图片或者二进制数据的话,就不需要toStrin ...

  2. 关于c++中char*、char ch[]和string区别

    一.字符串指针: char* ch="hello"; 这里的"hello"是字符串常量,是不可以改变的,即通过ch[0]="s"会编译出错. ...

  3. python中zip()函数基本用法

    zip()函数接受一系列可迭代对象作为参数,将不同对象中相对应的元素打包成一个元组(tuple),返回由这些元组组成的list列表,如果传入的参数的长度不等,则返回的list列表的长度和传入参数中 ...

  4. 【leetcode刷题笔记】Search a 2D Matrix

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  5. uoj problem 21 缩进优化

    题目: 小O是一个热爱短代码的选手.在缩代码方面,他是一位身经百战的老手.世界各地的OJ上,很多题的最短解答排行榜都有他的身影.这令他感到十分愉悦. 最近,他突然发现,很多时候自己的程序明明看起来比别 ...

  6. NOIP2018爆炸记

    又是一年\(NOIP\),可能是梦结束的地方? 之所以咕了这么久是得先确定自己不会退役,因为分太低了. 和去年一样在学校门前照了相,然后上车走了.高三回来考的只剩下\(p2oileen\)学姐了.新一 ...

  7. JVM类加载（3）—初始化

    3.初始化 在准备阶段,变量已经赋过一次系统要求的初始值,而在初始化阶段,则根据程序员通过程序制定的主观计划去初始化类变量(静态变量)和其他资源,或者从另外一个角度表达:初始化过程是执行类构造器< ...

  8. oop的方式来操纵时间

    减少return 减少传参. 主要是在调用上比以前强大很多,以前很怕操作时间,在一堆函数中传来传去.这个调用爽. class DatetimeConverter: DATETIME_FORMATTER ...

  9. [HDU1003]最长子序列和

    http://acm.hdu.edu.cn/showproblem.php?pid=1003 解题关键:1.最大连续子序列和模板 2.max.end不能使用,在oj中会显示编译错误 3.注意模板中没有 ...

  10. 浏览器默认标签样式总结及css初始化程序

    html中的大部分的标签都有一些糟糕的样式,有的是标签天然自带的,有的是浏览器默认设置的,我们在写网页时,这些默认的样式就会时不时的跳出来捣一下乱,搞得我们很是无奈.所以成手在写css样式时,一般都会 ...