layout 布局、手风琴accordion、选项卡tabs【转载】
<!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【转载】的更多相关文章
- 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
- 7.Layout布局(tabs、accordion、layout)
一.tabs选项卡: 二.accordion手风琴: 三.经由div标记创建layout布局: 注意:center不是定位得到的,而是通过其他的几个位置计算得到的,如果不写center整个布局就无法初 ...
- java web前端easyui（layout+tree+双tabs）布局+树+2个选项卡tabs
1.列出要实现的样式: 2.实现的代码: 分三大部分: 1):页面主体部分:mian.vm <html> <head> <title>Ks UI</title ...
- EasyUI之Layout布局和Tabs页签的使用
1.JQuery EasyUI之LayOut布局 EasyUI是一款基于JQuery开发的前端框架,它集成很多漂亮的样式和相应的功能,大大方便了我们对前端开发的难度.对于web项目而言,主页面的一定是 ...
- Android 布局学习之——Layout(布局)具体解释二（常见布局和布局參数）
[Android布局学习系列] 1.Android 布局学习之--Layout(布局)具体解释一 2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数) ...
- Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
- 第二百零二节，jQuery EasyUI，Layout(布局)组件
jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...
- Android捕获View焦点事件，LinearLayout结合HorizontalScrollView实现ViewPgaer和选项卡Tabs联动
<Android捕获View焦点事件,LinearLayout结合HorizontalScrollView实现ViewPgaer和选项卡Tabs联动.> 如图: package zh ...
- easyui实现树形菜单Tab功能、layout布局
一:常见三种前端ui框架 在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面 ...
- 新建android工程的时候eclipse没有生成MainActivity和layout布局
一.新建android工程的时候eclipse没有生成MainActivity和layout布局 最近由于工作上的原因,开始学习Android开发,在入门的时候就遇到了不少的坑,遇到的第一个坑就是&q ...
随机推荐
- 7series 逻辑单元理解（更新中）
7series 逻辑单元理解 ug768和ug799文档介绍了7系列芯片中包含的基本逻辑单元,对其中常用的单元,进行下分析. 1.IOBUF单元 (1)真值表 (2)用途 the design e ...
- PHPexcel 导入import 数据到 mysql: mysql 查询数据是否存在, 如果存在返回id, 不存在, 插入返回id. 2) mysql_query , mysql_connect, mysql_select_db, mysql_error, mysql_num_rows,mysql_close
一: 要求: 上面的图表 中的数据插入到 3张表中. 1)t_vide_warehourse 分类表: 此表中包含 一级分类 和二级分类. 二级分类是一级分类的子级. 2)t_video_info ...
- 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth
变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...
- springsecurity启动出现org.springframework.beans.factory.parsing.BeanDefinitionParsingException: Configuration problem: You must use a 3.0 schema with Spring Security 3.0.
在换了spring-security的jar包以后启动出现org.springframework.beans.factory.parsing.BeanDefinitionParsingExceptio ...
- python day10作业答案
2.def func(*args): sum = 0 for i in args: sum=sum+int(i) return sum a=func(2,3,9,6,8) print(a) 3. a= ...
- java中高级
面试问题: 一.Java基础方面: 1.Java面相对象的思想的理解(主要是多态): http://blog.csdn.net/zhaojw_420/article/details/70477636 ...
- diary of laravel
1. 修改数据库连接 初始化数据库: 首先: 修改 config- database.php 中的 数据库链接 其次:修改 .env 中数据库链接 创建表: php artisan migr ...
- Access denied for user 'root'@'IP' (using password:YES)解决方法
在MySql的使用过程中,碰到“Access denied for user 'root'@'IP' (using password:YES)”的问题,使用以下语句修改后还是不行. GRANT ALL ...
- codeforce 839A Arya and Bran（水题）
Bran and his older sister Arya are from the same house. Bran like candies so much, so Arya is going ...
- jdk安装和环境配置
public class test{ public static void main(String[] args){ System.out.println("hello world" ...