SimpleTab

Simple tab plugin with jQuery

Updates

• 3, Sep (2019)
  • Update default skin (with mobile version!)
  • You can use simpleTab with jquery-slim.js

Features

• A tab plug-in containing only the essential features :-)
• Enable to styling with custom CSS
• Access index with URL parameters
• Assignment of unused tab.
• Enable to link external.

Data Attribute Settings

Import

<!-- Stylesheet for Default Skin (Optional) --><linkrel="stylesheet" href="paths/simpletab.min.css"><!-- jQuery Libraries --><scriptsrc="paths/jquery-3.4.1.min.js"></script><scriptsrc="paths/simpletab.min.js"></script>

HTML

<!-- Tab --><ulclass="tab" data-tab-name="tabExample"><li><ahref="#content1">TAB1</a></li><li><ahref="#content2">TAB2</a></li><li><ahref="#content3">TAB3</a></li><li><ahref="http://google.com" target="_blank">Link</a></li><!-- External link --></ul><!-- Content --><divid="content1">
Content of TAB 1
</div><divid="content2">
Content of TAB 2
</div><divid="content3">
Content of TAB 3
</div>

• Tabs must be written with tag <a> and link with content's id.
• 'data-tab-name' is name for parameter with index of tab to access. You can customize this name.
• Assign starting index and dimmed Index with library options not inline class in markup.

Access of tab index with URL parameters

../filename.html?tabExample=2

• 'tabExample' is tab name linked with data-tab-name of tab object in markup.
• Indexs start with 0 base.
• In case of that there is multiple tabs, Separate parameters with '&' like this.

../filename.html?tabName1=2&tabName2=1

jQuery

Default Skin

jQuery(document).ready(function($){$(".tab").simpleTab({defaultSkin: true//default value: false});});

Custom Skin

CSS can be written freely, Assign class name for current and unable tab in library options.

jQuery(document).ready(function($){// set class of active tab & dimmed tab for styling custom skin$(".tab").simpleTab({onTabClass: 'selected',dimmedTabClass: 'dimmed'});});

Callback

There is callback option running after tab changing.

jQuery(document).ready(function($){$(".tab").simpleTab({afterChange:function($content,prevIdx,currentIdx){if(currentIdx==2)alert("Welcome :) ID of this content is '"+$content.attr("id")+"'.");elsealert("Tab is toggled.");}});});

Options

Option	Type	Default	Description
defaultSkin	boolean	false	Use default skin
onTabClass	string	'selected'	Class name on <li> tag of current tab. Setting for user css.
dimmedTabClass	string	'dimmed'	Class name on <li> tag of disabled tab. Setting for user css.
startIndex	int	0	Enable setting index of start. Start with 0 base.
dimmedIndexs	int or string	null	set tabs to be couldn't clicking. Enable multiple items with separator ','. (ex) dimmedIndexs: '0, 1, 2' or dimmedIndexs: 1
fadeEffect	boolean	true	Enable/Disable fade effect.
fadeSpeed	int	400	Fade In/Out Speed.
afterChange	function($content, prevIndex, currentIndex)	null	Callback function after changing tab. You can use connected parameters.

Sass Variables

Variable	Type	Default	Description
$selected-class	string	'.selected'	Selected tab class
$dimmed-class	string	'.dimmed'	Dimmed tab class
$default-tab-bg-color	color	#f5f5f5	Color of default tab's background
$default-tab-text-color	color	#777777	Color of default tab's text
$default-tab-border-color	color	#dddddd	Color of default tab's border
$default-tab-height	pixels	50px	height of default tab
$mobile-tab-height	pixels	40px	height of mobile tab
$selected-tab-bg-color	color	#ffffff	Color of selected tab's background
$selected-tab-text-color	color	#000000	Color of selected tab's text
$selected-tab-border-color	color	#09c453	Color of selected tab's border
$selected-tab-border-width	pixels	4px	Thickness of selected tab's top border
$selected-tab-shadow-opacity	float	0.1	Opacity of selected tab's shadow. Value must be 0 to 1.
$dimmed-tab-bg-color	color	#d5d5d5	Color of dimmed tab's background
$tab-content-padding	pixels	30px	Padding in detail contents of tab.

Browser support

SimpleTab Works on IE7+ in addition to other modern browsers such as Chrome, Firefox, and Safari.

License

Copyright (c) 2019 Wookju Choi Licensed under the MIT license.