This time I will share jQuery Plugin and tutorial about Customizable SEO-Friendly Tabs Plugin – jquery-tab, hope it will help you in programming stack.
jquery-tab is a jQuery plugin used to create highly customizable tabs from semantic HTML markups that can be used to switch between different sections of content on the web page.
More features:
- Tons of configuration options.
- Easy to style via CSS.
- No link element needed.
- Search engine friendly for original content.
- Dynamic tab creation.
- Custom trigger events: click or hover.
- Keeps current selected index in URL hash, so that it can be restored after page refersh.
How to use it:
1. Load the main stylesheet and default skin CSS in the document.
1 |
< link rel = "stylesheet" href = "layout.css" > |
2 |
< link rel = "stylesheet" href = "skin-gray.css" > |
2. The basic HTML structure. The plugin will look for heading elements within the main container and converts them into tabs.
01 |
< div class = "tab-demo" > |
3. Call the plugin on the container and done.
4. Available options (with default values) to customize the tabs plugin.
04 |
triggerEvents: 'click' , |
07 |
delayTriggerEvents: '' , |
08 |
delayTriggerCancelEvents: '' , |
09 |
delayTriggerLatency: 200, |
15 |
statusFieldSelector: '' , |
18 |
statusHashTemplate: '' , |
21 |
statusHashSeparator: '&' , |
33 |
createEmptyTab: false , |
36 |
titleSelector: 'h1,h2,h3,h4,h5,h6' , |
39 |
showHeaderLabelContainer: true , |
42 |
showFooterLabelContainer: false , |
45 |
keepTitleVisible: false , |
48 |
onBeforeSwitch: undefined, |
49 |
onAfterSwitch: undefined, |
50 |
fnGetTitleContent: function ($title) { |
51 |
return $title.contents(); |
53 |
fnGetTabItemName: function ($title) { |
54 |
return $title.attr( 'data-tab-item-name' ); |
56 |
fnIsTabItemDisabled: function ($title) { |
57 |
var attrDisabled = $title.attr( 'data-tab-item-disabled' ); |
58 |
return attrDisabled !== undefined && attrDisabled !== 'false' ; |
60 |
fnIsTabItemHidden: function ($title) { |
61 |
var attrHidden = $title.attr( 'data-tab-item-hidden' ); |
62 |
return attrHidden !== undefined && attrHidden !== 'false' ; |
66 |
tabContainerTemplate: '<div></div>' , |
67 |
tabContainerClass: 'tab-container' , |
68 |
labelContainerTemplate: '<div></div>' , |
69 |
labelContainerClass: 'label-container' , |
70 |
labelItemTemplate: '<label></label>' , |
71 |
labelItemClass: 'label-item' , |
72 |
panelContainerTemplate: '<div></div>' , |
73 |
panelContainerClass: 'panel-container' , |
74 |
panelItemTemplate: '<div></div>' , |
75 |
panelItemClass: 'panel-item' |
5. API methods.
01 |
var instance = $( '.tab-demo' ).data( 'jquery-tab-controller' ); |
07 |
instance.getCurrentIndex() |
10 |
instance.getIndexByName() |
13 |
instance.getName(index) |
16 |
instance.setName(name|index, newName) |