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
[option.data] [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" } // 传参数给该模块 }] ]

)

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

Available since 1.5.0

Parameters:

option Object
- id String
  
  [控件id]
- [menu] [ 默认".bui-tab-head ul" (循环元素的父级), 如果控制菜单要独立,可以使用id选择器] String optional
- [children] [ 默认".bui-tab-main ul" (循环元素的父级), 如果控制内容要独立,可以使用id选择器, tab嵌套必须使用id] String optional
- [position] [ 1.6.2 新增菜单的位置, 只有data有值才会有效 position: "top", top bottom left right] String optional
- [iconPosition] [ 1.6.2 新增菜单图标的位置, 只有data有值才会有效图标的位置, 默认 "left" | "top" | "right" | "bottom"] String optional
- [iconBadge] [ 1.6.2 新增菜单图标红点的位置, 只有data有值才会有效 , 默认 true | false , addBadge方法添加的红点的位置,默认在图标,false则在按钮容器] Boolean optional
- [sideWidth] [ 1.6.2 新增控制菜单的宽度, 只有data有值且position:"left"的时候才会有效默认 0, 以样式的宽度为主] Number optional
- [navscroll] [ 1.6.2 新增导航是否滚动, 只有data有值才会有效, 默认 false (平分宽度) | true (固定宽度,超出滚动)] Boolean optional
- [loadall] [ 1.6.2 新增是否一次性加载所有选项卡里的组件, 只有data有值才会有效, 默认 false (按需加载) | true (一次性加载)] Boolean optional
- [loaded] [ 1.6.2 新增组件编译以后执行, 只有data有值才会有效, 默认 null] Function optional
- [relative] [ 1.5.6新增, 默认false (相对屏幕宽度) | true (相对id父级的宽度)] Boolean optional
- [stopHandle] [ 1.4.2新增,样式名,默认为空,支持多个样式名,以逗号间隔. 当这个值等于tab里面的某个样式,不触发滑动,一般用于事件冲突,比方 input[type=range] 无法滑动的时候] String optional
- [width] [0 为默认屏幕宽度] Number optional
- [height] [0 为默认屏幕高度,会计算剩余的高度] Number optional
- [index] [ 默认:0 ,第一次加载第几个] Number optional
- [direction] [ 水平滑动还是纵向滑动默认: x | y] String optional
- [alignClassName] [ 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] String optional
- [swipe] [ 是否允许侧滑,默认允许 true | false] Boolean optional
- [animate] [ 点击菜单跳转到某个位置是否采用动画默认: true | false] Boolean optional
- [scroll] [ 是否允许垂直滚动 false | true , 如果单独需要滚动可以给滑动的li的属性加上 data-scroll=true] Boolean optional
- [autoheight] [ 1.4.3新增, 自动高度,由内容撑开默认:false | true] Boolean optional
- [visibleNum] [ 1.4.5新增, 可视个数,默认为1] Number optional
- [scrollNum] [ 1.4.5新增, 一次滚动个数,默认为1] Number optional
- [distance] [ 默认40, 拖拽大于distance才会生效,配合delay可以防止tab又有上下其它事件] Number optional
- [callback] [ 点击的回调 1.3.0 以后不再推荐,自行绑定就可] Function optional
- [autoload] [ 1.4新增默认: false | true 远程加载菜单按钮上的 href 地址, 如果点击的按钮有disabled属性或者样式,则不跳转] Boolean optional
- [onBeforeTo] [ 1.5.4新增跳转前触发, return fasle 则不能跳转过去; 可以拿到跳转的目标索引 e.currentIndex, 以及当前索引 e.prevIndex] Function optional
- [onBeforeInit] [ 1.5.1新增初始化前触发] Function optional
- [onInited] [ 1.5.1新增初始化以后触发] Function optional
[option.data] [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" } // 传参数给该模块 }] ] Array

Example:

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

          <div id="uiTab" class="bui-tab">
                                            <!-- 菜单结构 -->
                                            <div class="bui-tab-head">
                                              <ul>
                                                <li>Tab1</li>
                                              </ul>
                                            </div>
                                            <!-- 内容结构 -->
                                            <div class="bui-tab-main">
                                              <ul>
                                                <li>
                                                  <!-- 从这里开始,可以自定义 start -->
                                                  <img src="../images/slideshow.png" alt="">
                                                  <!-- 从这里开始,可以自定义 end -->
                                                </li>
                                                <li style="display:none">
                                                  <!-- 第2个内容, 先设置样式不可见,避免渲染闪跳 -->
                                                  <img src="../images/slideshow2.png" alt="">
                                                </li>
                                              </ul>
                                            </div>
                                          </div>

js:

          // 初始化
                                          var uitab = bui.tab({
                                                    id:"#uiTab"
                                                  })
                                
                                      // 示例2: 1.5.2 新增动态渲染:
                                      html:
                                
                                      <div id="uiTab" class="bui-tab"></div>
                                
                                      js:
                                      // 先初始化
                                      var uiTab = bui.tab({
                                            id:"#uiTab",
                                            template: function (data) {
                                              var html ="";
                                              // 渲染菜单结构
                                              html +=&lt;div class=&quot;bui-tab-head&quot;&gt;&lt;ul id=&quot;nav&quot; class=&quot;bui-nav&quot;&gt;
                                                 data.forEach(function (item,i) {
                                                   html +=&lt;li class=&quot;bui-btn&quot;&gt;${item.title}&lt;/li&gt;
                                                 })
                                                      html +=&lt;/ul&gt;&lt;/div&gt;
                                              // 渲染内容结构
                                              html +=&lt;div class=&quot;bui-tab-main&quot;&gt;&lt;ul&gt;
                                                data.forEach(function (item,i) {
                                                  html +=&lt;li&gt;&lt;img src=&quot;${item.image}&quot; alt=&quot;&quot;&gt;&lt;/li&gt;
                                                })
                                              html +=&lt;/ul&gt;&lt;/div&gt;
                                              return html;
                                            }
                                        });
                                
                                      // 请求成功以后修改值
                                       bui.ajax({
                                           url: "http://www.easybui.com/demo/json/shop.json",
                                           data: {},//接口请求的参数
                                           // 可选参数
                                           method: "GET"
                                       }).then(function(result){
                                         // 模拟数据
                                          var data = [{
                                            image: "images/banner01.png"
                                          }]
                                           // 修改动态值
                                           uitab.option("data",data)
                                       });
                                
                                       // 示例2: 1.5.4 支持跳转前拦截:
                                      html:
                                
                                      <div id="uiTab" class="bui-tab"></div>
                                
                                      js:
                                      // 示例未登录状态
                                      var hasLogin = false;
                                      // 初始化
                                      var uiTab = bui.tab({
                                            id:"#uiTab",
                                            onBeforeTo: function(e) {
                                              // 跳转的目标索引
                                               console.log("currentIndex", e.currentIndex)
                                              // 跳转前的索引
                                               console.log("prevIndex", e.prevIndex)
                                               // 跳转到索引为1的时候,如果登录状态没有,则进行拦截
                                               // if (e.currentIndex == 1 && !hasLogin ) {
                                               //     bui.alert("您还没有登录呢")
                                               //     return false;
                                               // }
                                           }
                                        });
                                
                                     1.6.2新增更简单的方式, 动态渲染
                                
                                     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" }
                                             }
                                         ]
                                     })

