Show:

bui.tab Class

Extends bui.slide
Module: UI

Available since 1.5.0

Tab控件

Tab控件基于bui.slide制作,tab的方法及事件请参考 bui.slide

预览地址: demo

控件预览

Constructor

bui.tab

(
  • option
)

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

Available since 1.5.0

Parameters:

  • option Object
    • id String

      控件id

    • [uid] String optional

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

    • [menu] String optional

      默认".bui-tab-head ul" (循环元素的父级), 如果控制菜单要独立,可以使用id选择器

    • [showNav] String optional

      2.0新增,展示菜单 默认 true | false.

    • [children] String optional

      默认".bui-tab-main ul" (循环元素的父级), 如果控制内容要独立,可以使用id选择器, tab嵌套必须使用id

    • [position] String optional

      1.6.2 新增 菜单的位置, 只有data有值才会有效 position: "top", top bottom left right

    • [iconPosition] String optional

      1.6.2 新增 菜单图标的位置, 只有data有值才会有效 图标的位置, 默认 "left" | "top" | "right" | "bottom"

    • [iconBadge] Boolean optional

      1.6.2 新增 菜单图标红点的位置, 只有data有值才会有效 , 默认 true | false , addBadge方法添加的红点的位置,默认在图标,false则在按钮容器

    • [sideWidth] Number optional

      1.6.2 新增 控制菜单的宽度, 只有data有值且position:"left"的时候才会有效 默认 0, 以样式的宽度为主

    • [navscroll] Boolean optional

      1.6.2 新增 导航是否滚动, 只有data有值才会有效, 默认 false (平分宽度) | true (固定宽度,超出滚动)

    • [loadall] Boolean optional

      1.6.2 新增 是否一次性加载所有选项卡里的组件, 只有data有值才会有效, 默认 false (按需加载) | true (一次性加载)

    • [loaded] Function optional

      1.6.2 新增 组件编译以后执行, 只有data有值才会有效, 默认 null

    • data Array

      1.6.2 新增, 动态数据配置tab选项 [{ id: "tab0", // 每个tab选项卡里面的 component id, 默认建议以某个值+数字拼接, 数字按索引值来 icon: "icon-home", // 图标的样式名 className: "btn-menu1", // 按钮的样式名, 自定义对齐方式等 image: "", // 图片路径 title: "新闻", // 菜单名称 everytime: false, // 是否点击的时候重新编译, 默认false name: "pages/components/list/index", // 菜单对应加载的模块名 param: { type: "news" } // 传参数给该模块 }] ]

    • [relative] Boolean optional

      1.5.6新增, 默认false (相对屏幕宽度) | true (相对id父级的宽度)

    • [stopHandle] String optional

      1.4.2新增,样式名,默认为空,支持多个样式名,以逗号间隔. 当这个值等于tab里面的某个样式,不触发滑动,一般用于事件冲突,比方 input type=range 无法滑动的时候

    • [width] Number optional

      0 为默认屏幕宽度

    • [height] Number optional

      0 为默认屏幕高度,会计算剩余的高度

    • [index] Number optional

      默认:0 ,第一次加载第几个

    • [templateMenuItem] Function optional

      1.6.7新增,定制菜单模板

    • [direction] String optional

      水平滑动还是纵向滑动 默认: x | y

    • [alignClassName] String optional

      since 1.3.4 默认是"",全屏默认是:"bui-box-center", 每个li的盒子对齐样式名,主要用于全屏时的内容对齐,自带几种对齐方式 左:bui-box-align-left 水平中:bui-box-align-right 右:bui-box-align-center 上:bui-box-align-top 垂直中:bui-box-align-middle 下:bui-box-align-bottom

    • [swipe] Boolean optional

      是否允许侧滑,默认允许 true | false

    • [animate] Boolean optional

      点击菜单跳转到某个位置是否采用动画 默认: true | false

    • [scroll] Boolean optional

      是否允许垂直滚动 false | true , 如果单独需要滚动 可以给滑动的li的属性加上 data-scroll=true

    • [autoheight] Boolean optional

      1.4.3新增, 自动高度,由内容撑开 默认:false | true

    • [visibleNum] Number optional

      1.4.5新增, 可视个数,默认为1

    • [scrollNum] Number optional

      1.4.5新增, 一次滚动个数,默认为1

    • [distance] Number optional

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

    • [callback] Function optional

      点击的回调 1.3.0 以后不再推荐,自行绑定就可

    • [autoload] Boolean optional

      1.4新增 默认: false | true 远程加载菜单按钮上的 href 地址, 如果点击的按钮有disabled属性或者样式,则不跳转

    • [onBeforeTo] Function optional

      1.5.4新增 跳转前触发, return fasle 则不能跳转过去; 可以拿到 跳转的目标索引 e.currentIndex, 以及当前索引 e.prevIndex

    • [onBeforeInit] Function optional

      1.5.1新增 初始化前触发

    • [onInited] Function optional

      1.5.1新增 初始化以后触发

Example:

     示例1: 1.6.2新增更简单的方式, 动态渲染
                                    
                                         <div id="uiTab" class="bui-tab bui-box-vertical"></div>
                                    
                                         var uiTab = bui.tab({
                                             id: "#uiTab",
                                             // position: "left", // 修改菜单位置
                                             // iconPosition: "right", // 修改图标位置
                                             // sideWidth: 80, // 修改左边菜单的宽度
                                             data: [{
                                                     id: "tab0",
                                                     // icon: "icon-home",
                                                     title: "新闻",
                                                     name: "pages/components/list/index",
                                                     param: { type: "news" }
                                                 }, {
                                                     id: "tab1",
                                                     icon: "icon-home",
                                                     // image: "images/applogo.png",
                                                     title: "图片",
                                                     name: "pages/components/list/index",
                                                     param: { type: "photo" },
                                                     everytime: true
                                                 },
                                                 {
                                                     id: "tab2",
                                                     icon: "icon-home",
                                                     title: "视频",
                                                     name: "pages/components/list/index",
                                                     param: { type: "video" }
                                                 }, {
                                                     id: "tab3",
                                                     icon: "icon-home",
                                                     title: "课程",
                                                     name: "pages/components/list/index",
                                                     param: { type: "class" }
                                                 }
                                             ]
                                         })
                                    

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

          <div id="uiTab" class="bui-tab">
                                                <!-- 菜单结构 -->
                                                <div class="bui-tab-head">
                                                  <ul class="bui-nav">
                                                    <li class="bui-btn">Tab1</li>
                                                    <li class="bui-btn">Tab2</li>
                                                  </ul>
                                                </div>
                                                <!-- 内容结构 -->
                                                <div class="bui-tab-main">
                                                  <ul>
                                                    <li>
                                                      <!-- 从这里开始,可以自定义 start -->
                                                      <img src="../images/slideshow.png" alt="">
                                                      <!-- 从这里开始,可以自定义 end -->
                                                    </li>
                                                    <li>
                                                      <img src="../images/slideshow2.png" alt="">
                                                    </li>
                                                  </ul>
                                                </div>
                                              </div>
                                    

js:

          // 初始化
                                              var uitab = bui.tab({
                                                        id:"#uiTab"
                                                      })
                                    

Methods

add

(
  • [option]
)

Inherited from bui.slide: src/scripts/ui/bui.slide.js:1949

Available since 1.6.6

动态新增一个组件

Parameters:

  • [option] Object optional
    • [index] [ 在第几个后面增加组件,默认是最后一个] Number optional
    • [id] [ 自定义组件的id,默认自动生成] String optional
    • [icon] [ 菜单是否需要图标,默认为空, 例如:传"icon-home"] String optional
    • [title] [ 是否需要名称] String optional
    • [menuTemplate] [ 自定义菜单模板] String | Function optional
    • [name] [ 组件名] String optional
    • [param] [ 传给组件的参数] String optional
    • [command] [ 默认在后面增加,默认 "after"(后面) | "before"(前面) | "html"(替换)] String optional
    • [preload] [ 预加载,不激活该选项,默认 false | true] Boolean optional
    • [animate] [ 增加后跳转过去是否需要动画,默认 true | false] Boolean optional
    • [needRemove] [ 是否需要删除图标,默认 false | true] Boolean optional
    • [beforeLoad] Function optional

      后退前执行

    • [loaded] Function optional

      后退后执行

Example:

       uiTab.add({
                                                         name: "pages/bui.slide_tab_router_page1"
                                                       })
                                                

addBadge

(
  • index
  • [num]
)
chainable

Defined in src/scripts/ui/bui.tab.js:469

Available since 1.6.7

新增修改红点

Parameters:

  • index String

    在第几个索引增加红点

  • [num] String optional

    有多少条未读

back

(
  • [option]
)

Inherited from bui.slide: src/scripts/ui/bui.slide.js:1860

Available since 1.6.6

后退上一个页面,跟 prev方法的区别在于,这个后退会删除掉上一页

由于多页开发,后退不能刷新页面,所以便有这个slide来模拟简单的路由加载, 用于跟多页配合

Parameters:

  • [option] Object optional

    页面后退参数

    • [index] [ 后退到第几个,默认 -1] Number optional
    • [url] [ 后退到指定名字的选项卡] String optional
    • [beforeLoad] Function optional

      后退前执行

    • [loaded] Function optional

      后退后执行

Example:

       uiTab.back({
                                                         url: "pages/bui.slide_tab_router_page1"
                                                       })
                                                

currentMain

(
  • [index] 默认为当前的索引,可以不传 格式: 0 | 1]
)

Inherited from bui.slide: src/scripts/ui/bui.slide.js:2183

Available since 1.6.3

获取内容的当前dom

Parameters:

  • [index] 默认为当前的索引,可以不传 格式: 0 | 1] Number optional

