Layout(布局)_$('#id').layout('add',{});-程序员宅基地

技术标签: easyUI  Layout  

                布局容器有5个区域:北、南、东、西和中间。中间区域面板是必须的,边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套,用户可以通过组合布局构建复杂的布局结构

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Layout:通过标签创建布局</title>
    <!-- 引入easyUI:JQuery文件支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
  	<!-- 引入easyUI -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
  	<!-- 引入中文支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
  	<!-- 引入easyUI主题css文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
  	<!-- 引入easyUI 图标导航文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head>
  
  <body>
  	<%
		/*
			为div标签增加名为'easyui-layout'的类ID
			region:布局面板位置;  title:布局面板标题;  split:true时可以通过分割栏改变面板大小
			iconCls:包含图标的CSS类ID(icon-**)
			可以在标签中间层输入html或文本
		*/  	
  	 %>
	<div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
		<div data-options="region:'north',title:'上',split:false" style="height:100px;">Up</div>   
	    <div data-options="region:'south',title:'下',split:true" style="height:100px;">Down</div>   
	    <div data-options="region:'east',iconCls:'icon-no',title:'东',split:true" style="width:100px;"></div>   
	    <div data-options="region:'west',title:'西',split:true" style="width:100px;"></div>   
	    <div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;"><h1>墨渐生微</h1></div>   
	</div>
  </body>
</html>

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Layout:使用完整页面创建布局</title>
    <!-- 引入easyUI:JQuery文件支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
  	<!-- 引入easyUI -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
  	<!-- 引入中文支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
  	<!-- 引入easyUI主题css文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
  	<!-- 引入easyUI 图标导航文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head>
  
	<body class="easyui-layout">
		 <%
			/*
				为div标签增加名为'easyui-layout'的类ID
				region:布局面板位置;  title:布局面板标题;  split:true时可以通过分割栏改变面板大小
				iconCls:包含图标的CSS类ID(icon-**)
			*/  	
	  	 %>	  
	    <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>   
	    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
	</body> 
</html>

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	    <title>Layout:嵌套布局</title>
	    <!-- 引入easyUI:JQuery文件支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
	  	<!-- 引入easyUI -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
	  	<!-- 引入中文支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
	  	<!-- 引入easyUI主题css文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
	  	<!-- 引入easyUI 图标导航文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link>
	</head>
  
	<body class="easyui-layout">
		<%
			/*
				fit:布局组件将自适应父容器
				collapsed:是否显示折叠按钮
			*/  	
	  	 %>   
	    <div data-options="region:'north'" style="height:100px"></div>   
	    <div data-options="region:'center'">   
	        <div class="easyui-layout" data-options="fit:true">   
	            <div data-options="region:'west',collapsed:true" style="width:180px"></div>   
	            <div data-options="region:'center'"></div>   
	        </div>   
	    </div>   
	</body> 
</html>

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	    <title>JS代码创建布局</title>
	    <!-- 引入easyUI:JQuery文件支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
	  	<!-- 引入easyUI -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
	  	<!-- 引入中文支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
	  	<!-- 引入easyUI主题css文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
	  	<!-- 引入easyUI 图标导航文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link>
	  	
	  	<script type="text/javascript">
	  		$(document).ready(function(){
		  		$('#cc').layout('add',{    
				    region: 'west',    
				    width: 180,    
				    title: '西',    
				    split: true,    
				    tools: [{    
					        iconCls:'icon-add',    
					        handler:function(){alert('add');}    
					    },{    
					        iconCls:'icon-remove',    
					        handler:function(){alert('remove');}    
					    }]
				});
	  		});  		
	  	</script>
	</head>
  
	<body>
		<div id="cc" class="easyui-layout" style="width:600px;height:400px;"> 
			<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> 
		</div>
	</body> 
</html>

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Mythology_px/article/details/83033792

智能推荐

viewpager跟HorizontalScrollView,listview冲突的问题_viewpager horizontalscrollview冲突-程序员宅基地

文章浏览阅读2.4k次。这几天做到一个小app,发现一个严重的问题,因为主要布局是一个HorizontalScrollView里面装了个viewpager包含fragment,恰好我有又想实现一个侧边栏,所以发现app运行之后,侧滑栏虽然能够滑动,但是viewpager完全不能用了,不能滑动,就连tablelayout按钮都不能用了,就上网查询了下资料,原来是viewpager和HorizontalScrollView冲..._viewpager horizontalscrollview冲突

1165g7安装linux,Tiger Lake i7-1165G7 Linux性能测试:软件版本组合对跑分影响较大-程序员宅基地

文章浏览阅读512次。通过更多的测试,Michael Larabel 终于得到了一些有趣的发现 —— 可知 Tiger Lake 移动处理器的单线程性能确实有所增强,但多线程性能竟然又低于上周的跑分。从上一篇文章开始,Phoronix 编辑就一直在使用戴尔 XPS 9310(开发人员版)对 Tiger Lake 移动处理器的性能展开密集的测试。从轻负载的 MP3 编码到 Web 浏览器性能测试,某些情况下 i7-116..._i71165g7 乱路由

C语言差异化定价编码,不同平台的差异化会员定价方案-程序员宅基地