Index
Methods
Events

Item Index

Methods

currentMain
currentMenu
destroy
getPages
index
init
load
lock
next
option
prev
resize
start
stop
to
unlock
widget

Events

Methods

`currentMain`

(

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

)

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

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

Available since 1.6.3

获取菜单的当前dom

Parameters:

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

;

Example:

       uiTab.currentMenu();

`destroy`

(

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

)

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

Available since 1.4.2

[销毁控件]

Parameters:

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

Example:

       //销毁
                                                   uiSlide.destroy();

`getPages`

() Number chainable

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

Available since 1.5.2

获取有多少个子元素

Returns:

Number:

[返回多少个]

`index`

() chainable

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

Available since 1.3.0

当前索引

Example:

       var index = uiSlide.index();

`init`

(

[option] [参数控件本身]

)

chainable

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

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

Parameters:

[option] [参数控件本身] Object optional

`load`

(

[option] [ 页面跳转的地址]
option.url
[option.id] [ 页面结果加载到的地方,可选,默认是下一个]
[option.preload] [ 预加载,默认: false 自动跳转到加载的页面 | true, 则不跳转]
[option.success] [ 成功回调]
[option.fail] [ 失败回调]

)

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

Available since 1.4.0

动态加载页面,模拟路由

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

预览地址: demo

