bui.tab Class

Extends bui.slide

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

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
- [resize] Boolean optional
  
  1.8.5 自动跟着窗口改变计算宽度默认 false | true 有些情况resize需要在外部做
- [onResize] Function optional
  
  1.8.5 改变窗口的时候执行回调
- [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
- [onTo] Function optional
  
  1.8.3新增跳转后触发
- [onBeforeInit] Function optional
  
  1.5.1新增初始化前触发
- [onBeforeRemove] Function optional
  
  1.7.6新增初始化前触发
- [onRemove] Function optional
  
  1.7.6新增初始化前触发
- [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"
                                                      })

Index
Methods
Events

Item Index

Methods

add
addBadge
back
currentMain
currentMenu
destroy
getData
getItem
getItemParam
getPages
hideContent
index
init
isShow
load
lock
next
offresize
onresize
option
prev
refresh
remove
removeBadge
replace
resize
setItem
setItemParam
showContent
start
stop
to
toggleContent
unlock
widget

Events

Methods

`add`

(

[option]

)

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

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:515

Available since 1.6.7

新增修改红点

Parameters:

index String

在第几个索引增加红点
[num] String optional

有多少条未读

`back`

(

[option]

)

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

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:2349

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:2366

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:2467

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:938

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:417

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:466

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:919

Available since 1.5.2

获取有多少个子元素

Returns:

Number:

[返回多少个]

`hideContent`

(

callback

)

chainable

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

Available since 1.7.5

隐藏内容

Parameters:

callback Function

回调

`index`

() chainable

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

Available since 1.3.0

当前索引

Example:

       var index = uiSlide.index();

`init`

(

[option]

)

chainable

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

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

Parameters:

[option] Object optional

参数控件本身

`isShow`

() chainable

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

Available since 1.7.5

当前tab的显示状态

`load`

(

[option]

)

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

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

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

不允许拖拽

Example:

      uiSlide.lock();

`next`

() chainable

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

Available since 1.3.0

下一个

Example:

       uiSlide.next();

`offresize`

(

callback

)

chainable

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

取消监听窗口

Parameters:

callback Function

Example:

       //取消监听
                                                       uiTab.offresize();

`onresize`

(

callback

)

chainable

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

绑定监听窗口，并自动计算

Parameters:

callback Function

Example:

       //绑定监听
                                                       uiTab.onresize();

`option`

(

[key]
[value]

)

chainable

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

获取设置参数

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:1690

Available since 1.3.0

上一个

Example:

       uiSlide.prev();

`refresh`

(

option
index
param
beforeLoad
loaded

)

chainable

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

Available since 1.6.7

刷新加载当前组件

Parameters:

option Object
index String

在第几个索引
param Object

修改第几个并传参
beforeLoad Object

刷新前执行
loaded Object

刷新后执行

`remove`

(

[option]

)

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

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:652

Available since 1.6.7

移除红点

Parameters:

index String

在第几个索引

`replace`

(

[option]

)

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

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:2422

Available since 1.5.3

重新计算宽高

Parameters:

[option] Object optional

可以不传
- [width] Number optional
  
  如果不传则自动计算
- [height] Number optional
  
  如果不传则自动计算,一些特殊情况需要告诉它在哪个高度下自动计算
- [callback] Function optional
  
  1.8.5 新增

Example:

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

`setItem`

(

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

)

Object chainable

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

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:491

Available since 1.6.7

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

Parameters:

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

Returns:

Object:

[返回数组]

`showContent`

(

callback

)

chainable

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

Available since 1.7.5

显示内容

Parameters:

callback Function

回调

`start`

(

time

)

chainable

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

自动播放

Parameters:

time Number

[重新设置循环时间]

Example:

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

`stop`

() chainable

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

停止自动播放

Example:

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

`to`

(

index
[transition]

)

chainable

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

跳到第几个

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);

`toggleContent`

(

showCallback
hideCallback

)

chainable

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

Available since 1.7.5

切换内容

Parameters:

showCallback Function

显示的回调
hideCallback Function

隐藏的回调

`unlock`

() chainable

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

允许拖拽

Example:

       uiSlide.unlock();

`widget`

(

[name]

)

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

获取依赖的控件

Parameters:

[name] String optional

依赖控件名

Example:

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

Events

`off`

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

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:2558

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);
                                                       });

BUI

bui.tab Class

Tab控件

预览地址: demo

Constructor

bui.tab

Parameters:

Example:

Item Index

Methods

Events

Methods

add

动态新增一个组件

Parameters:

Example:

addBadge

Parameters:

back

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

Parameters:

Example:

currentMain

Parameters:

Example:

currentMenu

Parameters:

Example:

destroy

Parameters:

Example:

getData

Returns:

getItem

Parameters:

Returns:

getItemParam

Parameters:

Returns:

getPages

Returns:

hideContent

Parameters:

index

Example:

init

Parameters:

isShow

load

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

预览地址: demo

Parameters:

Example:

lock

Example:

next

Example:

offresize

Parameters:

Example:

onresize

Parameters:

Example:

option

Parameters:

Example:

prev

Example:

refresh

Parameters:

remove

移除某个选项

Parameters:

Example:

removeBadge

Parameters:

replace

replace替换当前选项

Parameters:

Example:

`bui.tab`

`add`

`addBadge`

`back`

`currentMain`

`currentMenu`

`destroy`

`getData`

`getItem`

`getItemParam`

`getPages`

`hideContent`

`index`

`init`

`isShow`

`load`

`lock`

`next`

`offresize`

`onresize`

`option`

`prev`

`refresh`

`remove`

`removeBadge`

`replace`

`resize`

`setItem`

`setItemParam`

`showContent`

`start`

`stop`

`to`

`toggleContent`

`unlock`

`widget`

`off`

`on`