BUI

其它版本:

API for BUI 1.6.x

Show:

bui.dropdown Class

Module: UI

下拉菜单

下拉的菜单默认是相对于页面宽度的,当你需要相对按钮宽度时,relative改为false;下拉菜单可以选中不修改值,一般在点击的时候触发,也可以控制小三角的显示,具体可以查看demo.

预览地址: demo

方法说明:

active: 初始化显示第几个二级菜单的值
value: 不传参则获取,传参则设置
text: 不传参则获取文本,传参则设置文本
hide: 隐藏二级菜单
show: 显示二级菜单
hideAll: 隐藏所有二级菜单
option: 获取设置参数
widget: 获取依赖控件
控件预览

Constructor

bui.dropdown

(
  • option
)

Parameters:

  • option Object
    • id String

      [控件id]

    • [handle] String optional

      一级菜单的按钮

    • [handleChildren] String optional

      文本值的位置

    • [data] 1.5新增, [{name:"",value:""}] Array optional
    • [value] String optional

      1.5新增, 初始化第一个值

    • [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属性设置,权限会更高

    • [onBeforeInit] Function optional

      1.5.1新增 初始化前触发

    • [onInited] Function optional

      1.5.1新增 初始化以后触发

    • [onChange] Function optional

      1.5.4新增 只有数据改变才会触发

    • [callback] Function optional

      点击按钮的回调,第一个参数是自己的引用

Example:

html:

js: // 初始化 var uiDropdown = bui.dropdown({ id: "#dropdown", data: [{name:"分享",value:"share"}], })

       // 自定义模板初始化
                                            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;
                                                }
                                            })
                                    

Methods

active

(
  • [index]
)

Defined in src/scripts/ui/bui.dropdown.js:467

Available since 1.3.0

设置某一个二级菜单的值

Parameters:

  • [index] Number optional

    第几个二级菜单

Example:

       //设置值
                                                       uiDropdown.active(1);
                                                

destroy

(
  • [bool]
)

Defined in src/scripts/ui/bui.dropdown.js:629

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] Boolean optional

    默认: false 销毁部分 | true 销毁全部

Example:

       //销毁
                                                       uiDropdown.destroy();
                                                

disabled

() chainable

Defined in src/scripts/ui/bui.dropdown.js:595

Available since 1.4

阻止触发

Example:

       uiDropdown.disabled();
                                                

enabled

() chainable

Defined in src/scripts/ui/bui.dropdown.js:612

Available since 1.4

允许触发

Example:

       uiDropdown.enabled();
                                                

hide

()

隐藏二级菜单

Example:

       //隐藏二级菜单
                                                       uiDropdown.hide();
                                                

hideAll

()

隐藏所有二级菜单

Example:

      //显示二级菜单
                                                      uiDropdown.hideAll();
                                                

init

(
  • [option]
)
chainable

初始化方法,用于重新初始化结构,事件只初始化一次

Parameters:

  • [option] Object optional

    参数控件本身

option

(
  • [key]
  • [value]
)
chainable

获取设置参数

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} );
                                                

reset

()

Defined in src/scripts/ui/bui.dropdown.js:451

Available since 1.5.1

重置下拉的选择

Example:

       uiDropdown.reset();
                                                

show

()

显示二级菜单

Example:

       //显示二级菜单
                                                       uiDropdown.show();
                                                

text

(
  • [text]
)

设置或者获取文本

Parameters:

  • [text] String optional

    设置文本

Example:

       //设置文本
                                                       uiDropdown.text("广东省");
                                                
                                                       //获取文本
                                                       var val = uiDropdown.text();
                                                

value

(
  • [text]
)

1.5.1 支持 设置值或者文本, 或者获取值

Parameters:

  • [text] String optional

    设置的值, name 或者 value 的值

Example:

       //设置值
                                                       uiDropdown.value("10");
                                                
                                                       //获取值
                                                       var val = uiDropdown.value();
                                                

values

() Object

Defined in src/scripts/ui/bui.dropdown.js:433

Available since 1.5.1

返回一个选中的对象

Returns:

Object:

{name:"",value:""}

Example:

       //设置值
                                                       var vals = uiDropdown.values();
                                                       // {name:"",value:""}
                                                

widget

(
  • [name]
)

获取依赖的控件

Parameters:

  • [name] String optional

    依赖控件名

Example:

       //获取依赖控件
                                                       var uiDropdownWidget = uiDropdown.widget();
                                                

Events

off

Defined in src/scripts/ui/bui.dropdown.js:721

Available since 1.3.0

为控件取消绑定事件

Event Payload:

  • [type] 事件类型: "show" | "hide" | "change" [文本值改变的时候] String optional
  • [callback] Function optional

    绑定的事件, this 为当前点击的菜单

Example:

       uiDropdown.off("show");
                                                

on

Defined in src/scripts/ui/bui.dropdown.js:700

Available since 1.3.0

为控件绑定事件

Event Payload:

  • [type] 事件类型: "show" | "hide" | "change" [文本值改变的时候] String optional
  • [callback] Function optional

    绑定的事件, this 为当前点击的菜单

Example:

       uiDropdown.on("show",function () {
                                                           // 点击的菜单
                                                           console.log(this);
                                                       });