Example:

       uiTab.currentMain();
                                                

currentMenu

(
  • [index] 默认为当前的索引,可以不传 格式: 0 | 1]
)

Inherited from bui.slide: src/scripts/ui/bui.slide.js:2200

Available since 1.6.3

获取菜单的当前dom

Parameters:

  • [index] 默认为当前的索引,可以不传 格式: 0 | 1] Number optional

Example:

       uiTab.currentMenu();
                                                

destroy

(
  • [bool]
)

Inherited from bui.slide: src/scripts/ui/bui.slide.js:2281

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

       //销毁
                                                       uiSlide.destroy();
                                                

getData

() Array chainable

Inherited from bui.slide: src/scripts/ui/bui.slide.js:819

Available since 1.6.6

返回新的数据,有传 data 参数的时候才会有效

Returns:

Array:

[返回数组]

getItem

(
  • [index] [ 获取第几个的数据,默认为当前tab的索引,字符串则获取id比对的数据]
)
Object chainable

Inherited from bui.slide but overwritten in src/scripts/ui/bui.tab.js:373

Available since 1.6.7

获取data整个item数据, data 参数的时候才会有效

Parameters:

  • [index] [ 获取第几个的数据,默认为当前tab的索引,字符串则获取id比对的数据] Number | String optional