Parameters:

[option] [ 页面跳转的地址] Object optional
option.url String

[ 页面跳转的地址 ]
[option.id] [ 页面结果加载到的地方,可选,默认是下一个] Object optional
[option.preload] [ 预加载,默认: false 自动跳转到加载的页面 | true, 则不跳转] Boolean optional
[option.success] [ 成功回调] Function optional
[option.fail] [ 失败回调] Function optional

Example:

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

`lock`

() chainable

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

不允许拖拽

Example:

      uiSlide.lock();

`next`

() chainable

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

下一个

Example:

       uiSlide.next();

`option`

(

[key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数]
[value] [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传]

)

chainable

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

获取设置参数

Parameters:

[key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数] String | object optional
[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:1338

上一个

Example:

       uiSlide.prev();

`resize`

(

[option] [ 可以不传]
[option.width] [ 如果不传则自动计算]
[option.height] [ 如果不传则自动计算,一些特殊情况需要告诉它在哪个高度下自动计算]

)

chainable

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

Available since 1.5.3

重新计算宽高

Parameters:

[option] [ 可以不传] Object optional
[option.width] [ 如果不传则自动计算] Number optional
[option.height] [ 如果不传则自动计算,一些特殊情况需要告诉它在哪个高度下自动计算] Number optional

Example:

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

`start`

(

time

)

chainable

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

自动播放

Parameters:

time Number

[重新设置循环时间]

Example:

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

`stop`

() chainable

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

停止自动播放

Example:

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

`to`

(

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

)

chainable

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

跳到第几个

Parameters:

index Number

[索引,从0开始]
[transition] [ "all 300ms"(不传则默认) | "none"(不要动画) | "all 300ms ease-out" (可以加上缓冲效果)] String optional

Example:

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

`unlock`

() chainable

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

允许拖拽

Example:

       uiSlide.unlock();

`widget`

(

[name] [ 依赖控件名]

)

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

获取依赖的控件

Parameters:

[name] [ 依赖控件名] String optional

Example:

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

Events

`off`

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

Available since 1.3.0

为控件取消绑定事件

Event Payload:

[type] [ 事件类型: "play"(播放的时候触发) |"stop"(停止的时候触发) |"first"(在第一个往左边操作的时候触发) | "last"(在最后一个往右边操作的时候触发) | "to"(每次跳转时触发,除了第1次不触发) | "afterto"(每次跳转后触发) | "load"(自动加载远程页面 1.4)] String optional
[callback] [ 绑定的事件, this 为当前点击的菜单] Function optional

Example:

       uiSlide.off("lock");

`on`

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

Available since 1.3.0

为控件绑定事件

Event Payload:

[type] [ 事件类型: "play"(播放的时候触发) |"stop"(停止的时候触发) |"first"(在第一个往左边操作的时候触发) | "last"(在最后一个往右边操作的时候触发) | "to"(每次跳转时触发,除了第1次不触发) | "afterto"(每次跳转后触发) | "load"(自动加载远程页面 1.4)] String optional
[callback] [ 绑定的事件, this 为当前点击的菜单] Function optional

Example:

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

BUI

bui.tab Class

Tab控件

预览地址: demo

Constructor

bui.tab

Parameters:

Example:

Item Index

Methods

Events

Methods

currentMain

Parameters:

Example:

currentMenu

Parameters:

Example:

destroy

Parameters:

Example:

getPages

Returns:

index

Example:

init

Parameters:

load

动态加载页面,模拟路由

预览地址: demo

Parameters:

Example:

lock

Example:

next

Example:

option

Parameters:

Example:

prev

Example:

resize

Parameters:

Example:

start

Parameters:

Example:

stop

Example:

to

Parameters:

Example:

unlock

Example:

widget

Parameters:

Example:

Events

off

Event Payload:

Example:

on

Event Payload:

Example:

`bui.tab`

`currentMain`

`currentMenu`

`destroy`

`getPages`

`index`

`init`

`load`

`lock`

`next`

`option`

`prev`

`resize`

`start`

`stop`

`to`

`unlock`

`widget`

`off`

`on`