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

    • [uid] String optional

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

    • [trigger] String optional

      点击触发侧滑的按钮

    • [swipe] Boolean optional

      1.6.6新增 默认 true(允许滑动) | false

    • [handle] String optional

      滑动区域,默认: ".bui-page"

    • [stopHandle] Boolean optional

      禁止操作滑动的元素,默认: ""

    • [handleMove] Boolean optional

      是否允许操作区域滑动,默认: true|false

    • [swipeleft] String optional

      往左滑出来的菜单, 默认: ".swipeleft"

    • [swiperight] String optional

      往右滑出来的菜单, 默认: ".swiperight"

    • [width] Number optional

      默认宽度280

    • [autoClose] Boolean optional

      1.6.6 默认 true (滑动时超出屏幕会自动关闭，用于修复手机端bug) | false

    • [height] Number optional

      菜单的高度 0为自适应

    • [handleMove] Boolean optional

      handle是否移动 默认 true | false

    • [opacity] Number optional

      遮罩透明度 默认 0.1

    • [zoom] Boolean optional

      保持比例缩放 默认 true | false

    • [onBeforeInit] Function optional

      1.5.1新增 初始化前触发

    • [onInited] Function optional

      1.5.1新增 初始化以后触发

    • [distance] Number optional

      默认40, 拖拽大于distance才会生效,配合delay可以防止slide又有上下其它事件

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

Events

Methods

close

() chainable

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

关闭菜单

Example:

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

destroy

(
  • [bool]
)

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

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

       //销毁
                                                       uiSidebar.destroy();

init

(
  • [option]
)
chainable

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

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

Parameters:

  • [option] Object optional

    参数控件本身

isActive

() Boolean deprecated

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

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

Returns:

Boolean:

[ 打开为 true | false ]

Example:

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

lock

() chainable

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

不允许滑动

Example:

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

open

(
  • option
)
chainable

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

Available since 1.3.0

打开菜单

Parameters:

  • option Object
    • [target] String optional

      打开侧滑的方向, 默认: "swiperight"(在左边的菜单) | "swipeleft"(在右边的菜单)

    • [transition] String optional

      打开是否需要动画, 默认 300 毫秒, 不需要动画则设置为 "none"

Example:

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

option

(
  • [key]
  • [value]
)
chainable

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

获取设置参数

Parameters:

  • [key] String | object optional

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

  • [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:319

允许滑动

Example:

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

widget

(
  • [name]
)

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

获取依赖的控件

Parameters:

  • [name] String optional

    依赖控件名

Example:

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

Events

off

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

Available since 1.3.0

为控件取消绑定事件

Event Payload:

  • [type] String optional

    事件类型: "open" | "close"

  • [callback] Function optional

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

Example:

       uiSidebar.off("lock");

on

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

Available since 1.3.0

为控件绑定事件

Event Payload:

  • [type] String optional

    事件类型: "open" | "close"

  • [callback] Function optional

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

Example:

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