Returns:

Object:

[返回数组]

getItemParam

(
  • [index] [ 获取第几个的数据,默认为当前tab的索引,字符串则获取id比对的数据]
)
Object chainable

Defined in src/scripts/ui/bui.tab.js:421

Available since 1.6.7

获取data的每个item的param数据, data 参数的时候才会有效

Parameters:

  • [index] [ 获取第几个的数据,默认为当前tab的索引,字符串则获取id比对的数据] Number | String optional

Returns:

Object:

[返回数组]

getPages

() Number chainable

Inherited from bui.slide: src/scripts/ui/bui.slide.js:800

Available since 1.5.2

获取有多少个子元素

Returns:

Number:

[返回多少个]

index

() chainable

Inherited from bui.slide: src/scripts/ui/bui.slide.js:1511

Available since 1.3.0

当前索引

Example:

       var index = uiSlide.index();
                                                

init

(
  • [option]
)
chainable

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

Parameters:

  • [option] Object optional

    参数控件本身

load

(
  • [option]
)

Inherited from bui.slide: src/scripts/ui/bui.slide.js:1803

Available since 1.6.6

动态加载页面,模拟路由, 1.6.6重写load方法,可以用于多页的多路由

由于多页开发,后退不能刷新页面,所以便有这个slide来模拟简单的路由加载, 用于跟多页配合

预览地址: demo

Parameters:

  • [option] Object optional

    页面跳转参数

    • url String

      [ 页面跳转的模块名 ]

    • param Object

      [ 传给模块的参数 ]

    • [id] Object optional

      tabid,默认自动创建

    • [preload] Boolean optional

      预加载,默认: false 自动跳转到加载的页面 | true, 则不跳转

    • [loaded] Function optional

      加载后执行

    • [beforeLoad] Function optional

      加载前执行

Example:

       uiTab.load({
                                                         url: "pages/bui.slide_tab_router_page1"
                                                       })
                                                

lock

() chainable

不允许拖拽

Example:

      uiSlide.lock();
                                                

next

() chainable

Inherited from bui.slide: src/scripts/ui/bui.slide.js:1560

Available since 1.3.0

下一个

Example:

       uiSlide.next();
                                                

option

(
  • [key]
  • [value]
)
chainable

获取设置参数

Parameters:

  • [key] String | object optional

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

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

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

Example:

       //获取所有参数
                                                        //获取所有参数
                                                       var option = uiSlide.option();
                                                
                                                       //获取某个参数
                                                       var id = uiSlide.option( "id" );
                                                
                                                       //修改一个参数
                                                       uiSlide.option( "autoplay",false );
                                                
                                                       //修改多个参数
                                                       uiSlide.option( {"autoplay":false} );
                                                

prev

() chainable

Inherited from bui.slide: src/scripts/ui/bui.slide.js:1526

Available since 1.3.0

上一个

Example:

       uiSlide.prev();
                                                

remove

(
  • [option]
)

Inherited from bui.slide: src/scripts/ui/bui.slide.js:2059

