BUI

其它版本:

API for BUI 1.4.8

Show:

bui.sidebar Class

Defined in: /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.sidebar.js:8
Module: UI

侧滑栏

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

预览地址: demo

方法说明:

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

Constructor

bui.sidebar

(
  • option
)

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.sidebar.js:8

Parameters:

  • option Object
    • id String

      [控件id]

    • [trigger] String optional

      [点击触发侧滑的按钮]

    • [handle] String optional

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

    • [swipeleft] String optional

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

    • [swiperight] String optional

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

    • [width] Number optional

      [默认宽度280]

    • [height] Number optional

      [ 菜单的高度 0为自适应 ]

    • [zoom] Boolean optional

      [ 保持比例缩放 默认 true | false]

    • [distance] Number optional

      [ 默认80, 拖拽大于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

Methods

Events

Methods

close

() chainable

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.sidebar.js:232

关闭菜单

Example:

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

destroy

(
  • [bool]
)

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.sidebar.js:318

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

       //销毁
       uiSidebar.destroy();

init

(
  • [option]
)
chainable

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.sidebar.js:106

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

Parameters:

  • [option] Object optional

    [参数控件本身]

isActive

() Boolean deprecated

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.sidebar.js:287

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

Returns:

Boolean:

[ 打开为 true | false ]

Example:

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

lock

() chainable

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.sidebar.js:249

不允许滑动

Example:

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

open

(
  • option
)
chainable

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.sidebar.js:209

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 /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.sidebar.js:358

获取设置参数

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 /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.sidebar.js:268

允许滑动

Example:

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

widget

(
  • [name]
)

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.sidebar.js:343

获取依赖的控件

Parameters:

  • [name] String optional

    [ 依赖控件名 ]

Example:

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

Events

off

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.sidebar.js:406

Available since 1.3.0

为控件取消绑定事件

Event Payload:

  • [type] String optional

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

  • [callback] Function optional

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

Example:

         uiSidebar.off("lock");

on

Defined in /Users/wilson/personal/htdocs/opensource/BUI 1.4.7/src/lib/ui/bui.sidebar.js:386

Available since 1.3.0

为控件绑定事件

Event Payload:

  • [type] String optional

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

  • [callback] Function optional

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

Example:

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