BUI

其它版本:

API for BUI 1.6.x

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]

    • [menu] [点击操控的菜单在哪里] String optional
    • [handle] [菜单的循环元素是哪个,默认是.bui-btn] String optional
    • [floorItem] [内容的循环元素是哪个,默认是.bui-floor-item] String optional
    • 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:265

[销毁控件]

Example:

          //销毁
                                                      uiDropdown.destroy();

init

()

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

初始化

Example:

           uiFloor.init();

to

(
  • index
  • callback
)

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

跳转

Parameters:

  • index Number

    [跳转到第几个]

  • callback Function

    [跳转以后执行]

Example:

           uiFloor.init();