多语言展示
当前在线:1030今日阅读:126今日分享:42

微企点如何使用关联容器控件

提供了关联容器的功能,并提供多种模式供用户选择,可实现多种炫酷效果。
工具/原料
1

电脑

2

浏览器

模式1
1

将“模式一”关联容器控件拖拽到编辑器。可拖拽容器边框调整大小。

2

关联容器设置。用户可在此设置二级容器出现和隐藏的触发动作及出现或隐藏的动画效果。此外,用户还可在此设置一级容器和二级容器的背景色、边框等。一级容器:网页上显示的内容。二级容器:点击或鼠标悬浮一级容器上,出现的内容。

3

一级容器及二级容器内容设置。首先,在上述步骤二中,选中“一级容器”,点击修改按钮即可进入“一级容器”表单设置。同理,修改二级容器内容,在上述步骤选中“二级容器”即可。此处以“一级容器”修改为例。进入表单编辑之后,根据需要拖拽相应的基础件、控件进入表单并进行编辑即可。编辑完成,点击表单编辑框之外的部分即可退出编辑状态。保存、发布之后可查看效果。

模式2
1

将模式二控件拖入编辑器,可拖拽容器边框调整大小。

2

关联容器设置。同模式一操作不同的是,模式二不提供二级容器的退出方式。二级容器在网页显示中退出与呈现的方式将在下面步骤五中详细说明。

3

因为模式二的一级容器和二级容器是分开的,因此修改内容时,单独选择一级容器或二级容器的修改按钮即可进入相应修改。进入表单编辑器后,内容修改方法参考模式一。

4

添加衍生关联容器。选择添加图标即可添加一个完全相同的关联容器(一级容器和二级容器同时被复制)。添加之后,可进行修改和设置,方式同被复制的关联容器设置相同。用户可添加多个衍生关联容器。需要注意的是:多个关联容器二级容器触发的动画效果只能设置为同一种。

5

发布样式。模式二发布之后呈现的样式将完全与编辑器最后保存的状态一致。如,最后编辑器中二级容器隐藏则发布之后,网站需要点击或悬浮一级容器至上才会显示二级容器的内容。如,最后编辑器中呈现的不是第一个以及关联容器,则网站发布之后,也是在页面上显示相应的关联容器。例:下图编辑器中,显示的是第二个关联容器,且二级容器呈显现状态,则发布之后也是如此显示。

模式3
1

将模式三控件拖入编辑器,可拖拽容器边框调整大小。

2

设置容器样式。背景颜色、边框等设置:可以分别对默认、悬停、选中进行样式设置。动画效果设置:可以设置展开样式(平行定位、顶点定位)、触发条件、动画。

3

内容编辑:用鼠标选定需要内容编辑的部分,点击“修改”图标进入修改页面,拖拽需要的元素到设计器中即可。

4

增加、删除标题项。通过添加按钮,可以在标题下方添加一个相同的标题模快。通过删除按钮,可以删除选中的模块。

模式4
1

将模式四控件拖入编辑器,可拖拽容器边框调整大小。

2

设置容器。背景颜色、边框等设置:可以分别对默认、悬停、选中进行样式设置。动画效果设置:可以设置展开样式(排列式、切换式)、触发条件、动画。

3

内容编辑:用鼠标选定需要内容编辑的部分,点击“修改”图标进入修改页面,拖拽需要的元素到设计器中即可。

4

增加、删除标题项。通过添加按钮,可以在标题下方添加一个相同的标题模快。通过删除按钮,可以删除选中的模块。

推荐信息