techlab / jquery-smarttab
The flexible jQuery tab control plugin
Fund package maintenance!
www.paypal.me/dipuraj
Installs: 20
Dependents: 0
Suggesters: 0
Security: 0
Stars: 28
Watchers: 2
Forks: 9
Open Issues: 5
Language:CSS
This package is not auto-updated.
Last update: 2021-04-03 19:30:22 UTC
README
The flexible jQuery tab control plugin
Smart Tab is a flexible and heavily customizable jQuery Tab control plugin.
If you think it is cool, you should also check it's sibling React Smart Tab
Demos
Screenshots
Requirements
- jQuery (supports from jQuery-1.11.1+ to the latest jQuery-3.5.0)
Installation
NPM
npm install jquery-smarttab
Yarn
yarn add jquery-smarttab
Composer
composer require techlab/jquery-smarttab
CDN - jsDelivr
<!-- CSS --> <link href="https://cdn.jsdelivr.net/npm/jquery-smarttab@3.1.1/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" /> <!-- JavaScript --> <script src="https://cdn.jsdelivr.net/npm/jquery-smarttab@3.1.1/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>
CDN - UNPKG
<!-- CSS --> <link href="https://unpkg.com/jquery-smarttab@3.1.1/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" /> <!-- JavaScript --> <script src="https://unpkg.com/jquery-smarttab@3.1.1/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>
Download
Download from GitHub
Features
- Responsive design
- Standalone CSS
- Bootstrap compatible
- Various themes included
- Customizable CSS
- Cool transition animations (fade/slide-horizontal/slide-vertical/slide-swing)
- URL navigation and tab selection
- Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 2+, jQuery 3.5+)
- Auto content height adjustment
- Auto Progress (automatic navigation of tabs)
- Ajax content loading support
- Keyboard navigation
- External anchor support
- Custom events
- Supports all modern browsers
- Easy to implement and minimal HTML required
Usage
Include jQuery SmartTab CSS
<link href="../dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />
Include HTML
<div id="smarttab"> <ul class="nav"> <li> <a class="nav-link" href="#tab-1"> Tab 1 </a> </li> <li> <a class="nav-link" href="#tab-2"> Tab 2 </a> </li> <li> <a class="nav-link" href="#tab-3"> Tab 3 </a> </li> <li> <a class="nav-link" href="#tab-4"> Tab 4 </a> </li> </ul> <div class="tab-content"> <div id="tab-1" class="tab-pane" role="tabpanel"> Tab content </div> <div id="tab-2" class="tab-pane" role="tabpanel"> Tab content </div> <div id="tab-3" class="tab-pane" role="tabpanel"> Tab content </div> <div id="tab-4" class="tab-pane" role="tabpanel"> Tab content </div> </div> </div>
Include jQuery (ignore this if you have already included on the page).
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Include jQuery SmartTab JavaScript
<script type="text/javascript" src="../dist/js/jquery.smartTab.min.js"></script>
Initialize the jQuery SmartTab
<script type="text/javascript"> $(document).ready(function(){ // SmartTab initialize $('#smarttab').smartTab(); }); </script>
That's it!
Please see the documentation for more details on implementation and usage.
All options
// SmartTab initialize $('#smarttab').smartTab({ selected: 0, // Initial selected tab, 0 = first tab theme: 'default', // theme for the tab, related css need to include for other than default theme orientation: 'horizontal', // Nav menu orientation. horizontal/vertical justified: true, // Nav menu justification. true/false autoAdjustHeight: true, // Automatically adjust content height backButtonSupport: true, // Enable the back button support enableURLhash: true, // Enable selection of the tab based on url hash transition: { animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing speed: '400', // Transion animation speed easing:'' // Transition animation easing. Not supported without a jQuery easing plugin }, autoProgress: { // Auto navigate tabs on interval enabled: false, // Enable/Disable Auto navigation interval: 3500, // Auto navigate Interval (used only if "autoProgress" is enabled) stopOnFocus: true, // Stop auto navigation on focus and resume on outfocus }, keyboardSettings: { keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled) keyLeft: [37], // Left key code keyRight: [39] // Right key code } });
License
Contribute
If you like the project please support with your contribution.
Thank you and Happy Coding!