easyui源码翻译1.32--Layout(布局)
2014-01-01 17:57
531 查看
前言
使用$.fn.layout.defaults重写默认值对象。下载该插件翻译源码布局容器有5个区域:北、南、东、西和中间。中间区域面板是必须的,边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套,用户可以通过组合布局构建复杂的布局结构。
源码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Layout - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script> <script src="../../plugins2/jquery.parser.js"></script> <script src="../../plugins2/jquery.panel.js"></script> <script src="../../plugins2/jquery.resizable.js"></script> <script src="../../plugins2/jquery.layout.js"></script> </head> <body> <h2>Basic Layout</h2> <div class="demo-info"> <div class="demo-tip icon-tip"></div> <div>The layout contains north,south,west,east and center regions.</div> </div> <div style="margin:10px 0;"></div> <div class="easyui-layout" style="width:700px;height:350px;"> <div data-options="region:'north'" style="height:50px"></div> <div data-options="region:'south',split:true" style="height:50px;"></div> <div data-options="region:'east',split:true" title="East" style="width:180px;"></div> <div data-options="region:'west',split:true" title="West" style="width:100px;"></div> <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'"> </div> </div> </body> </html>
View Code
插件效果
![](http://images.cnitblog.com/blog/353349/201401/01175703-6e281ce807604ea5b05e7b4eab72edbd.png)
相关文章推荐
- easyui源码翻译1.32--LinkButton(按钮)
- easyui源码翻译1.32--ComboTree(树形下拉框)
- easyui源码翻译1.32--PropertyGrid(属性表格)
- easyui源码翻译1.32--Resizable(调整大小)
- easyui源码翻译1.32--Window(窗口)
- easyui源码翻译1.32--DateBox(日期输入框)
- easyui源码翻译1.32--MenuButton(菜单按钮)
- easyui源码翻译1.32--SearchBox(搜索框)
- easyui源码翻译1.32--Messager(消息窗口)
- easyui源码翻译1.32--Slider(滑动条)
- easyui源码翻译1.32--NumberBox(数值输入框)
- easyui源码翻译1.32--Combo(自定义下拉框)
- easyui源码翻译1.32--Dialog(对话框窗口)
- easyui源码翻译1.32--NumberSpinner(数字微调)
- easyui源码翻译1.32--SplitButton(分割按钮)
- easyui源码翻译1.32--datagrid(数据表格)
- easyui源码翻译1.32--DateTimeBox(日期时间输入框)
- easyui源码翻译1.32--TimeSpinner(时间微调)
- easyui源码翻译1.32--Draggable(拖动)
- easyui源码翻译1.32--TreeGrid(树形表格)