怎么在html5中實現一個BUI折疊菜單插件

本篇文章為大家展示了怎么在html5中實現一個BUI折疊菜單插件，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

一個點擊顯示隱藏的效果, 并且點擊的時候, 會先把展開進行隱藏, 再展開自己的. 從界面上我們來看看結構的設計.

<!-- 一般控件最外層就是控件的容器名 -->
<div class="bui-foldmenu">
    <div class="bui-foldmenu-item">菜單</div>
    <div class="bui-foldmenu-content">內容</div>
    <div class="bui-foldmenu-item">菜單2</div>
    <div class="bui-foldmenu-content">內容2</div>
</div>

這里我們采用的是并列同級的方式, 那結構寫起來有點麻煩, 其實這個結構跟 dl,dt,dd 是一致的, 那我們完全可以優化成以下結構.

<!-- 一般控件最外層就是控件的容器名 -->
<dl class="bui-foldmenu">
    <dt>菜單</dt>
    <dd>內容</dd>
    <dt>菜單2</dt>
    <dd>內容2</dd>
</dl>

bui的設計是基于按鈕的原型撐開容器的方式, 這樣可以保持每個容器都是一致的標準高度, 所以我們再對結構進行優化.

<!-- 一般控件最外層就是控件的容器名 -->
<dl class="bui-foldmenu">
    <dt class="bui-btn">菜單</dt>
    <dd>內容</dd>
    <dt class="bui-btn">菜單2</dt>
    <dd>內容2</dd>
</dl>

像剛剛效果圖,菜單的點擊還會有圖標的切換, 再結合布局來得到以下結構, 一切皆布局, 一切皆容器.

<!-- 一般控件最外層就是控件的容器名 -->
<dl class="bui-foldmenu">
    <dt class="bui-btn bui-box"><div class="span1">菜單</div><i class="icon-foldmenu"></i></dt>
    <dd>內容</dd>
    <dt class="bui-btn bui-box"><div class="span1">菜單2</div><i class="icon-foldmenu"></i></dt>
    <dd>內容2</dd>
</dl>

控件樣式

一般作為插件的獨立樣式引入, 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);
    }
});

控件使用

<dl id="folder" class="bui-foldmenu">
    <dt class="bui-btn">菜單</dt>
    <dd>內容</dd>
    <dt class="bui-btn">菜單2</dt>
    <dd>內容2</dd>
</dl>

  // 初始化
  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折疊菜單插件，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。