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

写一个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;
}								 
 1/4    1 2 3 4 下一页 尾页