html5中如何写BUI折叠菜单插件

本篇内容介绍了"html5中如何写BUI折叠菜单插件"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

控件分析控件结构

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

    
菜单
    
内容
    
菜单2
    
内容2

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

    
菜单
    
内容
    
菜单2
    
内容2

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

    
菜单
    
内容
    
菜单2
    
内容2

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

    
菜单
    
内容
    
菜单2
    
内容2

控件样式

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

.bui-foldmenu {}.bui-foldmenu>dt,.bui-foldmenu>[class*=bui-btn] {    border: 0;    border-bottom: 1px solid #eee;}/*  默认隐藏内容 */.bui-foldmenu>dd {    display: none;    border: 0;    overflow-y: auto;    border-bottom: 1px solid #eee;    background: #fff;}/*  图标 */.bui-foldmenu .icon-foldmenu {    -webkit-transition: -webkit-transform 0.3s ease-in-out 0s;    transition: transform 0.3s ease-in-out 0s;}.bui-foldmenu .icon-foldmenu:before {    content: "e649";}/* 激活的时候显示block */.bui-foldmenu>.active+dd {    display: block;}/* 激活的二级菜单的时候,把箭头翻转 */.bui-foldmenu>.active .icon-foldmenu {    -webkit-transform: rotate(-180deg);    transform: rotate(-180deg);}

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

控件脚本

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

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

name string 控件名称config object 控件默认参数callback function 控件的逻辑最简单的版本

// 最简单的版本bui.extend({    name: "foldmenu",    config: {        id: ""    },    callback: function(opt) {        // that 指向插件的抛出的公共方法, option widget 等        let that = this;        // this.config 为已经跟初始化参数合并以后的结果;        let param = this.config;        // 缓存选择器        let $id = null;        // 要抛给开发者的方法        that.init = function(option) {            // 对直接调用init方法的参数进行合并            param = $.extend(true, {}, param, option);            // 单页多页选择器,如果是单页,这个插件只能在模块里面用, 不能在bui.ready            $id = bui.$(param.id);                // 绑定事件,点击的时候增加激活样式            $id.children("dt").click(function(e) {                var hasActive = $(this).hasClass("active");                if (hasActive) {                    $(this).removeClass("active");                } else {                    // 加上样式以后会自动对箭头及下一层级展示处理;                    $(this).addClass("active");                }            })            return that;        }        // 如果有依赖bui控件,应该在这里写,这样方便外部调用        // that.widgets.loading = ui.loading({        //     appendTo: opt.id        // });        // 如果需要销毁的生命周期,则在这里加上.        // that.beforeDestroy = function() {        //        //     return that;        // }        // 必须传id        if (!param.id) {            // 抛出错误            bui.showLog("必须传id参数.")            return that;        }        // 默认先初始化一次        return this.init(opt);    }});

控件使用

    
菜单
    
内容
    
菜单2
    
内容2

 // 初始化  var uiFloder = bui.foldmenu({id:"#folder"})  // uiFloder.config 可以拿到一些实例的参数

插件预览

在线预览bui.folder插件

完善插件

用闭包防止全局污染

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

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

加上注释

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

完整版：

;(function(ui, $) {    "use strict";    /* @namespace bui      *  @class foldmenu      *  @constructor      *  @param {object} option      *  @param {string} option.id [控件id]      *  @param {string} [option.handle] [点击的区域]      *  @param {number} [option.height] [父层高度,0则自适应]      *  @param {string} [option.target] [要显示隐藏的目标]      *  @param {number} [option.targetHeight] [目标自适应高度还是限制高度]      *  @param {boolean} [option.single] [ false(显示多个) || true(一次只折叠一个) ]      *  @param {function} [option.onInited] [ 1.5.1新增 初始化以后触发 ]      *  @param {function} [option.callback] [ 点击按钮的回调 ]      *  @example      *      */      ui.extend({          name: "foldmenu",          config: {              id: ""          },          callback: function(opt) {              // that 指向插件的抛出的公共方法, option widget 等              let that = this;              // this.config 为已经跟初始化参数合并以后的结果;              let param = this.config;              // 缓存选择器              let $id = null;              // 要抛给开发者的方法              that.init = function(option) {                  // 对直接调用init方法的参数进行合并                  param = $.extend(true, {}, param, option);                  // 单页多页选择器,如果是单页,这个插件只能在模块里面用, 不能在bui.ready                  $id = ui.$(param.id);                      // 绑定事件,点击的时候增加激活样式                  $id.children("dt").click(function(e) {                      var hasActive = $(this).hasClass("active");                      if (hasActive) {                          $(this).removeClass("active");                      } else {                          // 加上样式以后会自动对箭头及下一层级展示处理;                          $(this).addClass("active");                      }                  })                  return that;              }              // 如果有依赖bui控件,应该在这里写,这样方便外部调用              // that.widgets.loading = ui.loading({              //     appendTo: opt.id              // });              // 如果需要销毁的生命周期,则在这里加上.              // that.beforeDestroy = function() {              //              //     return that;              // }              // 必须传id              if (!param.id) {                  // 抛出错误                  ui.showLog("必须传id参数.")                  return that;              }              // 默认先初始化一次              return this.init(opt);          }      });})(window.bui || {}, window.libs);

"html5中如何写BUI折叠菜单插件"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！