插件扩展

以一个折叠菜单为例

折叠菜单交互

控件分析

控件结构

一个点击显示隐藏的效果, 并且点击的时候, 会先把展开进行隐藏, 再展开自己的. 从界面上我们来看看结构的设计.

  1. <!-- 一般控件最外层就是控件的容器名 -->
  2. <div class="bui-foldmenu">
  3.     <div class="bui-foldmenu-item">菜单</div>
  4.     <div class="bui-foldmenu-content">内容</div>
  5.     <div class="bui-foldmenu-item">菜单2</div>
  6.     <div class="bui-foldmenu-content">内容2</div>
  7. </div>

这里我们采用的是并列同级的方式, 那结构写起来有点麻烦, 其实这个结构跟 dl,dt,dd 是一致的, 那我们完全可以优化成以下结构.

  1. <!-- 一般控件最外层就是控件的容器名 -->
  2. <dl class="bui-foldmenu">
  3.     <dt>菜单</dt>
  4.     <dd>内容</dd>
  5.     <dt>菜单2</dt>
  6.     <dd>内容2</dd>
  7. </dl>

bui的设计是基于按钮的原型撑开容器的方式, 这样可以保持每个容器都是一致的标准高度, 所以我们再对结构进行优化.

  1. <!-- 一般控件最外层就是控件的容器名 -->
  2. <dl class="bui-foldmenu">
  3.     <dt class="bui-btn">菜单</dt>
  4.     <dd>内容</dd>
  5.     <dt class="bui-btn">菜单2</dt>
  6.     <dd>内容2</dd>
  7. </dl>

像刚刚效果图,菜单的点击还会有图标的切换, 再结合布局来得到以下结构, 一切皆布局, 一切皆容器.

  1. <!-- 一般控件最外层就是控件的容器名 -->
  2. <dl class="bui-foldmenu">
  3.     <dt class="bui-btn bui-box"><div class="span1">菜单</div><i class="icon-foldmenu"></i></dt>
  4.     <dd>内容</dd>
  5.     <dt class="bui-btn bui-box"><div class="span1">菜单2</div><i class="icon-foldmenu"></i></dt>
  6.     <dd>内容2</dd>
  7. </dl>

控件样式

一般作为插件的独立样式引入, bui-foldmenu.css文件

  1. .bui-foldmenu {}
  3. .bui-foldmenu>dt,
  4. .bui-foldmenu>[class*=bui-btn] {
  5.     border: 0;
  6.     border-bottom: 1px solid #eee;
  7. }
  8. /*  默认隐藏内容 */
  9. .bui-foldmenu>dd {
  10.     display: none;
  11.     border: 0;
  12.     overflow-y: auto;
  13.     border-bottom: 1px solid #eee;
  14.     background: #fff;
  15. }
  16. /*  图标 */
  17. .bui-foldmenu .icon-foldmenu {
  18.     -webkit-transition: -webkit-transform 0.3s ease-in-out 0s;
  19.     transition: transform 0.3s ease-in-out 0s;
  20. }
  21. .bui-foldmenu .icon-foldmenu:before {
  22.     content: "\e649";
  23. }
  24. /* 激活的时候显示block */
  25. .bui-foldmenu>.active+dd {
  26.     display: block;
  27. }
  28. /* 激活的二级菜单的时候,把箭头翻转 */
  29. .bui-foldmenu>.active .icon-foldmenu {
  30.     -webkit-transform: rotate(-180deg);
  31.     transform: rotate(-180deg);
  32. }

样式里面就默认隐藏内容标签(dt相邻的dd),由控件初始化, 其它都是一些修饰, 设置激活状态的时候,箭头翻转.

控件脚本

1.5.4 新增 bui.extend 方法,可以用来扩展插件, 并且保持跟 bui原本的使用方式一致.

bui.extend 控件参数是一个对象, 其中包含以下参数

  • name string 控件名称
  • config object 控件默认参数
  • callback function 控件的逻辑
  1. 最简单的版本
  1. // 最简单的版本
  2. bui.extend({
  3.     name: "foldmenu",
  4.     config: {
  5.         id: ""
  6.     },
  7.     callback: function(opt) {
  9.         // that 指向插件的抛出的公共方法, option widget 等
  10.         let that = this;
  11.         // this.config 为已经跟初始化参数合并以后的结果;
  12.         let param = this.config;
  13.         // 缓存选择器
  14.         let $id = null;
  16.         // 要抛给开发者的方法
  17.         that.init = function(option) {
  18.             // 对直接调用init方法的参数进行合并
  19.             param = $.extend(true, {}, param, option);
  21.             // 单页多页选择器,如果是单页,这个插件只能在模块里面用, 不能在bui.ready
  22.             $id = bui.$(param.id);
  24.                 // 绑定事件,点击的时候增加激活样式
  25.             $id.children("dt").click(function(e) {
  26.                 var hasActive = $(this).hasClass("active");
  27.                 if (hasActive) {
  28.                     $(this).removeClass("active");
  29.                 } else {
  30.                     // 加上样式以后会自动对箭头及下一层级展示处理;
  31.                     $(this).addClass("active");
  32.                 }
  33.             })
  35.             return that;
  36.         }
  38.         // 如果有依赖bui控件,应该在这里写,这样方便外部调用
  39.         // that.widgets.loading = ui.loading({
  40.         //     appendTo: opt.id
  41.         // });
  43.         // 如果需要销毁的生命周期,则在这里加上.
  44.         // that.beforeDestroy = function() {
  45.         //
  46.         //     return that;
  47.         // }
  49.         // 必须传id
  50.         if (!param.id) {
  51.             // 抛出错误
  52.             bui.showLog("必须传id参数.")
  53.             return that;
  54.         }
  55.         // 默认先初始化一次
  56.         return this.init(opt);
  57.     }
  58. });

