bui.dropdown Class
Constructor
bui.dropdown
(
-
option
Parameters:
-
optionObject-
idString[控件id]
-
[handle] [一级菜单的按钮]String optional -
[handleChildren] [文本值的位置]String optional -
[data] [1.5新增, [{name:"",value:""}]]Array optional -
[value] [1.5新增, 初始化第一个值]String optional -
[target] [二级菜单,默认是按钮的下一个]String optional -
[targetHandle] [二级菜单的按钮,点击触发callback]String optional -
[width] [ 二级菜单的宽度,一级自适应宽度]Number optional -
[showArrow] [ 是否显示箭头]Boolean optional -
[showActive] [ 是否显示选中的高亮效果]Boolean optional -
[relative] [ true相对于屏幕两边 false相对于父层]Boolean optional -
[change] [ true修改文本, false只是做选择操作,可以通过change属性定义]Boolean optional -
[autoClose] [ 1.4.5新增,点击二级菜单的时候自动关闭, 默认:true | false]Boolean optional -
[stopPropagation] [ 1.4.5新增,点击二级菜单的时候自动关闭, 默认:true | false]Boolean optional -
[position] [ 显示的位置 bottom | top | left | right 也可以通过position属性设置,权限会更高]String optional -
[onBeforeInit] [ 1.5.1新增 初始化前触发]Function optional -
[onInited] [ 1.5.1新增 初始化以后触发]Function optional -
[onChange] [ 1.5.4新增 只有数据改变才会触发]Function optional -
[callback] [ 点击按钮的回调,第一个参数是自己的引用]Function optional
-
Example:
html:
下拉菜单
// 自定义模板初始化
var uiDropdown = bui.dropdown({
id: "#dropdown",
data: [{name:"分享",value:"share"}],
template: function (data) {
var html = '';
html += '<ul class="bui-list">'
data && data.forEach(function(el, index) {
html += '<li class="bui-btn" value="' + el.value + '">' + el.name + '</li>';
})
html += '</ul>'
return html;
}
})
Item Index
Methods
Methods
active
(
-
[index] [第几个二级菜单]
设置某一个二级菜单的值
Parameters:
-
[index] [第几个二级菜单]Number optional
Example:
//设置值
uiDropdown.active(1);
destroy
(
-
[bool] [ 默认: false 销毁部分 | true 销毁全部]
[销毁控件]
Parameters:
-
[bool] [ 默认: false 销毁部分 | true 销毁全部]Boolean optional
Example:
//销毁
uiDropdown.destroy();
disabled
()
chainable
阻止触发
Example:
uiDropdown.disabled();
enabled
()
chainable
允许触发
Example:
uiDropdown.enabled();
hide
()
隐藏二级菜单
Example:
//隐藏二级菜单
uiDropdown.hide();
hideAll
()
隐藏所有二级菜单
Example:
//显示二级菜单
uiDropdown.hideAll();
init
(
chainable
-
[option] [参数控件本身]
初始化方法,用于重新初始化结构,事件只初始化一次
Parameters:
-
[option] [参数控件本身]Object optional
option
(
chainable
-
[key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数] -
[value] [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传]
获取设置参数
Parameters:
-
[key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数]String | object optional -
[value] [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传]String | number | boolean | function optional
Example:
//获取所有参数
var option = uiDropdown.option();
//获取某个参数
var id = uiDropdown.option( "id" );
//修改一个参数
uiDropdown.option( "width",200 );
//修改多个参数
uiDropdown.option( {"width":200} );
reset
()
重置下拉的选择
Example:
uiDropdown.reset();
show
()
显示二级菜单
Example:
//显示二级菜单
uiDropdown.show();
text
(
-
[text] [设置文本]
设置或者获取文本
Parameters:
-
[text] [设置文本]String optional
Example:
//设置文本
uiDropdown.text("广东省");
//获取文本
var val = uiDropdown.text();
value
(
-
[text] [设置的值, name 或者 value 的值]
1.5.1 支持 设置值或者文本, 或者获取值
Parameters:
-
[text] [设置的值, name 或者 value 的值]String optional
Example:
//设置值
uiDropdown.value("10");
//获取值
var val = uiDropdown.value();
values
()
Object
返回一个选中的对象
Returns:
Object:
{name:"",value:""}
Example:
//设置值
var vals = uiDropdown.values();
// {name:"",value:""}
widget
(
-
[name] [ 依赖控件名]
获取依赖的控件
Parameters:
-
[name] [ 依赖控件名]String optional
Example:
//获取依赖控件
var uiDropdownWidget = uiDropdown.widget();
Events
off
为控件取消绑定事件
Event Payload:
-
[type] [ 事件类型: "show" | "hide" | "change" [文本值改变的时候]]String optional -
[callback] [ 绑定的事件, this 为当前点击的菜单]Function optional
Example:
uiDropdown.off("show");
on
为控件绑定事件
Event Payload:
-
[type] [ 事件类型: "show" | "hide" | "change" [文本值改变的时候]]String optional -
[callback] [ 绑定的事件, this 为当前点击的菜单]Function optional
Example:
uiDropdown.on("show",function () {
// 点击的菜单
console.log(this);
});