jQuery Plugins Plugins 

MetroTab 2 – Responsive Metro UI Tabs jQuery Plugin

SONHLAB , , , , , ,

MetroTab is a light jQuery plugin to create tabs for metro ui themes with unique features: responsive design, unlimited tabs, multi MetroTab in Same page, SEO with inline content, flexibility AJAX Content for performance…

 

Buy Now

 

 

Demos:

MetroTab Responsive Tab jQuery Plugin

 

MetroTab Features:

  • Support Responsive Design.
  • Ajax and Inline Content Combination.
  • Multi MetroTab in Same Page.
  • Work on Almost Platforms.
  • SEO with Inline Content.
  • Easy customization.

 

Change Logs:

12 Sep 2014: Update version 2.2:
  • Improve AJAX load method (support Dynamic and Static method).
  • Add new params: data-ext and resWidth.
  • Fix some minor bugs.
03 May 2013: Release version 2.1:
  • Fix Multi-tab bug.
  • Add a param to set title for minibar.
  • Add a param to set color for minibar.
  • Add a param to set width for Tab Zone.
09 Jan 2013: Release version 2.0:
  • Support Responsive Design.
05 Nov 2012: Update version 1.5:
  • Support Inline Content For SEO Purpose.
  • Fix Bugs.
24 Aug 2012: Update ver 1.4.
  • Improve Ajax Load.
  • Add new param to change content file extension.
  • Add new fade effect.
  • Compatibility jQuery 1.8.

NOTE : In this upate I renamed the param ‘slidedirection’ to ‘mtEffect’. So if you are using ‘slidedirection’ please rename it to ‘mtEffect’.

24 Jul 2012:
  • Support older jQuery ( 1.4.x+ ).
  • Add a new param to set content block.
06 Jul 2012:
  • Add a new parameter to change Scroll Bar style.
  • Add more transparent background colors.
09 Jun 2012:
  • Optimize Javascript code.
05 Jun 2012:
  • First Version.

 

Credits:

MetroTab ver 2.0 is developed by SONHLAB.com and used below third parties:

 

Table of Contents:

  1. Installing MetroTab plugin.
  2. MetroTab HTML Structure.
  3. Call MetroTab Plugin.
  4. Parameters and Easing List.

 

[ga_res]

 

Section 1: Installing MetroTab Plugin.

This section will show you how to setup MetroTab plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html>.

Include the following code into HEAD section of the page.

For Internet Explorer 8 works correctly we need to add:

<!--[if lt IE 9]>
<script type="text/javascript">
var is_ie_lt9 = true;
document.createElement('header');
document.createElement('section');
document.createElement('figure');
document.createElement('figcaption');
</script>
<![endif]-->

 

Including CSS files:

<!-- SONHLAB Base -->
<link rel="stylesheet" href="css/sonhlab-base.css" type="text/css" />
<!-- MetroTab CSS -->
<link rel="stylesheet" href="css/metrotab-v2.css" type="text/css" />
<meta name="viewport" content="width=device-width, user-scalable=no" />

 

Including Javascript files:

<!-- Start jQuery Library -->

<!--[if !IE]> -->
<script type="text/javascript" src="js/jquery/jquery.min.2.1.0.js"></script>
<!-- <![endif]-->

