【新版编辑器】侧边栏 - 教程
<p><span style="font-family:宋体"><span style="font-size:18px"><span style="color:red"><span style="overflow-wrap: break-word; margin: 0px; padding: 0px; font-weight: 700;">观看此功能视频教程请点击</span></span></span></span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">：</span><a href="http://school.jisuapp.cn/courses/151-19.html" target="_blank" class="gj_safe_a" style="overflow-wrap: break-word; margin: 0px; padding: 0px; text-decoration-line: none; color: rgb(85, 85, 85); font-family: "Microsoft Yahei", Simsun; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);">http://school.jisuapp.cn/courses/151-19.html</a><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span></p><p><span style="overflow-wrap: break-word; margin: 0px; padding: 0px; font-weight: 700; color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"><span style="font-size:18px"><span style="color:#ff0000">定义：特殊的“自由面板布局”，为进行某个操作时弹出侧边栏，新建侧边栏并收藏为模板后称为侧边栏模板。</span></span></span><span style="overflow-wrap: break-word; margin: 0px; padding: 0px; font-weight: 700; color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"><span style="font-size:18px"><span style="color:#ff0000">简介：侧边栏属于一种方便功能操作的形式，通常用来整合部分资源或者放置一些快捷入口，对用户起到提醒或者导航的作用，提升用户的交互体验。</span></span></span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span></p><p><span style="font-size:16px"></span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="overflow-wrap: break-word; margin: 0px; padding: 0px; font-weight: 700; color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"><span style="font-size:24px">一、使用侧边栏教程</span></span><span style="font-size:16px"> </span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-size:16px">1.在【新版编辑器】-【布局】-【侧边栏】组件，将可以打开侧边栏库</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><img id="aimg_10589" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201807/13/143359rep1iraar1d8z8ae.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-size:16px"></span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-size:16px"></span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-size:16px">2.在【侧边栏库】选择需要的【侧边栏模板】，如果没有可选的，也可以在【我的】页面新建一个</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span></p><p><span style="font-size:16px">（1）侧边栏库</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">选择一个侧边栏模板，确认选择后，将选择的侧边栏填充到编辑器</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span></p><p><span style="font-size:16px">（2）我的</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span></p><p><span style="font-size:16px">①支持管理分类(增删改分类)</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">新增：点击【新增分类】，在分类底部将会出现一个输入分类的输入框，输入完毕后点击【保存】/按enter可保存。</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">编辑/删除：鼠标移动到分类后面，将会出现编辑/删除的按钮，根据需求去进行相关操作</span></p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">②支持批量管理</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">点击“批量管理”，选中需要批量操作的弹框，点击【删除】/【移动】操作</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">批量删除：选中弹框，点击【删除】，将会出现提示框，点击【确定】之后，弹框将会全部删除</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">批量移动：选中弹框，点击【移动】，选择对应的分类，点击【确定】之后，所选择的弹框将会转移到新的分类当中去</span></p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">③支持编辑、删除单个侧边栏</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">鼠标移动到单个弹框上，将对该弹框进行操作</span><span style="font-size:16px"> </span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><img id="aimg_10590" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201807/13/143359hg12fy4y4deeak9v.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-size:16px"></span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="overflow-wrap: break-word; margin: 0px; padding: 0px; font-weight: 700; color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"><span style="font-size:24px">二、创建、编辑侧边栏教程</span></span></p><p><span style="font-size:16px"> </span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-size:16px">1.【侧边栏】组件-【我的】页面点击【新建侧边栏】</span><span style="font-size:16px"> </span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><img id="aimg_10591" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201807/13/143359qzbttlj9hrbvqols.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-size:16px"></span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-size:16px">①组件设置说明</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">鼠标移动到侧边栏将会出现“-”、“X”</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">“-”表示暂时隐藏侧边栏，便于对页面进行操作其他内容</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">“X”表示删除侧边栏列表中已选中的侧边栏</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">侧边栏列表:存放用户从侧边栏库/我的页面选择的侧边栏，方便用户通过切换查看效果并选择所需的侧边栏；在侧边栏列表中支持删除已选择的侧边栏</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><img id="aimg_10592" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201807/13/143407ch8nl85805mz8t4x.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-size:16px"></span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-size:16px">②手动控制侧边栏入口</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">可对某个组件触发某种操作时出现侧边栏，组件可包括图片、文本、按钮，在这些组件右边的组件设置中点击【设置点击事件】（设置区域：点击事件->功能->侧边栏控制）选中需要的侧边栏，并且根据自身需求对侧边栏进行相关设置</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">弹出侧边栏：把选中的侧边栏弹出 </span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-size:16px">关闭侧边栏：把选中的侧边栏关闭</span></p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><img id="aimg_10593" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201807/13/143407xjekqqyrt6k6kfrk.png" class="zoom" width="855"/> <span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><img id="aimg_10594" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201807/13/143407qjzdyegd0nr2hgbr.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-size:16px"></span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-size:16px">2.编辑侧边栏样式</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-size:16px">①在侧边栏内可添加图片、文本、按钮等组件</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><img id="aimg_10595" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201807/13/143408d1w28x7lhpwp7il4.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-size:16px">②添加组件后，可对侧边栏内组件添加【设置点击事件】</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><img id="aimg_10596" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201807/13/143408wt9otkguwkg4ld2d.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-family:宋体"><span style="font-size:18px"><span style="color:red"><span style="overflow-wrap: break-word; margin: 0px; padding: 0px; font-weight: 700;">观看此功能视频教程请点击</span></span></span></span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">：</span><a href="http://school.jisuapp.cn/courses/151-19.html" target="_blank" class="gj_safe_a" style="overflow-wrap: break-word; margin: 0px; padding: 0px; text-decoration-line: none; color: rgb(85, 85, 85); font-family: "Microsoft Yahei", Simsun; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);">http://school.jisuapp.cn/courses/151-19.html</a></p>
页:
[1]