下拉菜单
  • 列表1
  • 列表2
  • 列表1
  • 列表2

1. 结合搜索条件示例

示例:

html:

<div id="uiSearchbar" class="bui-searchbar"> <div class="bui-input"> <div id="searchDropdown" class="bui-dropdown bui-arrow-center" style="width:120px"> <div class="bui-btn bui-box"> <div class="span1">条件</div> <i class="icon-dropdown"></i> </div> <ul class="bui-list round"> <li class="bui-btn" value="11">列表1</li> <li class="bui-btn" value="22">列表2</li> </ul> </div> <input type="text" placeholder="请输入关键字搜索" value=""> <i class="icon-search"></i> </div> </div>

js:

//搜索下拉菜单 var searchDropdown = bui.dropdown({ id: "#searchDropdown", //设置relative为false,二级菜单继承父层宽度 relative: false, callback: function () { console.log( searchDropdown.value() ) } })

2. 结合遮罩示例

示例:

html:

<div id="uiDropdown" class="bui-dropdown"> <div class="bui-btn bui-box"> <div class="span1">普通下拉菜单</div> <i class="icon-dropdown"></i> </div> <ul class="bui-list"> <li class="bui-btn" value="11"> 列表1 </li> <li class="bui-btn" value="22"> 列表2 </li> </ul> </div>

js:

// 下拉菜单有遮罩的情况 var uiMask = bui.mask({ autoTrigger:false, appendTo:"#main", zIndex:9 }); var uiDropdown = bui.dropdown({ id: "#uiDropdown" }); // 通过监听事件绑定 uiDropdown.on("show",function () { uiMask.show(); }) uiDropdown.on("hide",function () { uiMask.hide(); })

3. 在结合bui-bar示例

示例:

html:

<div class="bui-bar"> <div class="bui-bar-left" style="overflow:visible"> <div id="barLeft2" class="bui-dropdown" change="false"> <div class="bui-btn bui-box-center"><i class="icon-dropdown"></i></div> <ul class="bui-list round"> <li class="bui-btn" value="11">列表1</li> <li class="bui-btn" value="22">列表2</li> </ul> </div> </div> <div class="bui-bar-main"> <div id="barMain2" class="bui-dropdown bui-arrow-center"> <div class="bui-btn"><span class="span1">下拉菜单</span><i class="icon-dropdown"></i></div> <ul class="bui-list round"> <li class="bui-btn" value="11">列表1</li> <li class="bui-btn" value="22">列表2</li> </ul> </div> </div> <div class="bui-bar-right" style="overflow:visible"> <div id="barRight2" class="bui-dropdown" change="false"> <div class="bui-btn bui-box-center"><i class="icon-dropdown"></i></div> <ul class="bui-list round"> <li class="bui-btn" value="11">列表1</li> <li class="bui-btn" value="22">列表2</li> </ul> </div> </div> </div>

js:

//下拉菜单 在顶部右边 var barRight = bui.dropdown({ id: "#barRight", showArrow: true, width: 200 }); //下拉菜单 在顶部左边 var barLeft = bui.dropdown({ id: "#barLeft", showArrow: true, width: 200 }) //下拉菜单 在顶部中间 var barMain = bui.dropdown({ id: "#barMain", showArrow: true, relative: false })