人靠衣装,机靠壳装

轻量级移动友好且兼容IE8的Tabs选项卡插件

2018-03-31 16:34 发布

00
admin
湖南省 长沙市
  • 粉丝4

  • 关注1

  • 动态2

轻量级移动友好且兼容IE8的Tabs选项卡插件.jpg


Tabslet是一款轻量级,使用简单,移动友好且兼容IE8的jQuery Tabs选项卡插件


  • 灵活的HTML结构。

  • 可以自定义事件。

  • 可以通过data属性来配置参数。

  • 可以设置前后控制按钮。

  • 可以自动进行无限轮播。

  • 支持深链接。

  • 支持鼠标滑过时切换Tab。

  • 支持Tab切换时的动画特效。

  • 支持href或alt属性链接Tab。

  • 提供各种控制方法。

  • 兼容IE7+的IE浏览器,以及Chrome,Firefox和Safari。

初始化插件

在页面DOM元素加载完毕之后,可以通过tabslet()方法来初始化该Tabs选项卡插件。

$(document).ready(function() {
    $('.tabs').tabslet();
});

也可以使用data属性来进行初始化。

<div class='tabs' data-toggle="tabslet">
    ...
</div>

配置参数

该Tabs选项卡默认的配置参数如下:

$('.tabs').tabslet({
    mouseevent:   'click',
    attribute:    'href',
    animation:    false,
    autorotate:   false,
    pauseonhover: true,
    delay:        2000,
    active:       1,
    container:    false
    controls:     {
        prev: '.prev',
        next: '.next'
    }
});

  • mouseevent:选择在鼠标点击或鼠标滑过时切换选项卡。可用值: click, hover。

  • attribute:使用hrefalt属性来选择tabs。可用值:href, alt。

  • animation:是否在选项卡切换时带动画效果。

  • autorotate:选项卡是否自动切换。

  • deeplinking:是否允许深链接。

  • pauseonhover:是否在鼠标滑过时暂停选项卡的自动切换。

  • delay:设置自动切换的延迟时间。单位毫秒。

  • active:设置初始化时激活的Tab。

  • container:覆盖默认的HTML结构并设置Tabs的父容器。

  • controls:设置前后导航按钮元素。

上面的配置参数,处理controls之外,其它的都可以通过data属性来进行设置。

Tabslet选项卡插件的github主页地址为:https://github.com/vdw/Tabslet

授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 暂无

在线演示

0
猜你喜欢
更多发现
子导航JS代码