Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/techlab/jquery-smarttab
The flexible jQuery tab control plugin
https://github.com/techlab/jquery-smarttab
ajax-contents javascript jquery jquery-plugin smarttab tablayout tabs
Last synced: 29 days ago
JSON representation
The flexible jQuery tab control plugin
- Host: GitHub
- URL: https://github.com/techlab/jquery-smarttab
- Owner: techlab
- License: other
- Created: 2012-02-09T07:08:41.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2023-01-24T16:43:51.000Z (almost 2 years ago)
- Last Synced: 2024-12-12T02:08:48.456Z (30 days ago)
- Topics: ajax-contents, javascript, jquery, jquery-plugin, smarttab, tablayout, tabs
- Language: JavaScript
- Homepage: http://techlaboratory.net/jquery-smarttab
- Size: 1.42 MB
- Stars: 41
- Watchers: 2
- Forks: 13
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# jQuery Smart Tab v4
#### The flexible jQuery tab control plugin
[](https://travis-ci.org/techlab/jquery-smarttab)
[](https://badge.fury.io/js/jquery-smarttab)
[](https://www.jsdelivr.com/package/npm/jquery-smarttab)
[](https://www.npmjs.com/package/jquery-smarttab)
[](https://raw.githubusercontent.com/techlab/jquery-smarttab/master/LICENSE)
[](https://github.com/sponsors/techlab)
[](https://www.paypal.me/dipuraj)
Smart Tab is a flexible and heavily customizable **tab control plugin for jQuery**.
> If you think it is cool, you should also check it's sibling [React Smart Tab](http://techlaboratory.net/react-smarttab)
+ [Homepage](http://techlaboratory.net/jquery-smarttab)
+ [Documentation](http://techlaboratory.net/jquery-smarttab#documentation)
+ [Demos](http://techlaboratory.net/jquery-smarttab#demo)
+ [StackOverflow Q&A](http://stackoverflow.com/questions/tagged/smart-tab)
+ [GitHub Issues](https://github.com/techlab/jquery-smarttab/issues)
Demos
-----
+ [Basic Example](http://techlaboratory.net/projects/demo/jquery-smart-tab/v4)
+ [Ajax Contents](http://techlaboratory.net/projects/demo/jquery-smart-tab/v4/ajax)
+ [Multiple Tabs](http://techlaboratory.net/projects/demo/jquery-smart-tab/v4/multiple)
+ [Vertical Tab Layout](http://techlaboratory.net/projects/demo/jquery-smart-tab/v4/vertical)
+ [Bootstrap Modal Example](http://techlaboratory.net/projects/demo/jquery-smart-tab/v4/bootstrap-modal)
Screenshots
-----
Requirements
-----
+ [jQuery](http://jquery.com/) (supports jQuery 1.11.1+ to jQuery 3.6+ and jQuery Slim versions)
Installation
-----
### [NPM](https://www.npmjs.com/package/jquery-smarttab)
npm install jquery-smarttab
### [Yarn](https://yarn.pm/jquery-smarttab)
yarn add jquery-smarttab
### [CDN - jsDelivr](https://www.jsdelivr.com/package/npm/jquery-smarttab)
```html
```
### [CDN - UNPKG](https://unpkg.com/browse/jquery-smarttab/)
```html
```
### Common JS/Webpack
```js
var $ = require("jquery");
require( "jquery-smarttab/dist/css/smart_tab_all.css");
const smartTab = require("jquery-smarttab");
$(function() {
$('#smarttab').smartTab();
});
```
### ES6/Babel
```js
import $ from "jquery";
import "jquery-smarttab/dist/css/smart_tab_all.css";
import smartTab from 'jquery-smarttab';
$(function() {
$('#smarttab').smartTab();
});
```
#### Note: you may have to install the required dependencies
```bash
npm i jquery
npm i jquery-smarttab
// If you are using Webpack, install
npm i webpack webpack-cli style-loader css-loader --save-dev
```
### Download
#### [Download from GitHub](https://github.com/techlab/jquery-smarttab/archive/master.zip)
Features
-----
- Easy to implement and minimal HTML required
- Supports all modern browsers
- Responsive CSS design
- Bootstrap compatible
- Cool themes included and can be easly customize
- Easy color cusomization using CSS variables
- Built-in transition animations (none|fade|slideHorizontal|slideVertical|slideSwing|css)
- Transition animations can be added easly by extending
- CSS Animations support for transition animations (Supports [Animate.css](https://animate.style/))
- Accessible controls
- External controls support
- Easy ajax content integration
- Keyboard navigation
- Auto content height adjustment
- Buit-in loader
- Buit-in events
- UMD (Universal Module Definition) support
- Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 3.6+, and jQuery Slim)
- URL navigation and tab selection
- Auto Progress (automatic navigation of tabs)
Usage
-----
Include jQuery SmartTab CSS
```html
```
Include HTML
```html
Tab content
Tab content
Tab content
Tab content
```
Include jQuery (*ignore this if you have already included on the page*).
```html
```
Include jQuery SmartTab JavaScript
```html
```
Initialize the jQuery SmartTab
```js
$(function() {
// SmartTab initialize
$('#smarttab').smartTab();
});
```
That's it!
Please see the [documentation](http://techlaboratory.net/jquery-smarttab#documentation) for more details on implementation and usage.
##### All options
```JavaScript
// SmartTab initialize
$('#smarttab').smartTab({
selected: 0, // Initial selected tab, 0 = first tab
theme: 'basic', // theme, related css need to include for other than default theme
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 step based on url hash
transition: {
animation: 'none', // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
speed: '400', // Animation speed. Not used if animation is 'css'
easing: '', // Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css'
prefixCss: '', // Only used if animation is 'css'. Animation CSS prefix
fwdShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on forward direction
fwdHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on forward direction
bckShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on backward direction
bckHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on backward direction
},
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
},
keyboard: {
keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
keyLeft: [37, 38], // Left key code
keyRight: [39, 40], // Right key code
keyHome: [36], // Home key code
keyEnd: [35] // End key code
},
style: { // CSS Class settings
mainCss: 'st',
navCss: 'nav',
navLinkCss: 'nav-link',
contentCss: 'tab-content',
contentPanelCss: 'tab-pane',
themePrefixCss: 'st-theme-',
justifiedCss: 'st-justified',
anchorDefaultCss: 'default',
anchorActiveCss: 'active',
loaderCss: 'st-loading'
},
getContent: null
});
```
License
----
[MIT License](https://github.com/techlab/jquery-smarttab/blob/master/LICENSE)
Contribute
----
If you like the project please support with your contribution.
[GitHub Sponsor](https://github.com/sponsors/techlab)
[Donate on Paypal](https://www.paypal.me/dipuraj)
Happy Coding :heart: