欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html5寫一個BUI折疊菜單插件的實現(xiàn)方法

  發(fā)布時間：2019-09-11 15:14:05   作者：王小o   我要評論
這篇文章主要介紹了html5寫一個BUI折疊菜單插件的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

寫一個BUI折疊菜單插件效果預覽

控件分析控件結構

一個點擊顯示隱藏的效果, 并且點擊的時候, 會先把展開進行隱藏, 再展開自己的. 從界面上我們來看看結構的設計.
<!-- 一般控件最外層就是控件的容器名 -->
<div class="bui-foldmenu">
    <div class="bui-foldmenu-item">菜單</div>
    <div class="bui-foldmenu-content">內(nèi)容</div>
    <div class="bui-foldmenu-item">菜單2</div>
    <div class="bui-foldmenu-content">內(nèi)容2</div>
</div>
這里我們采用的是并列同級的方式, 那結構寫起來有點麻煩, 其實這個結構跟 dl,dt,dd 是一致的, 那我們完全可以優(yōu)化成以下結構.
<!-- 一般控件最外層就是控件的容器名 -->
<dl class="bui-foldmenu">
    <dt>菜單</dt>
    <dd>內(nèi)容</dd>
    <dt>菜單2</dt>
    <dd>內(nèi)容2</dd>
</dl>
bui的設計是基于按鈕的原型撐開容器的方式, 這樣可以保持每個容器都是一致的標準高度, 所以我們再對結構進行優(yōu)化.
<!-- 一般控件最外層就是控件的容器名 -->
<dl class="bui-foldmenu">
    <dt class="bui-btn">菜單</dt>
    <dd>內(nèi)容</dd>
    <dt class="bui-btn">菜單2</dt>
    <dd>內(nèi)容2</dd>
</dl>
像剛剛效果圖,菜單的點擊還會有圖標的切換, 再結合布局來得到以下結構, 一切皆布局, 一切皆容器.
<!-- 一般控件最外層就是控件的容器名 -->
<dl class="bui-foldmenu">
    <dt class="bui-btn bui-box"><div class="span1">菜單</div><i class="icon-foldmenu"></i></dt>
    <dd>內(nèi)容</dd>
    <dt class="bui-btn bui-box"><div class="span1">菜單2</div><i class="icon-foldmenu"></i></dt>
    <dd>內(nèi)容2</dd>
</dl>

控件樣式

一般作為插件的獨立樣式引入, bui-foldmenu.css文件

 

.bui-foldmenu {}

.bui-foldmenu>dt,
.bui-foldmenu>[class*=bui-btn] {
    border: 0;
    border-bottom: 1px solid #eee;
}
/*  默認隱藏內(nèi)容 */
.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;
}
/* 激活的二級菜單的時候,把箭頭翻轉(zhuǎn) */
.bui-foldmenu>.active .icon-foldmenu {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
樣式里面就默認隱藏內(nèi)容標簽(dt相鄰的dd),由控件初始化, 其它都是一些修飾, 設置激活狀態(tài)的時候,箭頭翻轉(zhuǎn).

控件腳本

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

bui.extend 控件參數(shù)是一個對象, 其中包含以下參數(shù)

name string 控件名稱config object 控件默認參數(shù)callback function 控件的邏輯最簡單的版本

// 最簡單的版本
bui.extend({
    name: "foldmenu",
    config: {
        id: ""
    },
    callback: function(opt) {

        // that 指向插件的拋出的公共方法, option widget 等
        let that = this;
        // this.config 為已經(jīng)跟初始化參數(shù)合并以后的結果;
        let param = this.config;
        // 緩存選擇器
        let $id = null;

        // 要拋給開發(fā)者的方法
        that.init = function(option) {
            // 對直接調(diào)用init方法的參數(shù)進行合并
            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控件,應該在這里寫,這樣方便外部調(diào)用
        // that.widgets.loading = ui.loading({
        //     appendTo: opt.id
        // });

        // 如果需要銷毀的生命周期,則在這里加上.
        // that.beforeDestroy = function() {
        //
        //     return that;
        // }

        // 必須傳id
        if (!param.id) {
            // 拋出錯誤
            bui.showLog("必須傳id參數(shù).")
            return that;
        }
        // 默認先初始化一次
        return this.init(opt);
    }
});

控件使用

<dl id="folder" class="bui-foldmenu">
    <dt class="bui-btn">菜單</dt>
    <dd>內(nèi)容</dd>
    <dt class="bui-btn">菜單2</dt>
    <dd>內(nèi)容2</dd>
</dl>
  // 初始化
  var uiFloder = bui.foldmenu({id:"#folder"})

  // uiFloder.config 可以拿到一些實例的參數(shù)

插件預覽

在線預覽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] [點擊的區(qū)域]
  *  @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新增 初始化以后觸發(fā) ]
  *  @param {function} [option.callback] [ 點擊按鈕的回調(diào) ]
  *  @example
  *
  */

完整版

;(function(ui, $) {
    "use strict";
    /* @namespace bui
      *  @class foldmenu
      *  @constructor
      *  @param {object} option
      *  @param {string} option.id [控件id]
      *  @param {string} [option.handle] [點擊的區(qū)域]
      *  @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新增 初始化以后觸發(fā) ]
      *  @param {function} [option.callback] [ 點擊按鈕的回調(diào) ]
      *  @example
      *
      */
      ui.extend({
          name: "foldmenu",
          config: {
              id: ""
          },
          callback: function(opt) {

              // that 指向插件的拋出的公共方法, option widget 等
              let that = this;
              // this.config 為已經(jīng)跟初始化參數(shù)合并以后的結果;
              let param = this.config;
              // 緩存選擇器
              let $id = null;

              // 要拋給開發(fā)者的方法
              that.init = function(option) {
                  // 對直接調(diào)用init方法的參數(shù)進行合并
                  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控件,應該在這里寫,這樣方便外部調(diào)用
              // that.widgets.loading = ui.loading({
              //     appendTo: opt.id
              // });

              // 如果需要銷毀的生命周期,則在這里加上.
              // that.beforeDestroy = function() {
              //
              //     return that;
              // }

              // 必須傳id
              if (!param.id) {
                  // 拋出錯誤
                  ui.showLog("必須傳id參數(shù).")
                  return that;
              }
              // 默認先初始化一次
              return this.init(opt);
          }
      });

})(window.bui || {}, window.libs);

結語

上面我們示例了一個最簡單的插件的開發(fā)及使用, 但插件的適應性還不夠, 還需要考慮各種擴展性,復雜的場景如何去適應, 比方內(nèi)容是需要固定高度,選擇器換成其它,只展示一個,等各種需求都不能滿足, 我們需要考慮更多的場景, 抽取更多的變量作為可配置.

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論