控件使用

  1. <dl id="folder" class="bui-foldmenu">
  2.     <dt class="bui-btn">菜单</dt>
  3.     <dd>内容</dd>
  4.     <dt class="bui-btn">菜单2</dt>
  5.     <dd>内容2</dd>
  6. </dl>
  1.   // 初始化
  2.   var uiFloder = bui.foldmenu({id:"#folder"})
  4.   // uiFloder.config 可以拿到一些实例的参数

插件预览

在线预览bui.folder插件

完善插件

用闭包防止全局污染

放在一个闭包里,这样可以防止控件受到污染, window.libs 指的是 zepto 或者 jquery, 当你去掉引入 zepto.js 的时候, 引入 jquery.js 就可以完美切换成jquery版本. (jquery版本建议在: 1.9.x - 1.11.x)

  1. ;(function(ui, $) {
  2.     "use strict";
  5. })(window.bui || {}, window.libs);

加上注释

  1. /* @namespace bui
  2.   *  @class foldmenu
  3.   *  @constructor
  4.   *  @param {object} option
  5.   *  @param {string} option.id [控件id]
  6.   *  @param {string} [option.handle] [点击的区域]
  7.   *  @param {number} [option.height] [父层高度,0则自适应]
  8.   *  @param {string} [option.target] [要显示隐藏的目标]
  9.   *  @param {number} [option.targetHeight] [目标自适应高度还是限制高度]
  10.   *  @param {boolean} [option.single] [ false(显示多个) || true(一次只折叠一个) ]
  11.   *  @param {function} [option.onInited] [ 1.5.1新增 初始化以后触发 ]
  12.   *  @param {function} [option.callback] [ 点击按钮的回调 ]
  13.   *  @example
  14.   *
  15.   */

完整版

  1. ;(function(ui, $) {
  2.     "use strict";
  3.     /* @namespace bui
  4.       *  @class foldmenu
  5.       *  @constructor
  6.       *  @param {object} option
  7.       *  @param {string} option.id [控件id]
  8.       *  @param {string} [option.handle] [点击的区域]
  9.       *  @param {number} [option.height] [父层高度,0则自适应]
  10.       *  @param {string} [option.target] [要显示隐藏的目标]
  11.       *  @param {number} [option.targetHeight] [目标自适应高度还是限制高度]
  12.       *  @param {boolean} [option.single] [ false(显示多个) || true(一次只折叠一个) ]
  13.       *  @param {function} [option.onInited] [ 1.5.1新增 初始化以后触发 ]
  14.       *  @param {function} [option.callback] [ 点击按钮的回调 ]
  15.       *  @example
  16.       *
  17.       */
  18.       ui.extend({
  19.           name: "foldmenu",
  20.           config: {
  21.               id: ""
  22.           },
  23.           callback: function(opt) {
  25.               // that 指向插件的抛出的公共方法, option widget 等
  26.               let that = this;
  27.               // this.config 为已经跟初始化参数合并以后的结果;
  28.               let param = this.config;
  29.               // 缓存选择器
  30.               let $id = null;
  32.               // 要抛给开发者的方法
  33.               that.init = function(option) {
  34.                   // 对直接调用init方法的参数进行合并
  35.                   param = $.extend(true, {}, param, option);
  37.                   // 单页多页选择器,如果是单页,这个插件只能在模块里面用, 不能在bui.ready
  38.                   $id = ui.$(param.id);
  40.                       // 绑定事件,点击的时候增加激活样式
  41.                   $id.children("dt").click(function(e) {
  42.                       var hasActive = $(this).hasClass("active");
  43.                       if (hasActive) {
  44.                           $(this).removeClass("active");
  45.                       } else {
  46.                           // 加上样式以后会自动对箭头及下一层级展示处理;
  47.                           $(this).addClass("active");
  48.                       }
  49.                   })
  51.                   return that;
  52.               }
  54.               // 如果有依赖bui控件,应该在这里写,这样方便外部调用
  55.               // that.widgets.loading = ui.loading({
  56.               //     appendTo: opt.id
  57.               // });
  59.               // 如果需要销毁的生命周期,则在这里加上.
  60.               // that.beforeDestroy = function() {
  61.               //
  62.               //     return that;
  63.               // }
  65.               // 必须传id
  66.               if (!param.id) {
  67.                   // 抛出错误
  68.                   ui.showLog("必须传id参数.")
  69.                   return that;
  70.               }
  71.               // 默认先初始化一次
  72.               return this.init(opt);
  73.           }
  74.       });
  76. })(window.bui || {}, window.libs);

结语

上面我们示例了一个最简单的插件的开发及使用, 但插件的适应性还不够, 还需要考虑各种扩展性,复杂的场景如何去适应, 比方内容是需要固定高度,选择器换成其它,只展示一个,等各种需求都不能满足, 我们需要考虑更多的场景, 抽取更多的变量作为可配置.