Show:

bui.floor Class

Defined in: src/scripts/ui/bui.floor.js:8
Module: UI

Available since 1.5.6

楼层控件

控件预览

Constructor

bui.floor

(
  • option
)

Defined in src/scripts/ui/bui.floor.js:8

Available since 1.5.6

Parameters:

  • option Object
    • id String

      控件的dom

    • [uid] String optional

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

    • [menu] String optional

      点击操控的菜单在哪里

    • [handle] String optional

      菜单的循环元素是哪个,默认是.bui-btn

    • [floorItem] String optional

      内容的循环元素是哪个,默认是.bui-floor-item

    • onScroll Function

      1.7.0 滚动触发

    • onScrollTo Function

      1.8.5 跳转触发

    • onScrollTop Function

      1.7.0 滚动到顶部触发

    • onScrollBottom Function

      1.7.0 滚动到底部触发

    • area Number

      默认:0.5 当滚动内容到一半的距离的时候,就会跳转菜单的激活效果, 0.1则接近顶部

    • height Number

      默认:"inherit"(由外部样式定义) | "auto"(自动计算) | 300(计算以后传入)

Example:

// 示例1: 静态结构初始化, 固定结构, li里面的内容自定义 html:

            // 菜单可以分离
                                                <ul id="floorNav" class="bui-nav">
                                                    <li class="bui-btn active">表单</li>
                                                    <li class="bui-btn">正文</li>
                                                    <li class="bui-btn">附件(2)</li>
                                                </ul>
                                                <div id="floor" class="bui-floor">
                                                    <div class="bui-floor-main">
                                                       <!-- 关联 bui-floor-item 选择器 -->
                                                       <div class="bui-panel bui-floor-item">
                                                           <div class="bui-panel-head">表单</div>
                                                           <div class="bui-panel-main">表单内容</div>
                                                       </div>
                                                       <div class="bui-panel bui-floor-item">
                                                           <div class="bui-panel-head">正文</div>
                                                           <div class="bui-panel-main">正文内容</div>
                                                       </div>
                                                       <div class="bui-panel bui-floor-item">
                                                           <div class="bui-panel-head">附件</div>
                                                           <div class="bui-panel-main">附件内容</div>
                                                       </div>
                                                    </div>
                                                    <div class="bui-floor-foot"></div>
                                                </div>
                                               
                                               // 初始化
                                               var uiFloor = bui.floor({
                                                   id: "#floor",
                                                   menu: "#floorNav",          // id两个单词必须驼峰氏写法,不能中横杠
                                                   floorItem: ".bui-floor-item",  // 默认,可不填
                                               })

Item Index

Methods

Methods

destroy

()

Defined in src/scripts/ui/bui.floor.js:320

[销毁控件]

Example:

          //销毁
                                                          uiDropdown.destroy();

init

()

Defined in src/scripts/ui/bui.floor.js:107

初始化

Example:

           uiFloor.init();

to

(
  • index
  • callback
)

Defined in src/scripts/ui/bui.floor.js:284

跳转

Parameters:

  • index Number

    [跳转到第几个]

  • callback Function

    [跳转以后执行]

Example:

           uiFloor.to();