BUI

其它版本:

API for BUI 1.6.x

Show:

bui.slide Class

Module: UI

滑动控件

滑动控件比较灵活,对参数要了解得更多一点,可以用来制作: 焦点图,TAB选项卡,全屏相册,上下滑屏,过滤筛选,层级选择器,滚动公告,等等

1.4,新增自动加载远程地址参数,配合href使用

预览地址: demo

方法说明:

start: 自动播放
stop: 停止自动播放
lock: 不允许滑动
unlock: 允许滑动
prev: 是否存在,返回index
next: 是否存在,返回boolean
to: 跳转到指定的 某一个slide
load: 加载远程地址模板
option: 获取设置参数
widget: 获取依赖控件
控件预览

Constructor

bui.slide

(
  • option
)

Parameters:

  • option Object
    • id String

      控件id

    • [menu] String optional

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

    • [children] String optional

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

    • [relative] Boolean optional

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

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

      无法滑动的时候

    • [width] Number optional

      0 为默认屏幕宽度

    • [height] Number optional

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

    • [index] Number optional

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

    • [data] 1.5.2新增, 默认: null || [{id:"",title:"",url:"",iframe:false,image:"img.png",background:"img.png",page:false,close:true,synchistory:false}] Array optional

      , image 或者 background 只需要一个,其它字段都不是必须, 1.6.2新增 page加载的方式,可以解决加载外部地址无法返回的问题

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

    • [alignPage] String optional

      since 1.6.2 默认是"center" | left | right

    • [swipe] Boolean optional

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

    • [animate] Boolean optional

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

    • [scroll] Boolean optional

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

    • [fullscreen] Boolean optional

      是否全屏 默认:false | true

    • [autopage] Boolean optional

      是否自动分页 默认:false | true; true时自动生成 bui-slide-head结构

    • [autoplay] Boolean optional

      是否自动播放 默认:false | true

    • [autoheight] Boolean optional

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

    • [zoom] Boolean optional

      保持比例缩放 默认 true | false

    • [loop] Boolean optional

      1.5新增,循环 默认 false | true, 如果为true, index是加1的值

    • [transition] Number optional

      transform效果持续时间

    • [interval] Number optional

      自动运行间隔

    • [visibleNum] Number optional

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

    • [scrollNum] Number optional

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

    • [template] Boolean optional

      1.5新增, 需要return 正确的结构,便于数据请求处理动态模板

    • [bufferEffect] Boolean optional

      1.3.0 新增的参数, 在第1页跟最后1页是否还可以继续拖动, 默认允许: true | false

    • [distance] Number optional

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

    • [callback] Function optional

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

    • [onBeforeTo] Function optional

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

    • [onBeforeInit] Function optional

      1.5.1新增 初始化前触发

    • [onInited] Function optional

      1.5.1新增 初始化以后触发

    • [autoload] Boolean optional

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

Example:

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

         <div id="slide" class="bui-slide">
                                               <div class="bui-slide-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 uiSlide = bui.slide({
                                                         id:"#slide",
                                                         height:160,
                                                         autopage:true
                                                       })
                                    
                                         // 示例2: 1.5.2 新增动态渲染: 有data,无template参数时,采用默认模板渲染数据
                                         html:
                                    
                                         <div id="slide" class="bui-slide"></div>
                                    
                                         js:
                                         // 先初始化
                                         var uiSlide = bui.slide({
                                            id:"#slide",
                                            height:380,
                                            autopage:true,
                                            data: []
                                          })
                                    
                                         // 请求成功以后修改值
                                          bui.ajax({
                                              url: "http://www.easybui.com/demo/json/shop.json",
                                              data: {},//接口请求的参数
                                              // 可选参数
                                              method: "GET"
                                          }).then(function(result){
                                             var data = [{
                                               image: "images/banner01.png"
                                             }]
                                              // 修改动态值
                                              uiSlide.option("data",data)
                                          });
                                    
                                          示例3: 1.5.2 有自定义模板时, template,里需要自己加好静态的结构
                                    
                                          html:
                                    
                                          <div id="slideNote" class="bui-slide bui-slide-notice"></div>
                                    
                                          js:
                                          // 通知公告, 初始化
                                          var uiSlide = bui.slide({
                                              id:"#slideNote",
                                              height:100,
                                              autoplay: true,
                                              loop: true,
                                              direction: "y",
                                              data: [{
                                                title: "2017年11月1日 河南分省党支部第18期党课",
                                                url: "pages/ui/article.html"
                                              },{
                                                title: "2017年11月1日 河南分省党支部第19期党课",
                                                url: "pages/ui/article.html"
                                              }],
                                              template: function (data) {
                                                // 有数据有模板时,需要自己全部渲染结构
                                                var html = "";
                                                html +=&lt;div class=&quot;bui-slide-main&quot;&gt;&lt;ul&gt;
                                                data.forEach(function (item,i) {
                                                  html +=`<li href="${item.url}">
                                                      <div class="notice-item">
                                                          <div class="span1">${item.title||""}</div>
                                                      </div>
                                                  </li>`
                                                })
                                                html +=&lt;/ul&gt;&lt;/div&gt;
                                    
                                                return html;
                                              },
                                          })
                                    

Methods

currentMain

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

Defined in src/scripts/ui/bui.slide.js:1698

Available since 1.6.3

获取内容的当前dom

Parameters:

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

Example:

       uiTab.currentMain();
                                                

currentMenu

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

Defined in src/scripts/ui/bui.slide.js:1715

Available since 1.6.3

获取菜单的当前dom

Parameters:

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

Example:

       uiTab.currentMenu();
                                                

destroy

(
  • [bool]
)

Defined in src/scripts/ui/bui.slide.js:1795

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

       //销毁
                                                       uiSlide.destroy();
                                                

getPages

() Number chainable

Defined in src/scripts/ui/bui.slide.js:743

Available since 1.5.2

获取有多少个子元素

Returns:

Number:

[返回多少个]

index

() chainable

Defined in src/scripts/ui/bui.slide.js:1341

Available since 1.3.0

当前索引

Example:

       var index = uiSlide.index();
                                                

init

(
  • [option]
)
chainable

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

Parameters:

  • [option] Object optional

    参数控件本身

load

(
  • [option]
)

Defined in src/scripts/ui/bui.slide.js:1574

Available since 1.4.0

动态加载页面,模拟路由

由于多页开发,后退不能刷新页面,所以便有这个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

Defined in src/scripts/ui/bui.slide.js:1770

Available since 1.5.3

重新计算宽高

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

Defined in src/scripts/ui/bui.slide.js:1892

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

Defined in src/scripts/ui/bui.slide.js:1872

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