Show:

bui.actionsheet Class

Defined in: src/scripts/ui/bui.actionsheet.js:9
Module: UI

弹出菜单

预览地址: demo

方法说明:

hide: 隐藏二级菜单
show: 显示二级菜单
option: 获取设置参数
widget: 获取依赖控件
控件预览

Constructor

bui.actionsheet

(
  • option
)

Defined in src/scripts/ui/bui.actionsheet.js:9

Parameters:

  • option Object
    • buttons Array

      有多少个按钮,是一个数组,例如:[{ name:"分享到微博",value:"weibo" }],还可以有className,自定义每个按钮的样式

    • [uid] String optional

      1.6.6新增，实例的自定义唯一名字，用于命令式调用

    • [trigger] String optional

      触发按钮的id

    • [template] Function optional

      1.5.2新增, 默认null, 按钮模板不满意,可以通过此方法返回新的模板,第一个参数为button的数据

    • [handle] String optional

      点击上面的按钮

    • [position] String optional

      位置 bottom || top

    • [value] String optional

      默认值，可以给按钮加上激活样式active，有buttons的实例才会有效

    • [appendTo] String | Object optional

      1.4.3新增 默认:"body",添加到哪里去,主要配合单页使用

    • [width] Number optional

      默认 "100%" 为自适应

    • [mask] Boolean optional

      是否显示遮罩

    • [opacity] Number optional

      遮罩的透明度 默认:0.3

    • [cancelText] String optional

      取消的文本, 为空则不显示

    • [onBeforeInit] Function optional

      1.5.1新增 初始化前触发

    • [onBeforeOpen] Function optional

      1.7.1新增 初始化前触发

    • [onBeforeClose] Function optional

      1.7.1新增 初始化前触发

    • [onInited] Function optional

      1.5.1新增 初始化以后触发

    • [callback] Function optional

      点击按钮的回调

Example:

html:

       <div id="btnOpen" class="bui-btn">actionsheet</div>

js:

       // 初始化
                                           var uiActionsheet = bui.actionsheet({
                                               trigger: "#btnOpen",
                                               buttons: [{ name:"分享到微博",value:"weibo" },{ name:"分享到微信",value:"weixin" }],
                                               callback: function (e) {
                                    
                                                   var val = $(e.target).attr("value");
                                    
                                                   if( val == "cancel"){
                                                       this.hide();
                                                   }
                                               }
                                           })

Item Index

Events

Methods

active

(
  • index
)

Defined in src/scripts/ui/bui.actionsheet.js:264

Available since 1.8.2

设置激活值

Parameters:

  • index Number

    激活第几个按钮

Example:

       //设置选中值
                                                       uiActionsheet.active(0);

destroy

(
  • [bool]
)

Defined in src/scripts/ui/bui.actionsheet.js:374

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

       //销毁
                                                       uiActionsheet.destroy();

disabled

() chainable

Defined in src/scripts/ui/bui.actionsheet.js:335

Available since 1.4

阻止触发

Example:

       uiActionsheet.disabled();

enabled

() chainable

Defined in src/scripts/ui/bui.actionsheet.js:355

Available since 1.4

允许触发

Example:

       uiActionsheet.enabled();

hide

()

Defined in src/scripts/ui/bui.actionsheet.js:281

隐藏菜单

Example:

       //隐藏菜单
                                                       uiActionsheet.hide();

init

(
  • [option]
)
chainable

Defined in src/scripts/ui/bui.actionsheet.js:135

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

Parameters:

  • [option] Object optional

    参数控件本身

option

(
  • [key]
  • [value]
)
chainable

Defined in src/scripts/ui/bui.actionsheet.js:415

获取设置参数

Parameters:

  • [key] String | object optional

    不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数

  • [value] String | number | boolean | function optional

    设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传

Example:

       //获取所有参数
                                                       var option = uiActionsheet.option();
                                                
                                                       //获取某个参数
                                                       var id = uiActionsheet.option( "trigger" );
                                                
                                                       //修改一个参数
                                                       uiActionsheet.option( "width",200 );
                                                
                                                       //修改多个参数
                                                       uiActionsheet.option( {"width":200} );

show

()

Defined in src/scripts/ui/bui.actionsheet.js:308

显示菜单

Example:

       //显示菜单
                                                       uiActionsheet.show();

widget

(
  • [name]
)

Defined in src/scripts/ui/bui.actionsheet.js:398

获取依赖的控件

Parameters:

  • [name] String optional

    依赖控件名

Example:

       //获取依赖控件
                                                       var uiActionsheetWidget = uiActionsheet.widget();

Events

off

Defined in src/scripts/ui/bui.actionsheet.js:475

Available since 1.3.0

为控件取消绑定事件

Event Payload:

  • [type] String optional

    事件类型: "show"(显示菜单时) | "hide"(隐藏菜单时)

  • [callback] Function optional

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

Example:

       uiActionsheet.off("show");

on

Defined in src/scripts/ui/bui.actionsheet.js:455

Available since 1.3.0

为控件绑定事件

Event Payload:

  • [type] String optional

    事件类型: "show"(显示菜单时) | "hide"(隐藏菜单时)

  • [callback] Function optional

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

Example:

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