企业官网建设流程全解析

黄村网站建设价格,wordpress文章末尾添加评价功能,企业做网站收入,如何把一个关键词优化到首页jQuery EasyUI 布局 - 在面板中创建复杂布局 jQuery EasyUI 支持布局的嵌套#xff08;nested layout#xff09;#xff0c;允许在 panel#xff08;面板#xff09;或其他区域内放置另一个 easyui-layout#xff0c;从而构建非常复杂的界面布局。这种方式常用于创建自…jQuery EasyUI 布局 - 在面板中创建复杂布局jQuery EasyUI支持布局的嵌套nested layout允许在panel面板或其他区域内放置另一个easyui-layout从而构建非常复杂的界面布局。这种方式常用于创建自定义组件、模拟 MSN 消息框、复杂表单、仪表盘子模块等。官方教程参考https://www.jeasyui.com/tutorial/layout/panel.phpComplex layout on Panel在线 Demohttps://www.jeasyui.com/demo/main/index.php?pluginLayoutpitemComplexLayout本教程将演示在一个主panel内嵌套layout。创建类似 MSN 消息框的复杂布局顶部搜索栏 右侧头像中间可拖动分割的联系人列表 聊天区。步骤 1: 引入 EasyUI 资源linkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script步骤 2: 创建主 Panel 并嵌套 Layout使用fit:true让内部 layout 自动填充 panel。divclasseasyui-paneltitle复杂面板布局示例模拟消息框iconClsicon-searchcollapsibletruestylewidth:600px;height:400px;padding:10px;divclasseasyui-layoutdata-optionsfit:true!-- 北部搜索栏 右侧头像 --divdata-optionsregion:north,border:falsestyleheight:60px;padding:10px;divstylefloat:left;label搜索:/labelinputclasseasyui-searchboxstylewidth:200px;/divdivstylefloat:right;imgsrchttps://www.jeasyui.com/tutorial/layout/images/man.pngstylewidth:40px;height:40px;/divdivstyleclear:both;/div/div!-- 中部可拖动分割的左右区域 --divdata-optionsregion:centerdivclasseasyui-layoutdata-optionsfit:true!-- 左侧联系人列表可折叠 --divdata-optionsregion:west,split:true,title:联系人,iconCls:icon-groupstylewidth:200px;ulclasseasyui-treeliiconClsicon-user张三/liliiconClsicon-user李四/liliiconClsicon-user王五/liliiconClsicon-user赵六/li/ul/div!-- 右侧聊天内容区 --divdata-optionsregion:center,title:聊天窗口divclasseasyui-tabsdata-optionsfit:true,border:falsedivtitle与 张三 聊天stylepadding:20px;这里是聊天内容区域...brbr可以放置文本框、发送按钮等。/divdivtitle群聊/div/div/div/div/div!-- 南部状态栏可选 --divdata-optionsregion:south,border:falsestyleheight:30px;text-align:center;line-height:30px;background:#fafafa;在线状态在线/div/div/div步骤 3: 更复杂的嵌套示例多层布局在中心区域再嵌套一层 layout实现更多分割。divclasseasyui-paneltitle多层嵌套复杂布局stylewidth:800px;height:500px;divclasseasyui-layoutdata-optionsfit:truedivdata-optionsregion:west,split:true,title:左侧菜单stylewidth:200px;!-- 左侧可放置 accordion 或 tree --divclasseasyui-accordiondata-optionsfit:truedivtitle菜单1内容1/divdivtitle菜单2内容2/div/div/divdivdata-optionsregion:center!-- 中心再嵌套一层 --divclasseasyui-layoutdata-optionsfit:truedivdata-optionsregion:northstyleheight:100px;background:#f0f0f0;padding:10px;顶部工具栏/divdivdata-optionsregion:centerdivclasseasyui-tabsdata-optionsfit:truedivtitleTab1主内容区/divdivtitleTab2数据表格/div/div/divdivdata-optionsregion:southstyleheight:50px;background:#f0f0f0;padding:10px;底部状态栏/div/div/div/div/div关键说明嵌套核心在 panel 或 layout 的某个 region 内再放一个div classeasyui-layout>