BUI

其它版本:

API for BUI 1.6.x

Show:

bui.sidebar Class

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

侧滑栏

侧滑栏,也叫抽屉菜单, bui.sidebar滑动出来的内容是什么,完全由你自己自定义,你也可以控制菜单在左边还是右边,也可以同时左右都有.

预览地址: demo

方法说明:

isActive: 当前是否激活
open: 打开侧滑栏
close: 关闭侧滑栏
lock: 不允许滑动
unlock: 允许滑动
option: 获取设置参数
widget: 获取依赖控件
控件预览

Constructor

bui.sidebar

(
  • option
)

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

Parameters:

  • option Object
    • id String

      [控件id]

    • [trigger] [点击触发侧滑的按钮] String optional
    • [handle] [滑动区域,默认: ".bui-page"] String optional
    • [handleMove] [是否允许操作区域滑动,默认: true|false] Boolean optional
    • [swipeleft] [往左滑出来的菜单, 默认: ".swipeleft"] String optional
    • [swiperight] [往右滑出来的菜单, 默认: ".swiperight"] String optional
    • [width] [默认宽度280] Number optional
    • [height] [ 菜单的高度 0为自适应] Number optional
    • [handleMove] [ handle是否移动 默认 true | false] Boolean optional
    • [opacity] [ 遮罩透明度 默认 0.1] Number optional
    • [zoom] [ 保持比例缩放 默认 true | false] Boolean optional
    • [onBeforeInit] [ 1.5.1新增 初始化前触发] Function optional
    • [onInited] [ 1.5.1新增 初始化以后触发] Function optional
    • [distance] [ 默认40, 拖拽大于distance才会生效,配合delay可以防止slide又有上下其它事件] Number optional

Example:

html:

       <div id="sidebar" class="bui-sidebar-wrap">
                                         <div class="bui-sidebar swiperight">
                                           <!-- 侧滑菜单 -->
                                         </div>
                                         <div id="page" class="bui-page">
                                           <a id="menu" class="bui-btn"><i class="icon-menu"></i></a>
                                           <!-- 正文内容 -->
                                         </div>
                                       </div>

js:

       // 初始化
                                       var uiSidebar = bui.sidebar({
                                             id: "#sidebar",
                                             trigger: "#menu"
                                           })

Item Index

Methods

Events

Methods

close

() chainable

Defined in src/scripts/ui/bui.sidebar.js:257

关闭菜单

Example:

       //关闭菜单
                                                   uiSidebar.close();

destroy

(
  • [bool] [ 默认: false 销毁部分 | true 销毁全部]
)

Defined in src/scripts/ui/bui.sidebar.js:343

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] [ 默认: false 销毁部分 | true 销毁全部] Boolean optional

Example:

       //销毁
                                                   uiSidebar.destroy();

init

(
  • [option] [参数控件本身]
)
chainable

Defined in src/scripts/ui/bui.sidebar.js:121

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

Parameters:

  • [option] [参数控件本身] Object optional

isActive

() Boolean deprecated

Defined in src/scripts/ui/bui.sidebar.js:312

是否打开 已弃用,直接判断 active() 对象是否为null就可以了

Returns:

Boolean:

[ 打开为 true | false ]

Example:

      //是否打开
                                                  var isActive = uiSidebar.isActive();

lock

() chainable

Defined in src/scripts/ui/bui.sidebar.js:274

不允许滑动

Example:

       //关闭菜单
                                                   uiSidebar.lock();

open

(
  • option
)
chainable

Defined in src/scripts/ui/bui.sidebar.js:234

Available since 1.3.0

打开菜单

Parameters:

  • option Object
    • [target] [打开侧滑的方向, 默认: "swiperight"(在左边的菜单) | "swipeleft"(在右边的菜单)] String optional
    • [transition] [打开是否需要动画, 默认 300 毫秒, 不需要动画则设置为 "none"] String optional

Example:

       //显示菜单
                                                   uiSidebar.open();

option

(
  • [key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数]
  • [value] [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传]
)
chainable

Defined in src/scripts/ui/bui.sidebar.js:383

获取设置参数

Parameters:

  • [key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数] String | object optional
  • [value] [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传] String | number | boolean | function optional

Example:

       //获取所有参数
                                                    //获取所有参数
                                                   var option = uiSidebar.option();
                                            
                                                   //获取某个参数
                                                   var id = uiSidebar.option( "id" );
                                            
                                                   //修改一个参数
                                                   uiSidebar.option( "fullHeight",false );
                                            
                                                   //修改多个参数
                                                   uiSidebar.option( {"fullHeight":false} );

unlock

() chainable

Defined in src/scripts/ui/bui.sidebar.js:293

允许滑动

Example:

      //关闭菜单
                                                  uiSidebar.unlock();

widget

(
  • [name] [ 依赖控件名]
)

Defined in src/scripts/ui/bui.sidebar.js:368

获取依赖的控件

Parameters:

  • [name] [ 依赖控件名] String optional

Example:

      //获取依赖控件
                                                  var uiSidebarWidget = uiSidebar.widget();

Events

off

Defined in src/scripts/ui/bui.sidebar.js:431

Available since 1.3.0

为控件取消绑定事件

Event Payload:

  • [type] [ 事件类型: "open" | "close"] String optional
  • [callback] [ 绑定的事件, this 为当前点击的菜单] Function optional

Example:

       uiSidebar.off("lock");

on

Defined in src/scripts/ui/bui.sidebar.js:411

Available since 1.3.0

为控件绑定事件

Event Payload:

  • [type] [ 事件类型: "open" | "close"] String optional
  • [callback] [ 绑定的事件, this 为当前点击的菜单] Function optional

Example:

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