课堂笔记 layout 布局、手风琴accordion、选项卡tabs

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

时间: 11-27

课堂笔记 layout 布局、手风琴accordion、选项卡tabs的相关文章

java web前端easyui(layout+tree+双tabs)布局+树+2个选项卡tabs

1.列出要实现的样式: 2.实现的代码: 分三大部分: 1):页面主体部分:mian.vm <html> <head> <title>Ks UI</title> #parse("ui:include") <style> body{padding:0;margin:0} </style> <script> $(document).ready(function(){ var tabs_content = $

Layout布局(tabs、accordion、layout)

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

EasyUI---layout布局、树形组件、选项卡tabs

一.了解EasyUI与BootStrap.LayUI的区别 1.EasyUI和LayUI对比 easyui是功能强大但是有很多的组件使用功能是十分强大的,而layui是2016年才出来的前端框架,现在才更新到2.x版本还有很多的功能没有完善,也还存在一些不稳定的情况,但是layui界面简约美观,而且容易上手而且有很多组件在layui的社区里都可以找到 2.LayUI与BootStrap对比 layui是国人开发的一套框架,2016年出来的,现在已更新到2.X版本了.比较新,轻量级,样式简单好看.

JAVA的面向对象编程--------课堂笔记

JAVA的面向对象编程--------课堂笔记 面向对象主要针对面向过程. 面向过程的基本单元是函数.   什么是对象:EVERYTHING IS OBJECT(万物皆对象)   所有的事物都有两个方面: 有什么(属性):用来描述对象. 能够做什么(方法):告诉外界对象有那些功能. 后者以前者为基础. 大的对象的属性也可以是一个对象.   为什么要使用面向对象: 首先,面向对象符合人类看待事物的一般规律. 对象的方法的实现细节是屏蔽的,只有对象方法的实现者了解细节. 方法的定义非常重要.方法有参

ExtJs4学习(十二)layout布局

Fit布局 在Fit布局中,子元素将自动填满整个父容器.注意:在fit布局下,对其子元素设置宽度是无效的.如果在fit布局中放置了多个组件,则只会显示第一个子元素.典型的案例就是当客户要求一个window或panel中放置一个GRID组件,grid组件的大小会随着父容器的大小改变而改变. 示例代码: <span style="font-family:Courier New;font-size:14px;">Ext.application({ name : 'HelloExt

EasyUI之layout布局(布局面板的响应事件)

jquery easyui框架中的layout布局: 遇到的问题:1.在五方布局中(north.sourth.east.west.center),east面板中,包含了两个div,其中的下面那个div里包含了tabs选项卡页签,但是页签不随面板的放大缩小而变化.如下图: 当设置east面板中包含的div的data-options:"fit:true"时: 第二个包含tabs的div并没有随着其父容器的大小变化而变化. 问题调试: 1.将第一个div与第二个div调换位置:发现只有处于上

2017年5月12号课堂笔记

2017年5月12号 星期五 空气质量:轻度污染(昨天的北风转今天的南风) 内容:html表格的基本使用,表格跨行跨列,高级表格,播放音乐,播放视频,网页布局,iframe内联框架: 文本框,密码框,单选按钮,复选框,下拉框  备注:周日晚想起来补上的周五课堂笔记(一带一路今天开会天气好晴朗) 一.html表格的基本使用 模仿老师代码: <!DOCTYPE html><html><head lang="en"> <meta charset=&q

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

 <Android捕获View焦点事件,LinearLayout结合HorizontalScrollView实现ViewPgaer和选项卡Tabs联动.> 如图: package zhangphil.tabs; import java.util.ArrayList; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.

HTML5培训第12节课堂笔记(本地存储、mui打开新页面、创建子页面)

HTML5培训第12节课堂笔记 1.     html5规范中本地储存localStorage与sessionStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此  sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储. localStorage用