今天小編和大家分享有關(guān)于“怎么寫B(tài)UI折疊菜單插件？”這個問題的解決方法和代碼解析！希望對小伙伴們的學(xué)習(xí)有所幫助！
寫一個BUI折疊菜單插件效果預(yù)覽
控件分析控件結(jié)構(gòu)
一個點擊顯示隱藏的效果, 并且點擊的時候, 會先把展開進(jìn)行隱藏, 再展開自己的. 從界面上我們來看看結(jié)構(gòu)的設(shè)計.
<!-- 一般控件最外層就是控件的容器名 -->
<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>這里我們采用的是并列同級的方式, 那結(jié)構(gòu)寫起來有點麻煩, 其實這個結(jié)構(gòu)跟 dl,dt,dd 是一致的, 那我們完全可以優(yōu)化成以下結(jié)構(gòu).
<!-- 一般控件最外層就是控件的容器名 -->
<dl class="bui-foldmenu">
<dt>菜單</dt>
<dd>內(nèi)容</dd>
<dt>菜單2</dt>
<dd>內(nèi)容2</dd>
</dl>bui的設(shè)計是基于按鈕的原型撐開容器的方式, 這樣可以保持每個容器都是一致的標(biāo)準(zhǔn)高度, 所以我們再對結(jié)構(gòu)進(jìn)行優(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>像剛剛效果圖,菜單的點擊還會有圖標(biāo)的切換, 再結(jié)合布局來得到以下結(jié)構(gòu), 一切皆布局, 一切皆容器.
<!-- 一般控件最外層就是控件的容器名 -->
<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;
}
/* 默認(rèn)隱藏內(nèi)容 */
.bui-foldmenu>dd {
display: none;
border: 0;
overflow-y: auto;
border-bottom: 1px solid #eee;
background: #fff;
}
/* 圖標(biāo) */
.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);
}樣式里面就默認(rèn)隱藏內(nèi)容標(biāo)簽(dt相鄰的dd),由控件初始化, 其它都是一些修飾, 設(shè)置激活狀態(tài)的時候,箭頭翻轉(zhuǎn).
控件腳本
1.5.4 新增 bui.extend 方法,可以用來擴展插件, 并且保持跟 bui原本的使用方式一致.
bui.extend 控件參數(shù)是一個對象, 其中包含以下參數(shù)
name string 控件名稱config object 控件默認(rèn)參數(shù)callback function 控件的邏輯最簡單的版本
// 最簡單的版本
bui.extend({
name: "foldmenu",
config: {
id: ""
},
callback: function(opt) {
// that 指向插件的拋出的公共方法, option widget 等
let that = this;
// this.config 為已經(jīng)跟初始化參數(shù)合并以后的結(jié)果;
let param = this.config;
// 緩存選擇器
let $id = null;
// 要拋給開發(fā)者的方法
that.init = function(option) {
// 對直接調(diào)用init方法的參數(shù)進(jìn)行合并
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控件,應(yīng)該在這里寫,這樣方便外部調(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;
}
// 默認(rèn)先初始化一次
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ù)插件預(yù)覽
完善插件
用閉包防止全局污染
放在一個閉包里,這樣可以防止控件受到污染,window.libs指的是zepto或者jquery, 當(dāng)你去掉引入 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則自適應(yīng)]
* @param {string} [option.target] [要顯示隱藏的目標(biāo)]
* @param {number} [option.targetHeight] [目標(biāo)自適應(yīng)高度還是限制高度]
* @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則自適應(yīng)]
* @param {string} [option.target] [要顯示隱藏的目標(biāo)]
* @param {number} [option.targetHeight] [目標(biāo)自適應(yīng)高度還是限制高度]
* @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ù)合并以后的結(jié)果;
let param = this.config;
// 緩存選擇器
let $id = null;
// 要拋給開發(fā)者的方法
that.init = function(option) {
// 對直接調(diào)用init方法的參數(shù)進(jìn)行合并
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控件,應(yīng)該在這里寫,這樣方便外部調(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;
}
// 默認(rèn)先初始化一次
return this.init(opt);
}
});
})(window.bui || {}, window.libs);結(jié)語
那么上面我們分享的內(nèi)容就是有關(guān)于“怎么寫B(tài)UI折疊菜單插件？”這方面的相關(guān)內(nèi)容分享！更多有關(guān)于html5這個方面的學(xué)習(xí)我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)！以上我們展示的是一個最簡單的插件的開發(fā)及使用, 但插件的適應(yīng)性還不夠, 還需要考慮各種擴展性,復(fù)雜的場景如何去適應(yīng), 比方內(nèi)容是需要固定高度,選擇器換成其它,只展示一個,等各種需求都不能滿足, 我們需要考慮更多的場景, 抽取更多的變量作為可配置.希望小編的分享對大家有所幫助！
