JQuery EasyUI 之Layout布局组件小Demo

秒速五厘米 2022-06-09 09:14 164阅读 0赞

简介：jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。让Java后台开发的程序猿可以快速的做出漂亮的前端系统页面，极大减少系统对前端的依赖，只需专心做系统的业务逻辑实现即可。

代码：

index.html

<!DOCTYPE html>
    <html>
    <head>
    <title>Layout布局组件</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
    </head>
    <body>
    <div id="box" style="width:600px;height:400px;">
    	<div data-options="
    		region:'north',
    		title:'上北',
    		border : true,
    		split : true,
    		iconCls : 'icon-save',
    		href : 'content.html',
    		collapsible : false,
    		maxHeight : 100,
    	" style="height:200px;"></div>
    	<div data-options="region:'south',title:'下南',split : true," style="height:100px;"></div>
    	<div data-options="region:'west',title:'左西',split : true," style="width:100px;"></div>
    	<div data-options="region:'east',title:'右东',split : true," style="width:100px;"></div>
    	<div data-options="region:'center',title:'中间'"></div>
    </div>
    </body>
    </html>

index.js

$(function () {
    
    	$('#box').layout({
    		//fit : true,
    	});
    	
    	/*
    	$(document).click(function () {
    		$('#box').layout().css('display', 'block');
    		$('#box').layout('resize');
    	});
    	
    	
    	//console.log($('#box').layout('panel','north'));
    	//console.log($('#box').layout('collapse','north'));
    	//console.log($('#box').layout('expand','north'));
    	
    	$('#box').layout('add', {
    		title : '中间',
    		region : 'center',
    	});
    	*/
    	$('#box').layout('remove','east');    //删掉右边的布局
    	
    
    });

页面：

![Center][]

[Center]: /images/20220609/80b07e35446345f2956362dcf0e355d4.png