SECTION 1: SETUP TABLOOPER.
First of all, to ensure everything works correctly, please use <!DOCTYPE html>.
Include the following code into HEAD section of the page.
Include required CSS files:
<meta name="viewport" content="width=device-width, user-scalable=no" />
<!-- Demo Style -->
<link rel="stylesheet" href="css/global-demo.css" type="text/css" />
<!-- SONHLAB Style -->
<link rel="stylesheet" href="css/sonhlab-base.css" type="text/css" />
<!-- TabLooper -->
<link rel="stylesheet" href="css/tablooper.css" type="text/css" />
If you want to use Font Awesome, you need to include:
<!-- Font Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
Include Javascript files:
<!-- Start jQuery Library -->
<!--[if !IE]> -->
<script type="text/javascript" src="js/jquery/jquery.min.2.0.3.js"></script>
<!-- <![endif]-->
<!--[if gte IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.2.0.3.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.1.10.2.js"></script>
<![endif]-->
<!-- End jQuery Library -->
<!-- jQuery Mobile For Touch Swipe -->
<script type="text/javascript" src="js/jquery/jquery.mobile.touch.min.1.3.2.js"></script>
<!-- TabLooper Plugin -->
<script type="text/javascript" src="js/tablooper.dev.js"></script>
Done, TabLooper is ready to use.
SECTION 2: CALL THE PLUGIN.
To call the plugin you can add below script into HEAD section:
<!-- Call TabLooper Plugin -->
<script type="text/javascript">
$(window).load(function() {
$('#looptab').looptab({
ext: 'php', // use this param when you use ajax method to load tab content
EnableSwipe: true,
EnableKeys: true,
EnableHide: false,
HideContentTab: false
});
});
</script>
Section 2 is done.
SECTION 3: TABLOOPER HTML STRUCTURE.
This section should be read along with the example files also contained in the download package.
<!-- START TAB LOOPER -->
<div id="looptab" class="loop-tabbox">
<!-- START TAB ZONE -->
<div class="loop-tabzone">
<!-- Start Tab Holder -->
<div class="loop-tabholder">
<!-- Start Example Tab -->
<div data-tabid="exampletab" class="loop-tab">
<img src="tab-icon-url" alt="example tab" />
<span>Tab Title</span>
</div>
<!-- End Example Tab -->
</div>
<!-- End Tab Holder -->
<!-- Start Tab Controller -->
<div class="loop-tabctrl">
<!-- Start Prev Button -->
<div class="loop-prevbt">
<img src="prev-icon-url" alt="prevbt" />
</div>
<!-- End Prev Button -->
<!-- Start Tab Number -->
<div class="loop-tabnum">
<span class="loop-curindex"></span><span class="loop-tabtotal">/</span>
</div>
<!-- End Tab Number -->
<!-- Start Next Button -->
<div class="loop-nextbt">
<img src="next-icon-url" alt="nextbt" />
</div>
<!-- End Next Button -->
</div>
<!-- End Tab Controller -->
</div>
<div class="clearspace"></div>
<!-- END TAB ZONE -->
<!-- START TAB CONTENT -->
<div class="loop-contentzone">
<!-- Start Example Tab Content -->
<div class="loop-content" data-tabid="exampletab">
// Add some content here
</div>
<!-- End Example Tab Content -->
</div>
<!-- END TAB CONTENT -->
</div>
<!-- END TAB LOOPER -->
Explanation: When a tab has data-tabid=”exampletab” is activated a tab content has the same data-tabid value will be displayed.
AJAX Content:
If you want to use AJAX method to load tab content you need to create files in “content/tablooper/” folder with filename is data-tabid value ( e.g: exampletab.php ) then add tab content in it. When the plugin can not find tab content in “loop-contentzone” block it will go to the “content/tablooper/” folder and load a file which its filename is data-tabid value.
SECTION 4: PARAMETERS.
Javascript Parameters:
|
Parameters |
Properties |
Description |
|
ext |
string |
This param is used to define AJAX file extension.
Default Value: ‘php’ |
|
errormes |
string |
This param is used to add an error message when tab content not exist. |
|
EnableSwipe |
boolean |
This param is used to enable or disable Swipe feature to move next/prev tab.
Value: true | false. |
|
EnableKeys |
boolean |
This param is used to enable or disable Left and Right keys to move next/prev tab.
Value: true | false. |
|
HideContentTab |
boolean |
This param is used to show or hide tab content at the first.
Value: true | false. |
|
EnableHide |
boolean |
This param is used to enable or disable Hide Tab Content feature.
Value: true | false. |
HTML Parameters:
|
Parameters |
Positions |
Description |
|
data-efin |
loop-content |
This param is used to set effect to show tab content.
Value: movetoleft, movetoright, slide and fade (default). |
|
data-durin |
loop-content |
This param is used to set time ( miliseconds ) to run showing effects for tab content.
Default Value: 200. |
|
data-efout |
loop-content |
This param is used to set effect to hide tab content.
Value: movetoleft, movetoright, slide and fade (default). |
|
data-durout |
loop-content |
This param is used to set time ( miliseconds ) to run hiding effects for tab content.
Default Value: 200. |
JS Tutorial
