TabLooper – Responsive Metro UI Loop Tab jQuery Plugin

March 21, 2013February 13, 2023 SONHLAB ajax, metro ui, responsive tab, tab, tablooper, touch swipe

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.

Buy Now

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:

<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.

[endedwords product=””]http://talk.sonhlab.com/room/tablooper-jquery-plugin[/endedwords]