TabLooper is a Responsive Tab jQuery Plugin that is used to create tabs for your sites with responsive layout, support unlimited tabs, combine inline and AJAX content for best performance, move tab content by touch swipe event ( on mobile devices ) or left/right keys ( on desktop/laptop ) or simple click on buttons ( all devices ). Additionally, the plugin has already supported Metro UI layout for modern themes. If you want you also can create new style by using CSS and change styles of the tab easily.

 

 

TabLooper Responsive Loop Tab Metro UI

 

Other Demos:

 

TabLooper Features:

  • Responsive Design.
  • Unlimited Tabs.
  • Effects for Each Tab Content.
  • Combine Inline and AJAX Content.
  • Support Touch Swipe to move Tab Content ( Mobile Devices ).
  • Support Left/Right Keys to move Tab Content ( Desktop/Laptop ).
  • Click on Buttons to move Tab Content ( All Devices ).
  • Count Total of Tab.
  • Metro UI Style.

 

Change Logs:

+ Feb 2014: Version 1.1:

  • Add a param to Close Tab Content.
  • Support Icon Font Awesome.

+ Mar 2013: First Version.

 

Credits:

 

Table Of Contents:

  1. Setup TabLooper.
  2. Call The Plugin.
  3. TabLooper HTML Structure.
  4. Parameters.

 

 

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.

 

 

That’s it. If you have any questions that are beyond the scope of this plugin, please feel free to email me via Contact Form. No guarantees, but I’ll do my best to assist you. Thanks so much!

 

More Plugins:

 

 

LEAVE A COMMENT

Tagged with:
 
Set your Twitter account name in your settings to use the TwitterBar Section.