简介：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'); //删掉右边的布局 });
页面：