文章浏览阅读134次。01·知乎平台给用户提供的会员方案选择。知乎总体分了两大类,还是较为简单的。第一类是连续包。什么是连续包呢,就是选择了以后快到期的时候它会提示你自动续费。知乎-连续包月、包季、包年会员第二类是正常的会员定价。所谓正常,就是想让用户看到时候与第一类的连续包会员做个比较,这第二类比第一类贵了些。知乎-正常的月卡、季卡、年卡会员总结:这样定价的意图还是很明显的,一个是原价,一个是优惠价,肯定很多人选优惠..._不同用户定价

核密度中对窗框h的估计用R语言_R语言与核密度估计(非参数统计)题材.ppt-程序员宅基地

文章浏览阅读436次。R语言与非参数统计(核密度估计) 核密度估计是在概率论中用来估计未知的密度函数,属于非参数检验方法之一,由Rosenblatt 1955 和Emanuel Parzen 1962 提出,又名Parzen窗(Parzen window)。 ???假设我们有n个数X1-Xn,我们要计算某一个数X的概率密度有多大。核密度估计的方法是这样的: 其中K为核密度函数, h为设定的窗宽。 核密度估计的原...

matlab2014启动很慢,Matlab启动初始化很慢的解决办法-程序员宅基地

文章浏览阅读385次。首先介绍一下我自己使用的有效方法,一般matlab启动初始化很慢主要的原因是在找注册文件,一般是由于安装了MAC类的软件引起的,所以我按照下文提供的方法“在【目标】中,键入如下内容”$MATLAB\bin\win32\MATLAB.exe”-c “filename>””,我在快捷方式里面目标路径中键入:"C:\ProgramFiles\MATLAB\R2009b\bin\win32\MATL..._matlab r2014a左下角初始化时间很长

定时休眠 linux,Linux中的定时器与休眠-程序员宅基地

文章浏览阅读235次。本文最后更新于2017年8月5日,已超过 1 年没有更新,如果文章内容失效,还请反馈给我,谢谢!=Start=缘由:学习需要正文:参考解答:在 2.4 的内核中,并没有提供 POSIX timer 的支持,要在进程环境中支持多个定时器,只能自己来实现,好在 Linux 提供了 setitimer(2) 的接口。它是一个具有间隔功能的定时器 (interval timer),但如果想在进程环境中支持..._timerfd_settime cpu休眠

随便推点

HTML解析和DOM-程序员宅基地

文章浏览阅读794次。概述前面介绍了很多眼花缭乱的新技术,关于渲染,关于硬件加速,关于布局,关于其他很多,同大家一样,我也花了很多时间来消化它们。本章介绍稍微基础些的话题(本系列的写作顺序完全是随心所欲地),就是在渲染整个过程的初始阶段---HTML解析。不过这不表示它简单,其实这里是非常绕人的。在前面描述渲染过程,其实也是回避了这些方面的很多细节,原因也很简单,我自己也没有完全仔细地了解清楚. :-(

第六章——函数(inout参数与变异方法)-程序员宅基地

文章浏览阅读310次。本文系阅读阅读原章节后总结概括得出。由于需要我进行一定的概括提炼,如有不当之处欢迎读者斧正。如果你对内容有任何疑问,欢迎共同交流讨论。在Swift中,初次接触inout关键字以及它的用法,可能会让我们想起C/C++中的指针,但实际上Swift中inout只不过是按值传递,然后再写回原变量,而不是按引用传递:An in-out parameter has a value that is p..._inout函数

php cd 命令无效,如何解决python无法调用cd /d 命令的问题-程序员宅基地

文章浏览阅读650次。如何解决python无法调用cd /d 命令的问题如何解决python无法调用cd /d 命令的问题1.pyimport oscmd = 'cd /d k:/zhusc'res = os.popen(cmd)output_str = res.read() # 获得输出字符串cmd = 'phantomjs test.js'res = os.popen(cmd)output_str = res...._python脚本运行sh命令行 cd无用

mysql5.5.27免安装版配置_mysql5.7免安装版配置-程序员宅基地

文章浏览阅读164次。开始1、下载mysql5.7 32位:https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.19-win32.zip5.7 64位:https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.19-winx64.zip2、解压到自己的目录我这里是放在D:\Program Files\mys..._mysql 5.7mian

TensorFlow训练中保存tensorboard中cupti丢失问题解决_(cupti_callbackfunc)apicallback, this)failed with -程序员宅基地

文章浏览阅读5.1k次,点赞6次,收藏21次。TensorFlow训练中保存tensorboard中cupti丢失问题解决_(cupti_callbackfunc)apicallback, this)failed with error cupti could not be l

三段位移求加速度_求:速度与位移的公式推导-程序员宅基地

文章浏览阅读4.5k次。求:速度与位移的公式推导以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!求:速度与位移的公式推导推导如下:设物体做匀加速直线运动,加速度为a,经时间t速度由V0(初速度)大到vt(末速度)1、匀加加速平均速度公式V平均=(Vt+V0)/2................12、位移公式S=V平均*t=(Vt+V0)t/2...._速度与位移关系怎么导出来的