通过菜单项内容设置,我们知道,子页面模块是WebBuilderX的核心。如何在该模块中设计页面?如前文所述,应该是先添加容器,然后再往容器里添加组件元素。本节先系统学习子页面模块中的页面容器类型知识。
仍以之前用到但尚未完成的“子页面模块”菜单项为例:
把光标放到该菜单行“内容定义”单元格,单击右侧按钮,由于该菜单类型是“子页面模块”,所以会弹出子页面设置窗口。在这个窗口中,
必须先增加容器,然后才能向容器中添加元素内容。如下图,点击左下角的“添加容器”按钮,将弹出容器属性设置窗口:

在这个窗口中,可设置你要定义的容器基本属性,具体包括:
- 标识名称:用于显示在左侧列表中的目录树节点,以方便选择、修改、操作不同的容器,不能有重名。
- 容器类型:在WebBuilderX中,页面容器有很多种,可
归结成三大类:面板类容器、弹层类容器及复用类内部容器(具体包括上图组合框中所列出的10种)。其中:
-
面板类容器可以直接显示在页面中,包括卡片面板、微展示、大屏面板、表单面板和表格面板;
-
弹层类容器只能通过点击才会显示,包括常规弹层和表单弹层;
-
复用类内部容器也不能直接显示,它仅是供面板和弹层调用的,包括常规容器、表单容器和表格容器。
- 内容高度:未设置时,其高度由容器中的元素内容决定,也就是,它的高度由内容自动撑开;设置高度时,则显示为指定高度,单位为px。因此,除非你的容器内容是固定的,否则都不要设置固定高度,因为这可能导致内容溢出而影响页面显示效果。可能有的用户会产生疑问,为什么属性里只有高度设置,而没有宽度?别着急,后面有专门的栅格系统用来处理此问题。
- 数据目标:此属性仅在部分容器类型中有效。
- 背景颜色和背景图片:颜色可选,图片只要输入文件名,不要包含路径,且只能放在网站指定目录的images下。当同时设置了颜色和图片时,背景图片有效。
- 允许显示为全屏:一旦勾选此选项,在页面中生成的当前容器右上角会多出一个全屏显示按钮。
- 允许添加动画效果:只有在勾选此选项之后,添加的页面元素才能设置与动画相关的属性。
- 标题设置:包括标题显示内容、标题右侧图标、鼠标悬浮在图标上时显示的说明内容。需要说明的是,悬浮内容只有在选择了右侧图标之后,才会显示。也就是说,即使你添加悬浮说明,但没有添加右侧图标,悬浮内容依然不会显示。当然,你也可以勾选“不显示容器标题”。
- 按钮设置:只有在容器里添加了操作按钮,这些设置才会有效。其中,按钮组显示效果是将所有按钮更紧密的连接在一起。当启用按钮组时,按钮的圆角效果将失效。
由于不同的容器类型,可用的属性设置项目也会有所不同,现对子页面模块开发中用到的三大种容器类型分别做详细说明。