
tabulation.js is a very small jQuery paginator plugin to create pagination controls to switch between tabbed content within your document.
Compatible and styled with the latest Bootstrap 4 or Bootstrap 3 framework.
1. Load the Bootstrap's stylesheet in the header of the webpage.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" >
2. Add the data-tabulation-tab
attribute to tabs.
<div data-tabulation-tab>Tab #1</div> <div data-tabulation-tab>Tab #2</div> <div data-tabulation-tab>Tab #3</div> <div data-tabulation-tab>Tab #4</div> <div data-tabulation-tab>Tab #5</div> ...
3. Create the pagination links as follows:
<a href="#" class="btn btn-info" data-tabulation-nav="prev">prev</a> <a href="#" class="btn btn-light" data-tabulation-nav="1">1</a> <a href="#" class="btn btn-light" data-tabulation-nav="2">2</a> <a href="#" class="btn btn-light" data-tabulation-nav="3">3</a> <a href="#" class="btn btn-light" data-tabulation-nav="4">4</a> <a href="#" class="btn btn-light" data-tabulation-nav="5">5</a> ... <a href="#" class="btn btn-info" data-tabulation-nav="next">next</a>
4. To initialize the paginator automatically, just add the data-tabulation
to the parent container. The full HTML should be like so:
<div class="card" data-tabulation> <div class="card-header"> Init with data attribute (standard) </div> <div class="card-body"> <div data-tabulation-tab>Tab #1</div> <div data-tabulation-tab>Tab #2</div> <div data-tabulation-tab>Tab #3</div> <div data-tabulation-tab>Tab #4</div> <div data-tabulation-tab>Tab #5</div> </div> <div class="card-footer"> <a href="#" class="btn btn-info" data-tabulation-nav="prev">prev</a> <a href="#" class="btn btn-light" data-tabulation-nav="1">1</a> <a href="#" class="btn btn-light" data-tabulation-nav="2">2</a> <a href="#" class="btn btn-light" data-tabulation-nav="3">3</a> <a href="#" class="btn btn-light" data-tabulation-nav="4">4</a> <a href="#" class="btn btn-light" data-tabulation-nav="5">5</a> <a href="#" class="btn btn-info" data-tabulation-nav="next">next</a> </div> </div>
5. You're also allowed to initialize the paginatin by calling the function (with optional settings) on the top container.
$('.content').tabulation({ // active classes navigation: { active: { class: 'active', } }, // active classes tabulation: { active: { class: 'active', } } });
This awesome jQuery plugin is developed by ruastronaut. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 12.09.2018
- Source