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