界面如下：
初始狀態(tài)
點擊后彈出
選中后
打印選中數(shù)據(jù)集合的對象
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>BUI示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/buijs/lib/zepto.js"></script>
<script src="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.js"></script>
<style>
.bui-fluid-space-3 {
padding-top: .2rem;
}
.bui-fluid-space-3 .bui-check {
margin-bottom: .2rem;
}
.bui-fluid-space-3 .bui-check i{
margin-right: .1rem;
}
.popupBtn [class*=bui-btn]{
border-radius: .1rem;
padding-top: .2rem;
padding-bottom: .2rem;
}
.bui-actionsheet {
max-height: 100%;
overflow-y: auto;
bottom: auto;
}
[class*=bui-btn].primary {
border-color: #39a4ff;
color: white;
}
.bui-list>[class*=bui-btn]{
padding-top: 0;
padding-bottom: 0;
border-bottom: 0;
background-color: transparent;
}
</style>
</head>
<body>
<div class="bui-page">
<header class="bui-bar">
<div class="bui-bar-left">
<a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
</div>
<div class="bui-bar-main">彈出菜單</div>
<div class="bui-bar-right">
</div>
</header>
<main>
<div class="container-xy">
<div id="btnOpen2" class="bui-btn"><i class="icon-share"></i>更多條件</div>
</div>
</main>
</div>
<!-- 自定義彈出菜單結(jié)構(gòu) -->
<div id="actionsheet" class="bui-actionsheet actionsheet-custom" style="display: none">
<div class="section-title">自定義單選</div>
<div id="sinSelect1" class="selectList selectList1">
</div>
<div class="section-title">自定義單選2</div>
<div id="sinSelect2" class="selectList selectList2">
</div>
<div class="section-title">自定義多選</div>
<div id="sinSelect3" class="selectList selectList3">
</div>
<div class="section-title">自定義多選2</div>
<div id="sinSelect4" class="selectList selectList3">
</div>
<div class="container-y">
<div class="bui-box-space popupBtn">
<div class="span1"><div id="selectNone" class="bui-btn">重置</div></div>
<div class="span1"><div id="submit" class="bui-btn primary">確定</div></div>
</div>
</div>
</div>
<script>
var $$={};
bui.ready(function() {
//自定義彈出菜單初始化
var dialog = bui.dialog({
id: "#actionsheet",
position:"top",
effect:"fadeInDown",
onMask: function (argument) {
dialog.close();
}
});
$('#btnOpen2').on("click",function (argument) {
dialog.open();
});
var sinSelect = (function (window) {
var sinSelect = function (Sid, name, data, type) {
return new sinSelect.fn.init(Sid, name, data, type);
}
sinSelect.fn = sinSelect.prototype = {
constructor: sinSelect,
init: function (Sid, name, data, type) {
this.Sid = Sid;
this.name = name;
this.data = data;
this.type = type;
this.sinSelectList = bui.select({
id: Sid,
popup: false,
type: type,
data: data,
template: function (data) {
var html = '';
// 1.5.2 需要加這行, 1.5.2 以前,這行是不需要的, 正常不需要自己自定義模板.
html += '<div class="bui-list bui-list-select bui-fluid-space-3">';
if (type == "radio") {
data.forEach(function (item, i) {
html += '<div class="span1 bui-btn">';
html += '<input type="radio" class="bui-check" name=' + name + ' check="' + item.name + '" uncheck="' + item.name + '" value="' + item.value + '">';
html += '</div>';
});
}
if (type == "checkbox") {
data.forEach(function (item, i) {
html += '<div class="span1 bui-btn">';
html += '<input type="checkbox" class="bui-check" name="' + name + '" check="' + item.name + '" uncheck="' + item.name + '" value="' + item.value + '">';
//html += '<input id="'+item.value+'" type="checkbox" value="'+item.value+'" text="'+item.name+'" name="chongzhi3"><label for="'+item.value+'"><i class="icon-home"></i>'+item.name+'</label>';
html += '</div>';
});
}
html += '</div>';
return html;
}
});
/*this.reset = function() {
console.log(this.sinSelectList);
//this.resetSel();
this.sinSelectList.selectNone();
}*/
},
getValue: function () {
var name_ = this.name;
var value_ = this.sinSelectList.value();
var data = {};
data[name_] = value_;
return value_;
},
getText:function(){
var text_ = this.sinSelectList.text();
return text_;
},
getName: function () {
return this.name;
},
reset: function () {
this.sinSelectList.selectNone();
}
}
sinSelect.fn.init.prototype = sinSelect.fn;
return sinSelect;
})();
var sinData = [
{"name": "50元", "value": "50"},
{"name": "100元", "value": "100"},
{"name": "200元", "value": "200"},
{"name": "500元", "value": "500"},
{"name": "1000元", "value": "1000"}
],
sinData2 = [
{"name": "5元", "value": "5"},
{"name": "1元", "value": "1"},
{"name": "2元", "value": "2"},
{"name": "50元", "value": "50"},
{"name": "10元", "value": "10"}
],
multiData = [
{"name": "廣東", "value": "11"},
{"name": "廣西", "value": "22"},
{"name": "上海", "value": "33"},
{"name": "北京", "value": "44"},
{"name": "深圳", "value": "55"},
{"name": "南京", "value": "66"}
],
multiData2 = [
{"name": "廣東1", "value": "11"},
{"name": "廣西1", "value": "22"},
{"name": "上海1", "value": "33"},
{"name": "北京1", "value": "44"},
{"name": "深圳1", "value": "55"},
{"name": "南京1", "value": "66"}
];
var sinSelect1 = sinSelect('#sinSelect1', "test1", sinData, "radio"),
sinSelect2 = sinSelect('#sinSelect2', "test2", sinData2, "radio"),
sinSelect3 = sinSelect("#sinSelect3", "test3", multiData, "checkbox"),
sinSelect4 = sinSelect("#sinSelect4", "test4", multiData2, "checkbox");
$("#selectNone").on("click", function (arg) {
$(".selectList").each(function (i, e) {
var id = e.id;
var sinSelectid = eval(id);
sinSelectid.reset();
})
});
$("#submit").on("click", function (arg) {
var subData = {};
$(".selectList").each(function (i, e) {
var id = e.id;
//var sinSelectid = window[id];
var sinSelectid = eval(id)
var name_ = sinSelectid.getName(), value_ = sinSelectid.getValue(),text_=sinSelectid.getText();
subData[name_] = value_;
console.log(text_);
})
console.log(subData);
dialog.close();
});
})
</script>
</body>
</html>
主要用到了bui.select的初始化，text()锦针， value()和selectNone()方法
