value: ["广州", "上海"],
//如果需要点击再进行操作,增加按钮
buttons: [{ name: "重置", className: "" }, { name: "确定", className: "primary-reverse" }],
callback: function(e) {
var text = $(e.target).text();
if (text == "重置") {
uiSelect.selectNone();
} else {
uiSelect.hide();
template: function(data) {
var html = '';
// 1.5.2 需要加这行, 1.5.2 以前,这行是不需要的, 正常不需要自己自定义模板.
html += '
';
data.forEach(function(item, i) {
if (item.type) {
html +=
<div class="bui-btn bui-btn-title">${item.name}</div>
} else {
html += `<div class="bui-btn bui-btn-line bui-box">
<i class="icon-face"></i>
<div class="span1">${item.name}</div>
<input type="checkbox" name="test" class="bui-choose" value="${item.value}" text="${item.name}">
</div>`
html += '</div>';
return html;
例子3: 静态绑定--全屏选择列表分组示例
html:
<div id="select" class="bui-select bui-box">
<div class="span1">请选择区域</div>
<i class="icon-listright"></i>
<!-- select 静态弹出自定义框 放在body层-->
<div id="select-dialog" class="bui-dialog" style=";">
<div class="bui-dialog-head bui-box-align-middle">
<div class="span1">请选择区域</div>
<div id="close" class="bui-btn primary round">确定</div>
<div class="bui-dialog-main">
<div class="bui-list">
<div class="bui-btn-title">
<div class="bui-btn bui-btn-line bui-box">
<i class="icon-face"></i>
<div class="span1">广东</div>
<input type="checkbox" class="bui-choose" value="11" text="广东">
<div class="bui-btn bui-btn-line bui-box">
<i class="icon-face"></i>
<div class="span1">广西</div>
<input type="checkbox" class="bui-choose" value="22" text="广西">
var uiSelect2 = bui.select({
id:"#select-dialog",
trigger:"#select",
type:"checkbox",
effect: "fadeInRight",
position: "left",
fullscreen: true,
buttons: []
// 绑定关闭
$("#close").on("click",function (argument) {
uiSelect2.hide();
