BUI

其它版本:

API for BUI 1.5.3

Show:

bui.dropdown Class

下拉菜单

下拉的菜单默认是相对于页面宽度的,当你需要相对按钮宽度时,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] Array optional

      [1.5新增, [{name:"",value:""}] ]

    • [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新增 初始化以后触发 ]

    • [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]
)

设置某一个二级菜单的值

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]
)
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

()

重置下拉的选择

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

返回一个选中的对象

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