BUI

其它版本:

API for BUI 1.5.4

Show:

bui.tab Class

Tab控件

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

预览地址: demo

控件预览

Constructor

bui.tab

(
  • option
)

Parameters:

  • option Object
    • id String

      [控件id]

    • [menu] String optional

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

    • [children] String optional

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

    • [stopHandle] String optional

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

    • [width] Number optional

      [0 为默认屏幕宽度]

    • [height] Number optional

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

    • [index] Number optional

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

    • [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: 静态结构初始化, 固定结构, 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;
               // }
           }
        });

Methods

destroy

(
  • [bool]
)

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

       //销毁
       uiSlide.destroy();

getPages

() Number chainable

获取有多少个子元素

Returns:

Number:

[返回多少个]

index

() chainable

当前索引

Example:

       var index = uiSlide.index();

init

(
  • [option]
)
chainable

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

Parameters:

  • [option] Object optional

    [参数控件本身]

load

(
  • [option]
)

动态加载页面,模拟路由

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

预览地址: demo

Parameters:

  • [option] Object optional

    [ 页面跳转的地址 ]

    • url String

      [ 页面跳转的地址 ]

    • [id] Object optional

      [ 页面结果加载到的地方,可选,默认是下一个 ]

    • [preload] Boolean optional

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

    • [success] Function optional

      [ 成功回调 ]

    • [fail] Function optional

      [ 失败回调 ]

Example:

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

lock

() chainable

不允许拖拽

Example:

      uiSlide.lock();

next

() chainable

下一个

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

上一个

Example:

       uiSlide.prev();

resize

(
  • [option]
)
chainable

重新计算宽高

Parameters:

  • [option] Object optional

    [ 可以不传 ]

    • [width] Number optional

      [ 如果不传则自动计算 ]

    • [height] Number optional

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

Example:

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

start

(
  • time
)
chainable

自动播放

Parameters:

  • time Number

    [重新设置循环时间]

Example:

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

stop

() chainable

停止自动播放

Example:

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

to

(
  • index
  • [transition]
)
chainable

跳到第几个

Parameters:

  • index Number

    [索引,从0开始]

  • [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

为控件取消绑定事件

Event Payload:

  • [type] String optional

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

  • [callback] Function optional

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

Example:

       uiSlide.off("lock");

on

为控件绑定事件

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