<!--[if gte IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.2.1.0.js"></script>
<![endif]-->

<!--[if lt IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.1.11.js"></script>
<![endif]-->

<!-- End jQuery Library -->


<!-- jQuery Easing Plugin -->
<script type="text/javascript" src="js/jquery/jquery.easing.min.13.js"></script>

<!-- the mousewheel plugin -->
<script type="text/javascript" src="js/jscrollpane/jquery.mousewheel.min.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jscrollpane/jquery.jscrollpane.min.js"></script>

<!-- Masonry Plugin -->
<script type="text/javascript" src="js/masonry/jquery.masonry.min.js"></script>

<!-- Modernizr Transition -->
<script type="text/javascript" src="js/masonry/modernizr-transitions.js"></script>

<!-- MetroTab Plugin -->
<script type="text/javascript" src="js/metrotab-v2.dev.js"></script>

 

Done, MetroTab is ready to use.

 

Section 2: MetroTab HTML Structure.

First of all, we need a block to contain metro tabs and its content:

<div class="metrotabs">

  <!-- Tab Holder Block -->
  <div class="mt-blocksholder floatleft"></div>

  <!-- Content Block -->
  <div class="mt-contentblock mt-contentblockstyle floatleft">
    <div class="mt-content"></div>
  </div>

</div>

 

Then we need to add tabs into Tab Holder:

<!--Start Tab Holder -->
<div class="mt-blocksholder floatleft">

  <div id='tab1' class="tile-bt solid-blue-2 shadow-white mt-tab mt-loadcontent">
    <a href="javascript:void(0);" class="gradient">
      <img src="images/metrotab/icon.png" alt="" />
      <span class="light-text">Tab 1</span>
    </a>
  </div>

  <div id='tab2' class="tile-bt-large solid-blue-2 shadow-white mt-tab mt-loadcontent">
    <a href="javascript:void(0);" class="gradient">
      <img src="images/metrotab/icon.png" alt="" />
      <span class="light-text">Tab 2</span>
    </a>
  </div>

  <div id='tab3' class="tile-bt-tall solid-blue-2 shadow-white mt-tab mt-loadcontent">
    <a href="javascript:void(0);" class="gradient">
      <img src="images/metrotab/icon.png" alt="" />
      <span class="light-text">Tab 3</span>
    </a>
  </div>

  <div id='tab4' class="tile-bt-long solid-blue-2 shadow-white mt-tab mt-loadcontent">
    <a href="javascript:void(0);" class="gradient">
      <img src="images/metrotab/icon.png" alt="" />
      <span class="light-text">Tab 4 Ajax</span>
    </a>
  </div>

  <div id='tab5' class="tile-bt solid-blue-2 shadow-blue mt-tab mt-loadcontent mt-active">
    <a href="javascript:void(0);" class="gradient">
      <img src="images/metrotab/icon.png" alt="" />
      <span class="light-text">Tab 5</span>
    </a>
  </div>

  <div id='tab6' class="tile-bt solid-blue-2 shadow-white mt-tab">
    <a href="http://sonhlab.com" class="gradient">
      <img src="images/metrotab/icon.png" alt="" />
      <span class="light-text">Link</span>
    </a>
  </div>

  <div id="tab7" class="tile-bt solid-blue-2 shadow-white mt-tab mt-loadcontent">
    <a href="javascript:void(0);" class="gradient">
      <img src="images/metrotab/icon.png" alt="" />
      <span class="light-text">Error</span>
    </a>
  </div>

</div>
<!-- End Tab Holder -->

When a tab is clicked, the plugin will detect its ID and check content in MetroTab Station. If the Station has a content with “data-mtid” value that is the same with the Tab ID the plugin will show that content (Inline Method). If the Station does not have any eligible content, the plugin will use AJAX method to load content.

With AJAX method, we also provide two methods to load independent files: Static and Dynamic.

When you use Static method you need to create a file for each Tab button (filename is Tab ID button) and you can use with any file extension (html, php,…). To use this method, you just provide a “data-ext” param (which value is a file extension: php, html,…) for a Tab button that is used to load content.

When you use Dynamic method you have to create content in “ajaxstation.php” file in “/content/metrotab/” folder. You can use “if else” statement to control content. When the plugin cannot find content in the the Station it will find and load content in the “ajaxstation.php” file automatically so you do not need to do anything in this case, just add content into “ajaxstation.php” file.

In real use, you can combine the Inline Method and AJAX Method for best performance.

 

 

Section 3: Call MetroTab Plugin.

<script type="text/javascript">
$(document).ready(function() {
  $('.metrotabs').metrotabs({
    outeffect : 'swing',
    ineffect : 'swing',
    moveout : 'BottomOrRight',
    movein : 'TopOrLeft',
    outduration : 400,
    induration : 400,
    mtEffect : 'horizontal'
  });	
});
</script>

 

 

Section 4: Parameters and Easing List.

 

HTML Parameters:

Parameters Positions Description
data-ext string This param is used to set default AJAX file extension (php, html,…).

 

Javascript Parameters:

Parameters Properties Description
ContentAreaId string Where the tab content will be shown.
mtFileExtension string This param use to set content file extension.
outeffect string slide effect when the content move out ( see easing list below ).
ineffect string slide effect when the content move in ( see easing list below ).
moveout string this parameter will determine the content will move out to left or right ( slidedirection: horizontal ), up or down (slidedirection: vertical ).
movein string this parameter will determin the content will move in from left or right (slidedirection: horizontal ), up or down (slidedirection: vertical ).
outduration integer duration in milisecond of outeffect.
induration integer duration in milisecond of ineffect.
mtEffect string this parameter will determine the content will slide vertical or horizontal or fade effect.
scrollbarstyle string This will make style for scroll bar. Use background list.
blkwidth integer This param is used to set the width for tab zone.
resWidth integer This param is used to set Mobile Screen Resolusion.
minibarbg string This param is used to set color for minibar.
minibartitle string This param is used to set title text for minibar.

 

Easing List:

swing | easeInQuad | easeOutQuad | easeInOutQuad | easeInCubic | easeOutCubic | easeInOutCubic | easeInQuart | easeOutQuart | easeInOutQuart | easeInQuint | easeOutQuint | easeInOutQuint | easeInSine | easeOutSine | easeInOutSine | easeInExpo | easeOutExpo | easeInOutExpo | easeInCirc | easeOutCirc | easeInOutCirc | easeInElastic | easeOutElastic | easeInOutElastic | easeInBack | easeOutBack | easeInOutBack | easeInBounce | easeOutBounce | easeInOutBounce.

 

 

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

 

 

More Plugins with Metro UI: