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


Posted in HTML / CSS onSeptember 11, 2019

写一个BUI折叠菜单插件效果预览

html5写一个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);

结语

上面我们示例了一个最简单的插件的开发及使用, 但插件的适应性还不够, 还需要考虑各种扩展性,复杂的场景如何去适应, 比方内容是需要固定高度,选择器换成其它,只展示一个,等各种需求都不能满足, 我们需要考虑更多的场景, 抽取更多的变量作为可配置.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 #HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 #HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 #HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 #HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 #HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 #HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 #HTML / CSS
You might like
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
PHP精确计算功能示例
2016/11/29 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
老生常谈js数据类型
2017/08/03 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
python实现归并排序算法
2018/11/22 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
物流管理应届生求职信
2013/11/07 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
《白鹅》教学反思
2014/04/13 职场文书
铁路安全反思材料
2014/12/24 职场文书
护士节慰问信
2015/02/15 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
任命书格式范文
2015/09/22 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android