jQuery-EasyUI学习（二）layout布局

最新推荐文章于 2024-04-08 13:00:00 发布

quge_name_harder

最新推荐文章于 2024-04-08 13:00:00 发布

阅读量230

点赞数

分类专栏： easyUi

本文链接：https://blog.csdn.net/quge_name_harder/article/details/84202726

版权

easyUi 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Layout（布局）</title>
    <meta http-equiv="keywords" content="培训,IT培训,华南地区培训">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  
  	<!-- 引入css文件，不限顺序 -->
    <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
  
  	<!-- 引入js文件，有顺序限制 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

	<!-- 所有的css文件和的有的js文件位置不限 -->
    
  </head>
  
  
  <body>
	
		<!-- 布局 -->
		<div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true">
<!--data-options="fit:true"  表示该标签和父标签一样大-->
			
			<!-- 区域面板--北边 -->
			<div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove'" style="height:100px;"></div>   
            <!--
                 region:'north',  表示这是北方的区域
                 title:'北边',     该面板名称
                 split:true,      是否可以用鼠标拖动该面板
                 border:true,    是否显示边界
                 iconCls:'icon-remove',  图标样式
             -->
			
			<!-- 区域面板--南边 -->
			<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:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div>   
			
		</div>
	
  </body>
</html>

可以用如下js对上述面板进行控制

<script type="text/javascript">
			//easyui调用方法的语法如下：$('selector').组件名('method',parameter); 
			
			//浏览器加载jsp页面时触发
			$(function(){
				//将北边折叠
				$('#layoutID').layout('collapse','north');
				//休息3秒
				window.setTimeout(function(){
					//将南边折叠
					$("#layoutID").layout("collapse","south");
					
					//将北边展开
					$('#layoutID').layout('expand','north');
					window.setTimeout(function(){
						//将南边展开
						$("#layoutID").layout("expand","south");
					},3000);
					
				},3000);
			});
			
			
		</script>

quge_name_harder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-EasyUI学习（二）layout布局

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;Layout（布局）&lt;/title&gt; &lt;meta http-equiv="keywords" content="培训
复制链接

扫一扫

专栏目录