原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
•描述•theme.js框架布局属性目录树组件配置•style.css•cover.png•打包主题包•导入主题包
自定义主题包示例
描述
theme.js
框架布局属性
目录树组件配置
style.css
cover.png
打包主题包
导入主题包
1. 描述
如下图所示，我们想把目录树放到顶部，而丌是左侧，以此效果为例，来讲解自定义主题包 API 接口的使用
方法：
2. theme.js
在总章节-自定义主题制作中介绍了自定义主题包由三个文件组成：theme.js、style.css 和cover.png ，其
中theme.js 里面保存了组件的自定义扩展。
故，首先新建一个 theme.js 文件，并将组件 API 接口构成里面的对五大部件自定义扩展的代码拷贝进去，
如下图：
2.1 框架布局属性
上面效果图中左侧的目录树显示到顶部作为导航栏，即左侧的框架宽度变为0 ，那么就可以在config4frame
配置中重新west 属性，设置其宽度为0 ，代码如下：
1. //框架布局配置属性
2. config4frame: {
3. west: {
4. width: 0
5. }
6.
2.2 目录树组件配置
较乊默认的平台主题，示例主题中顶部没有模板的搜索框 ，并且左侧目录树显示在顶部，故需要扩展初始化
后事件 ，移掉搜索框，重新绘制目录树，初始化后事件代码如下：
1. //目录树组件配置属性
2. config4MenuTree: {
3. onAfterInit: function () {}
4.
移出搜索框
在初始化事件内添加如下代码：
1. //移除搜索框
2. var self = this ;
3. $(#fs-frame-search).remove();
4. var $reg = $(#fs-frame-reg);
5. if ($reg.length 0) {
6. $reg.remove();
7. }
绘制目录树
目录树从左侧移到顶部，即全部重新绘制目录，故需要使用到目录树节点请求接口，通过ajax 拿到目录树及
管理系统的各个节点，然后重新绘制，代码如下：
1. $.ajax({
2. url: FR.servletURL + ?op=fs_maincmd=module_getrootreports,
3. type: POST,
4. data: {id: -1},
5. success: function (res, status) {
6. var nodes = $.parseJSON(res);
7. //目录树节点获取成功乊后，获取管理系统各个节点
8. $.ajax({
9. url: FR.servletURL + ?op=fs_maincmd=getmoduleitems,
10. type: POST,
11. async: false,
12. data: {id: 1},
13. success: function(res){
14.
文档评论（0）