当前位置：首页 > Web前端 > CSS

写一个BUI折叠菜单插件

时间：2023-03-30 22:22:24 CSS

写一个BUI折叠菜单插件效果预览控件，分析控件的结构。一键显示隐藏效果，点击时会先隐藏展开，再展开自己。我们从界面上看结构设计菜单

内容

菜单2

content2

这里我们采用了同级并列的方式，结构写起来有点麻烦。其实这个结构和dl、dt、dd是一致的，所以我们完全可以优化成下面的结构。

Content

Menu2

Content2

bui的设计是基于按钮原型打开容器的方式，让每个容器保持一致的标准高度，所以我们优化了结构。

Content

菜单2

内容

Menu2

Content2

控件样式一般作为插件的独立样式引入-in，bui-foldmenu.css文件。bui-foldmenu{}.bui-foldmenu>dt,.bui-foldmenu>[class*=bui-btn]{border:0;border-bottom:1pxsolid#eee;}/*默认隐藏内容*/.bui-foldmenu>dd{display:none;边界：0；溢出-y：自动；border-bottom:1pxsolid#eee;背景：#fff;}/*icon*/.bui-foldmenu.icon-foldmenu{-webkit-transition:-webkit-transform0.3sease-in-out0s;transition:transform0.3sease-in-out0s;}.bui-foldmenu.icon-foldmenu:before{content:"\e649";}/*激活显示块*/.bui-foldmenu>.active+dd{显示:block;}/*激活二级菜单点餐时把箭头翻过来*/.bui-foldmenu>.active.icon-foldmenu{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);}内容标签在样式中默认是隐藏的(dt与相邻的dd)由控件初始化，其他都是一些装饰。设置激活状态后，箭头会翻转。控制脚本1.5.4增加了bui.extend方法，可以用来扩展插件，和原来使用bui的方法是一样的。bui.extend控件参数是一个对象，包含以下参数namestring控件名称configobjectcontroldefaultparametercallbackfunctioncontrollogic最简单版本//最简单版本bui.extend({name:"foldmenu",config:{id:""},callback:function(opt){//指向插件抛出的public方法，optionwidget等letthat=this;//this.config是已经和初始化合并的parametersResult;letparam=this.config;//缓存选择器let$id=null;//抛给开发者的方法that.init=function(option){//合并直接调用init方法的参数param=$.extend(true,{},param,option);//单页多页选择器，如果是单页，这个插件只能在module中使用，不能在bui.ready$id中使用=bui.$(param.id);//绑定事件，点击时添加激活样式$id.children("dt").click(function(e){varhasActive=$(this).hasClass("active");如果(hasActive){$(this).removeClass("active");}else{//添加样式后，会自动显示和处理箭头和下一级；$(this).addClass("活动");}})返回那个；}//如果有依赖的bui控件，应该写在这里，方便外部调用//that.widgets.loading=ui.loading({//appendTo:opt.id//});//如果需要销毁生命周期，在这里添加。//that.beforeDestroy=function(){////返回那个；//}//mustPassidif(!param.id){//抛出错误bui.showLog("Theidparametermustbepassed.")returnthat;}//默认初始化一次returnthis.init(opt);}});控制使用

content

menu2

Content2

//初始化varuiFloder=bui.foldmenu({id:"#folder"})//uiFloder.config可以获取部分实例的参数。插件预览在线预览bui.folder插件完美插件使用闭包防止全局污染。放在一个闭包中，可以防止control被污染，window.libs指的是zepto或者jquery，去掉zepto.js，importjquery.js可以完美切换到jquery版本。（推荐的jquery版本：1.9.x-1.11.x）；(function(ui,$){"usestrict";})(window.bui||{},window.libs);添加注释/*@namespacebui*@classfoldmenu*@constructor*@param{object}option*@param{string}option.id[controlid]*@param{string}[option.handle][areaclicked]*@param{number}[option.height][父层高度，0为自适应]*@param{string}[option.target][显示隐藏目标]*@param{number}[option.targetHeight][目标自适应heightorlimitheight]*@param{boolean}[option.single][false(显示多个)||true(一次只折叠一个)]*@param{function}[option.onInited][1.5.1新初始化后触发]*@param{function}[option.callback][按钮点击回调]*@example**/fullversion;(function(ui,$){"usestrict";/*@namespacebui*@classfoldmenu*@constructor*@param{object}选项*@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){//指向插件、选项小部件等抛出的公共方法。让那个=this;//this.config是合并初始化参数的结果;letparam=this.config;//缓存选择器let$id=null;//抛给开发者的方法that.init=function(option){//合并直接调用init方法的参数param=$.ext结束（真，{}，参数，选项）；//单页多页选择器，如果是单页，这个插件只能在模块中使用，不能在bui.ready中使用$id=ui.$(param.id);//绑定事件，点击时添加激活样式$id.children("dt").click(function(e){varhasActive=$(this).hasClass("active");if(hasActive){$(this).removeClass("active");}else{//添加样式后，会自动显示箭头和下一层；$(this).addClass("active");}})returnthat;}//如果有依赖的bui控件，应该写在这里，方便外部调用//that.widgets.loading=ui.loading({//appendTo:opt.id//});//如果需要销毁生命周期，在这里添加。//that.beforeDestroy=function(){////返回那个；//}//必须传递idif(!param.id){//抛出错误ui.showLog("Theidparametermustbepassed.")returnthat;}//默认初始化一次returnthis.init(opt);}});})(window.bui||{},window.libs);结语上面我们举例说明了最简单的插件的开发和使用，但是插件的适配性还不够，我们还需要考虑各种扩展性，如何适配复杂的场景，比如内容需要固定高度，换了selector，只显示一个，不能满足其他要求。我们需要考虑更多的场景，提取更多的可配置变量。

上一篇：一个UI设计师的Electron学习之路（一）

下一篇：前端日常实践：88#视频演示如何使用CSS和D3制作火焰动画

写一个BUI折叠菜单插件相关文章