Customizable SEO Friendly Tabs Plugin jQuery - Free Download Customizable SEO-Friendly Tabs Plugin - jquery-tab

Free Download Customizable SEO-Friendly Tabs Plugin – jquery-tab

Posted on

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.

Customizable SEO Friendly Tabs Plugin jQuery - Free Download Customizable SEO-Friendly Tabs Plugin - jquery-tab
File Size: 186 KB
Views Total: 2819
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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">
02   <h1>Tab 1</h1>
03   <p>Content 1</p>
04   ... more content here
05  
06   <h1>Tab 2</h1>
07   <p>Content 2</p>
08   ... more content here
09  
10   <h1>Tab 3</h1>
11   <p>Content 3</p>
12   ... more content here
13 </div>

3. Call the plugin on the container and done.

1 $('.tab-demo').tab();

4. Available options (with default values) to customize the tabs plugin.

01 $('.tab-demo').tab({
02  
03   // or 'hover'
04   triggerEvents: 'click',
05  
06   // delays trigger events
07   delayTriggerEvents: '',
08   delayTriggerCancelEvents: '',
09   delayTriggerLatency: 200,
10  
11   // enable keyboard interaction
12   keyboardSwitch: true,
13  
14   // A form (normally hidden) field to store active tab index
15   statusFieldSelector: '',
16  
17   // A key-value pair template to store active tab index in URL hash
18   statusHashTemplate: '',
19  
20   // Determine a separator between multiple hash items if there are more than 1 tab-container on the same page
21   statusHashSeparator: '&',
22  
23   // Is fixed height
24   fixedHeight: false,
25  
26   // or "vertical"
27   mode: "horizontal",
28  
29   // start tab
30   activePosition: 0,
31  
32   // still create tab container when there is no tab item found
33   createEmptyTab: false,
34  
35   // heading elements
36   titleSelector: 'h1,h2,h3,h4,h5,h6',
37  
38   // show label container before panel container
39   showHeaderLabelContainer: true,
40  
41   // show label container after panel container
42   showFooterLabelContainer: false,
43  
44   // Keep title always visible
45   keepTitleVisible: false,
46  
47   // callbacks
48   onBeforeSwitch: undefined, // (from:{index, name}, to:{index, name}, tabState)
49   onAfterSwitch: undefined, // (from:{index, name}, to:{index, name}, tabState)
50   fnGetTitleContent: function ($title) {
51       return $title.contents();
52   },
53   fnGetTabItemName: function ($title) {
54       return $title.attr('data-tab-item-name');
55   },
56   fnIsTabItemDisabled: function ($title) {
57       var attrDisabled = $title.attr('data-tab-item-disabled');
58       return attrDisabled !== undefined && attrDisabled !== 'false';
59   },
60   fnIsTabItemHidden: function ($title) {
61       var attrHidden = $title.attr('data-tab-item-hidden');
62       return attrHidden !== undefined && attrHidden !== 'false';
63   },
64  
65   // Default HTML/CSS
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'
76    
77 });

5. API methods.

01 var instance = $('.tab-demo').data('jquery-tab-controller');
02  
03 // Get the number of tabs.
04 instance.getCount()
05  
06 // Get current active tab Index.
07 instance.getCurrentIndex()
08  
09 // Get tab item index by name.
10 instance.getIndexByName()
11  
12 // Get tab item name by index.
13 instance.getName(index)
14  
15 // Set tab item name.
16 instance.setName(name|index, newName)
17  
18 // Check if enabled/disabled.