agencenous/jquery-tabs

简单添加标签页。

维护者

详细信息

github.com/agencenous/jquery-tabs

源代码

问题

安装: 589

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

语言:SCSS

类型:jquery-plugin

1.0.3 2023-03-03 08:58 UTC

GPL-2.0-or-later 7b3698412e9940201fb8c7c3a490215a6be62d08

  • Bastien Ho <bastien.woop@avecnous.eu>

This package is auto-updated.

Last update: 2024-09-16 22:55:29 UTC

README

简单添加标签页。

安装

composer require agencenous/jquery-tabs

使用

<style rel="stylesheet" href="/vendor/agencenous/jquery-tabs/jquery-tabs.css"/>
<script src="/vendor/agencenous/jquery-tabs/jquery-tabs.js"/>

示例

<div class="content">
  <section>
    <h3>Section 1</h3>
    <p>Somme content</p>
  </section>
  <section>
    <h3>Section 2</h3>
    <p>Somme content</p>
  </section>
  <section>
    <h3>Section 3</h3>
    <p>Somme content</p>
</section>
</div>

然后，只需实例化

jQuery('.content').createTabs({
		children: 'section',
		childrenTitle: 'h3'
});

额外参数

  • hideUntilLast
  • prevText,
  • nextText,
  • prevClass,
  • nextClass

完整示例

jQuery('#form').createTabs({
		children: 'fieldset',
		childrenTitle: '.tab-title',
		hideUntilLast: 'input[type=submit]',
		prevText: '« back',
		nextText: 'Next »',
		prevClass: 'btn',
		nextClass: 'btn'
});

触发器

jQuery('#form')
  .on('tab_ready', function(){
    console.log('READY!');
  })
  .on('tab_change', function(){
    console.log('TAB CHANGED!');
  })
.createTabs();