寫一個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);結語
上面我們示例了一個最簡單的插件的開發及使用, 但插件的適應性還不夠, 還需要考慮各種擴展性,復雜的場景如何去適應, 比方內容是需要固定高度,選擇器換成其它,只展示一個,等各種需求都不能滿足, 我們需要考慮更多的場景, 抽取更多的變量作為可配置.
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
