其他代码

jquery.tabulation 兼容bootstrap的jQuery分页插件

阿里云


jquery.tabulation.js 是一款兼容 bootstrap 的 jQuery 分页插件。该插件可将一组同级元素转换为分页或 tabs,提供回调函数,实现可分页功能。

使用方法

在页面中引入 jquery 和 jquery.tabulation.js 文件。

也想出现在这里?联系我们
创客主机
  1. <script src="js/jquery.min.js" type="text/javascript"></script>
  2. <script src="js/jquery.tabulation.js"></script>

HTML 结构

基本的 HTML 结构如下。

  1. <div class="js-tabulation" data-tabulation-id="first"> <!-- Container -->
  2.  
  3.   <!-- 内容 -->
  4.   <span data-tabulation-ref="first" data-tabulation-tab="1">Tab with index "1"</span>
  5.   <span data-tabulation-ref="first" data-tabulation-tab="2">Tab with index "2"</span>
  6.   <span data-tabulation-ref="first" data-tabulation-tab="3">Tab with index "3"</span>
  7.  
  8.   <!-- 分页导航 -->
  9.   <span data-tabulation-ref="first" data-tabulation-nav="1">First</span>
  10.   <span data-tabulation-ref="first" data-tabulation-nav="2">Second</span>
  11.   <span data-tabulation-ref="first" data-tabulation-nav="3">Third</span>
  12.  
  13. </div>

初始化插件

在页面 DOM 元素加载完毕之后,通过 tabulation()方法来初始化插件。

  1. $('.js-tabulation').tabulation();

配置参数

可用的配置参数有:

  1. $('.js-tabulation').tabulation({
  2.   default: undefined, // Default tab to enable on startup
  3.   nav: 'active', // Class for navigation if active
  4.   tab: 'active', // Class for tab if active
  5.   beforeSet: undefined, // Function before tab changed. Stops if return false
  6.   afterSet: undefined // Function called after active tab changed
  7. });

default:默认显示的激活项

nav:分页导航上的激活 class 类

tab:tab 上的激活 class 类

beforeSet:tab 改变前的回调函数

afterSet:tab 改变后的回调函数

Github 网址:https://github.com/ruastronaut/jquery.tabulation

jquery.tabulation 兼容 bootstrap 的 jQuery 分页插件

已有 349 人购买
  • ouj9
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!