BUI

其它版本:

API for BUI 1.5.1

Show:

bui.listview Class

侧滑列表

支持动态渲染以及静态渲染, 两种的区别就在于,动态渲染初始化简单, 静态渲染灵活,支持自定义按钮样式,并且支持左右侧滑.

可以同时有左边跟右边菜单,菜单的个数也可以不一样多,留意示例的几种不同效果

预览地址: demo

方法说明:

active: 返回当前激活的对象
bui.listview/open: 打开某一个
close: 关闭所有
lock: 不允许滑动
unlock: 允许滑动
option: 获取设置参数
widget: 获取依赖控件
控件预览

Constructor

bui.listview

(
  • option
)

Parameters:

  • option Object
    • id String

      [控件id]

    • [data] Array optional

      [点击触发侧滑的按钮 例如:[{ "text": "修改", "classname":"btn-blue"}] ]

      • [text] String optional
        [菜单的文本]
      • [classname] String optional
        [菜单的样式]
    • [handle] String optional

      [触发的区域,默认是.bui-btn ]

    • [width] Number optional

      [ listview的宽度,默认:0, 0 为自适应屏幕宽度]

    • [height] Number optional

      [ listview的高度,默认:0, 0 为自适应内容高度]

    • [menuWidth] Number optional

      [菜单总宽度,默认:100]

    • [menuHeight] Number optional

      [ 菜单的高度 默认:0 自适应内容高度 ]

    • [position] String optional

      [ 菜单侧滑的方向 right | left ]

    • [zoom] Boolean optional

      [ since 1.3.0 是否采用缩放宽高的方式 默认 false | true ]

    • [mask] Boolean optional

      [ 遮罩 true ]

    • [distance] Number optional

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

    • [onBeforeInit] Function optional

      [ 1.5.1新增 初始化前触发 ]

    • [onInited] Function optional

      [ 1.5.1新增 初始化以后触发 ]

    • [callback] Function optional

      [ 点击的回调 ]

Example:

html:

 示例结构1: 动态渲染
      <ul id="listview" class="bui-listview">
            <li>
                <div class="bui-btn">
                    菜单
                </div>
            </li>
        </ul>

示例结构2: 禁止渲染
      <ul id="listview" class="bui-listview">
        <!-- 设置status属性可以避免渲染菜单 -->
        <li status="1">
          <div class="bui-btn bui-box">
            <div class="span1">不渲染</div>
            <i class="icon-listright"></i>
          </div>
        </li>
      </ul>

示例结构3: 静态渲染,可以允许左右都有按钮
      <ul id="listview" class="bui-listview">
        <li status="1">
          <div class="bui-btn bui-box" href="pages/ui_controls/bui.listview.html" param='{"id":"123"}'>
            <div class="span1">静态渲染-左右菜单</div>
            <span class="bui-badges">荐</span>
            <i class="icon-listright"></i>
          </div>
          <div class="bui-listview-menu swipeleft" data-moving="240">
              <div class="bui-btn primary">置顶</div>
              <div class="bui-btn primary">修改</div>
              <div class="bui-btn danger">删除</div>
          </div>
          <div class="bui-listview-menu swiperight">
              <div class="bui-btn primary">修改</div>
              <div class="bui-btn danger">删除</div>
          </div>
        </li>
      </ul>

js:

    // 初始化
    var uiListview = bui.listview({ 
            id: "#listview",
            data: [{ "text": "修改", "classname":"btn-blue"},
                    { "text": "删除", "classname":"btn-red"}],
            callback: function (e) {
              var index = $(e.target).text();
                  if( index == "修改" ){
                      //do something
                  }
                  this.close();
            }
        });

Item Index

Events

Methods

active

() Object

获取激活对象

Returns:

Object:

[ swipe对象 ]

Example:

       //是否打开
       var activeUI = uiListview.active();

close

() chainable

关闭菜单

Example:

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

destroy

(
  • [bool]
)

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

       //销毁
       uiListview.destroy();

init

(
  • [option]
)
chainable

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

Parameters:

  • [option] Object optional

    [参数控件本身]

lock

() chainable

不允许滑动

Example:

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

option

(
  • [key]
  • [value]
)
chainable

获取设置参数

Parameters:

  • [key] String | object optional

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

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

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

Example:

       //获取所有参数
        //获取所有参数
       var option = uiListview.option();

       //获取某个参数
       var id = uiListview.option( "id" );

       //修改一个参数
       uiListview.option( "width",120 );

       //修改多个参数
       uiListview.option( {"width":120} );

unlock

() chainable

允许滑动

Example:

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

widget

(
  • [name]
)

获取依赖的控件

Parameters:

  • [name] String optional

    [ 依赖控件名 ]

Example:

       //获取依赖控件
       var uiListviewWidget = uiListview.widget();

Events

off

为控件取消绑定事件

Event Payload:

  • [type] String optional

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

  • [callback] Function optional

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

Example:

         uiListview.off("lock");

on

为控件绑定事件

Event Payload:

  • [type] String optional

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

  • [callback] Function optional

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

Example:

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