MetroTab is a light jQuery plugin to create tabs for metro ui themes with unique features responsive design, unlimited tabs, ajax and inline content combination.

 

 

MetroTab - Metro UI Responsive Tabs

 

MetroTab ver 2.1 Features:

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

 

Change Logs:

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. Setup MetroTab plugins.
  2. MetroTab HTML Structure.
  3. Call MetroTab Plugin.
  4. Parameters and Easing List.

 

 

Section 1: Setup MetroTab Plugins.

This section will tell you how to setup metro tabs 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]-->

 

Include CSS files:

<link rel="stylesheet" href="css/metrotab-v2.css" type="text/css" />
<meta name="viewport" content="width=device-width, user-scalable=no" />

 

Include Javascript files:

<!-- jQuery Library 1.8.3 -->
<script type="text/javascript" src="js/jquery/jquery.min.183.js"></script>
<!-- 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/masonry.min.js"></script>
<!-- Modernizr Transition -->
<script type="text/javascript" src="js/masonry/modernizr-transitions.js"></script>

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

MetroTab Setup is finished.

 

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 is same the Tab ID the plugin will show that content ( Inline Method ). If the Station do not have the eligible content the plugin will check files in “/content” folder and will show the file has the name is same the Tab ID ( Ajax Method ).

If you want to use Ajax content you need to create files with file names are same Tab ID. See demo file for more detail.

If you want to use inline content for SEO purposes, you need to create MetroTab Station and add content into it. See demo file for more detail.

 

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.

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

 

 

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 with Metro UI:

 

 

LEAVE A COMMENT
Tagged with:
 

Comments are closed.

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