html5写一个BUI折叠菜单插件的实现方法

控件使用

<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 为已经跟初始化参数合并以后的结果;								 
 3/4   首页 上一页 1 2 3 4 下一页 尾页