Available since 1.6.6

移除某个选项

Parameters:

  • [option] Object optional
    • index Number

      [ 默认移除最后一个 ]

    • [beforeLoad] Function optional

      后退前执行

    • [loaded] Function optional

      后退后执行

Example:

      uiTab.remove({
                                                        index: 1
                                                      })
                                                

removeBadge

(
  • index
)
chainable

Defined in src/scripts/ui/bui.tab.js:499

Available since 1.6.7

移除红点

Parameters:

  • index String

    在第几个索引

replace

(
  • [option]
)

Inherited from bui.slide: src/scripts/ui/bui.slide.js:1907

Available since 1.6.6

replace替换当前选项

Parameters:

  • [option] Object optional
    • [index] [ 替换第几个选项,默认是当前] Number optional
    • [name] [ 替换的组件名] String optional
    • [param] [ 传给组件的参数] String optional
    • [beforeLoad] Function optional

      后退前执行

    • [loaded] Function optional

      后退后执行

Example:

       uiTab.replace({
                                                         name: "pages/bui.slide_tab_router_page1"
                                                       })
                                                

resize

(
  • [option]
)
chainable

Inherited from bui.slide: src/scripts/ui/bui.slide.js:2256

Available since 1.5.3

重新计算宽高

Parameters:

  • [option] Object optional

    可以不传

    • [width] Number optional

      如果不传则自动计算

    • [height] Number optional

      如果不传则自动计算,一些特殊情况需要告诉它在哪个高度下自动计算

Example:

       //重新计算高度
                                                       uiSlide.resize();
                                                

setItem

(
  • [index] [ 获取第几个的数据,默认为当前tab的索引,传字符串会比对id]
)
Object chainable

Defined in src/scripts/ui/bui.tab.js:398

Available since 1.6.7

设置修改data每个item的数据,有传 data 参数的时候才会有效

Parameters:

  • [index] [ 获取第几个的数据,默认为当前tab的索引,传字符串会比对id] Number | String optional

Returns:

Object:

[返回数组]

setItemParam

(
  • [index] [ 获取第几个的数据,默认为当前tab的索引,传字符串会比对id]
)
Object chainable

Defined in src/scripts/ui/bui.tab.js:446

Available since 1.6.7

设置data指定item的param参数,有传 data 参数的时候才会有效

Parameters:

  • [index] [ 获取第几个的数据,默认为当前tab的索引,传字符串会比对id] Number | String optional

Returns:

Object:

[返回数组]

start

(
  • time
)
chainable

自动播放

Parameters:

  • time Number

    [重新设置循环时间]

Example:

       //自动播放
                                                       uiSlide.start();
                                                

stop

() chainable

停止自动播放

Example:

      //自动播放
                                                      uiSlide.stop();
                                                

to

(
  • index
  • [transition]
)
chainable

跳到第几个

Parameters:

  • index Number

    [如果slide的loop:false, 索引从0开始, loop:true , 索引从1开始, 只有通过 index()方法获取索引0代表第1个. ]

  • [transition] String optional

    "all 300ms"(不传则默认) | "none"(不要动画) | "all 300ms ease-out" (可以加上缓冲效果)

Example:

       //跳到第2个
                                                       uiSlide.to(1);
                                                

unlock

() chainable

允许拖拽

Example:

       uiSlide.unlock();
                                                

widget

(
  • [name]
)

获取依赖的控件

Parameters:

  • [name] String optional

    依赖控件名

Example:

       //获取依赖控件
                                                       var uiSlideWidget = uiSlide.widget();
                                                

Events

off

Inherited from bui.slide: src/scripts/ui/bui.slide.js:2378

Available since 1.3.0

为控件取消绑定事件

Event Payload:

  • [type] String optional

    事件类型: "play"(播放的时候触发) |"stop"(停止的时候触发) |"first"(在第一个往左边操作的时候触发) | "last"(在最后一个往右边操作的时候触发) | "to"(每次跳转时触发,除了第1次不触发) | "afterto"(每次跳转后触发) | "load"(自动加载远程页面 1.4)

  • [callback] Function optional

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

Example:

       uiSlide.off("lock");
                                                

on

Inherited from bui.slide: src/scripts/ui/bui.slide.js:2358

Available since 1.3.0

为控件绑定事件

Event Payload:

  • [type] String optional

    事件类型: "play"(播放的时候触发) |"stop"(停止的时候触发) |"first"(在第一个往左边操作的时候触发) | "last"(在最后一个往右边操作的时候触发) | "to"(每次跳转时触发,除了第1次不触发) | "afterto"(每次跳转后触发) | "load"(自动加载远程页面 1.4)

  • [callback] Function optional

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

Example:

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