广东建设行业招聘 什么网站,网上做夫妻的网站,口碑好的品牌网站建设,网站卡密怎么做1.layout#xff08;布局#xff09;组件的概述
布局容器有5个区域#xff1a;北、南、东、西和中间。中间区域面板是必须的#xff0c;边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小#xff0c;也可以点击折叠按钮将面板折叠起来。布局可以进行嵌…1.layout布局组件的概述
布局容器有5个区域北、南、东、西和中间。中间区域面板是必须的边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套用户可以通过组合布局构建复杂的布局结构。 2.layout布局组件的使用
新建一个02-layout.html页面
!DOCTYPE html
html langen
headmeta charsetUTF-8titlelayout布局组件/titlelink relstylesheet typetext/css href./js/themes/default/easyui.csslink relstylesheet typetext/css href./js/themes/icon.cssscript typetext/javascript src./js/jquery.min.js/scriptscript typetext/javascript src./js/jquery.easyui.min.js/script
/head
body!-- 页面的布局 --div idcc classeasyui-layout stylewidth:600px;height:400px;div data-optionsregion:north,title:North Title,split:true styleheight:100px;/divdiv data-optionsregion:south,title:South Title,split:true styleheight:100px;/divdiv data-optionsregion:east,iconCls:icon-reload,title:East,split:true stylewidth:100px;/divdiv data-optionsregion:west,title:West,split:true stylewidth:100px;/divdiv data-optionsregion:center,title:center title stylepadding:5px;background:#eee;/div/div
/body
/html如下图所示的效果: 创建出来的布局组件铺满整个页面
属性名属性值类型描述默认值fitboolean如果设置为true布局组件将自适应父容器。当使用body标签穿件布局的时候整个页面会自动最大。false
可以将02-layout.html页面修改成下面这个样子
!DOCTYPE html
html langen
headmeta charsetUTF-8titlelayout布局组件/titlelink relstylesheet typetext/css href./js/themes/default/easyui.csslink relstylesheet typetext/css href./js/themes/icon.cssscript typetext/javascript src./js/jquery.min.js/scriptscript typetext/javascript src./js/jquery.easyui.min.js/script
/head
body!-- 页面的布局 --div idcc classeasyui-layout data-optionsfit:truediv data-optionsregion:north,title:North Title,split:true styleheight:100px;/divdiv data-optionsregion:south,title:South Title,split:true styleheight:100px;/divdiv data-optionsregion:east,iconCls:icon-reload,title:East,split:true stylewidth:100px;/divdiv data-optionsregion:west,title:West,split:true stylewidth:100px;/divdiv data-optionsregion:center,title:center title stylepadding:5px;background:#eee;/div/div
/body
/html如下图所示的效果: 面板属性最常用的一些比如region、title以及split这些属性
属性名属性值类型描述默认值titlestring布局面板标题文本nullregionstring定义布局面板位置可用的值有: north,south,east,west,centerborderboolean为true时显示布局面板边框truesplitboolean为true时用户可以通过分割栏改变面板人小falseiconClsstring一个包含图标的CSS类ID该图标将会显示到面板标题上nullhrefstring用于读取远程站点数据的URL链接nullcollapsibleboolean定义是否显示折叠按钮。(该属性自1.3.3版开始可用)trueminWidthnumber最小面板宽度(该属性自1.3.3版开始可用)10minHeightnumber最小面板高度(该属性自1.3.3版开始可用)10maxWidthnumber最大面板宽度该属性自1.3.3版开始可用)10000maxHeightnumber最大面板高度该属性自1.3.3版开始可用) s10000
为了使用这些常用的面板属性可以将02-layout.html页面修改成下面这个样子
!DOCTYPE html
html langen
headmeta charsetUTF-8titlelayout布局组件/titlelink relstylesheet typetext/css href./js/themes/default/easyui.csslink relstylesheet typetext/css href./js/themes/icon.cssscript typetext/javascript src./js/jquery.min.js/scriptscript typetext/javascript src./js/jquery.easyui.min.js/script
/head
body!-- 页面的布局 --div idcc classeasyui-layout data-optionsfit:truediv data-optionsregion:north,title:CRM管理系统,split:true styleheight:100px;/divdiv data-optionsregion:west,title:系统菜单,split:true stylewidth:200px;/divdiv data-optionsregion:center,title:数据区域 stylepadding:5px;background:#eee;/div/div
/body
/html输出结果如下所示
