MetroPanel is a jQuery plugin that use to make a panel for your web application. With this plugin you will impress you visitors by greate features, improve your page speed with smart load feature.

 

 

MetroPanel jQuery Plugin

 

 

MetroPanel Features:

  • Two Panel Position: Left and Right.
  • Unlimited Items.
  • Unlimited Background Colors.
  • Ajax + HTML5 smart load for SEO.
  • jQuery + CSS3 Animation Effects.
  • Auto Show/Hide Panel.
  • Many Options to Customize.

 

Change Logs:

21 Oct 2012 – Version 1.1:

+ Fix bugs.

+ Optimize source code.

+ Support jQuery 1.8+.

 

03 Aug 2012 – First Version.

 

Credits:

This plugin is developed by SONHlab.com and use below third parties:

  • jQuery Library.
  • jQuery Easing.
  • jScrollPane Plugin.
  • Mousewheel Plugin.

 

Table of Contents:

  1. Setup MetroPanel Plugin.
  2. Call MetroPanel Plugin.
  3. Load Methods.
  4. MetroPanel Structure.
  5. Parameters and Easing List.

 

 

Section 1: Setup MetroPanel Plugin.

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

Include the following code into HEAD section of the page.

Include CSS files:

<link rel="stylesheet" href="css/metropanel.css" type="text/css" />

Include Javascript files:

<!-- jQuery Library -->
<script type="text/javascript" src="js/jquery/jquery.min.172.js"></script>
<!-- jQuery Easing -->
<script type="text/javascript" src="js/jquery/jquery.easing.min.13.js"></script>
<!-- mousewheel plugin -->
<script type="text/javascript" src="js/jscrollpane/jquery.mousewheel.min.js"></script>
<!-- jScrollPane script -->
<script type="text/javascript" src="js/jscrollpane/jquery.jscrollpane.min.js"></script>
<!-- MetroPanel Plugin -->
<script type="text/javascript" src="js/metropanel.min.js"></script>

Setup done.

 

Section 2: Call MetroPanel Plugin.

After create page structure we need to add a script in <head> tag to call the plugin.
To call the plugin with default options:

<script type="text/javascript">
  $(window).load(function() {
   $('#metropanel').metropanel();
  });
</script>

To call the plugin with custom options:

 <script type="text/javascript">
  $(window).load(function() {
   $('#metropanel').metropanel({
    mpPosition:'right',
    mpMainItemBg: '#016C38',
    mpSubmenuBg: '#004D60',
    mpActiveItem:'transparent-smoke',
    mpHoverItem:'transparent-black',
    contentPosition:'center',
    contentEffect:'slideLeft',
    contentEffectDuration:400,
    easingIn:'easeInBack',
    easingOut:'easeInBack',
    MainListScrollBarStyle: 'solid-olive',
    SubmenuScrollBarStyle: 'solid-blue',
    mpState:0,
    MainItemDisplay:3
   });
  });
 </script>

Call the plugin done.

 

Section 3: Load Method.

In this plugin we use AJAX + HTML5 to load content and change the url for modern browsers ( support HTML5 ) – Smart Load. With old browsers ( do not support HTML5 ) the plugin will use normal method to load content.

Setup a link can use Smart Load:

This is an example of items in main item list will be loaded by Smart Load when it is clicked.

<a href="metropanel.php?mpid=filename" data-mpid="filename" class="mp-loadcontent">
  // Title
</a>

In above example we use the class “mp-loadcontent” to control load method. When <a> tag has this class the plugin will be use ajax load. You can remove this class when you want to add an external links ( See items in submenu for more detail ).

When you use ajax load method the <a> tag must has data-mpid=”filename” and the link in href must has a param mpid=”filename”.

filename is the name of a php fiile in content folder. This file will be load when the link is called.

Additional, to set defaut content when visitors access the page without url param ( mpid ) we need to add a php script at the top of the page.

 <?php
  if ( empty($_GET['mpid']) ) {
    header("Location: metropanel.php?mpid=filename");
  }
 ?>

End Section 3.

 

 Section 4: MetroPanel Structure.

This section should be read along with the example files ( metropanel-left.php, … ) also contained in the download package.

This plugin need 6 main blocks to control all features.

 // The Main Panel
 <div id="metropanel">
  // Add main panel here. Please see the demo file for more detail.
 </div>

 // Expand button. This button will show when the main panel collapsed
 <div id="mp-expand">
  <div id="mp-expand-bt"></div>
 </div>

 // Submenu.
 <div id="mp-submenusholder">
  // Add submenu here. Please see the demo file for more detail.
 </div>

 // Content Zone. This is the place to display current content
 <div id="mp-contentholder">
  <?php
  include_once('content/'.$_GET['mpid'].".php");
  ?>
 </div>

 // Loading image. This image will show when content is loading
 <div id="mp-loading">
  <img src="images/loading.gif" alt="" />
 </div>

 // Content Station. This is the place to store content
 <div id="mp-contentStation">
  <div id="<?php echo $_GET['mpid']; ?>"></div>
 </div>

End Section 4.

 

Section 5: Parameters and Easing List.

Parameters:

Parameters Properties Description
mpPosition string This param is used to set the Main Panel Position.
Value: left, right
mpMainItemBg string This param is used to set the Main Panel Background.
Default: #016C38
mpSubmenuBg string This param is used to set the Submenu Background.
Default: #004D60
mpActiveItem string This param is used to set the style of active item.
Use color classes in CSS file.
Default: transparent-smoke.
mpHoverItem string This param is used to set the style of hovered item.
Use color classes in CSS file.
Default: transparent-black.
contentPosition string This param is used to set the content position.
Values: center, related
Default: center.
contentEffect string This param is used to set effects when content is loaded.
Values: fade, slideUp, slideDown, slideLeft, slideRight
Default: fade.
contentEffectDuration integer This param is used to set duration for effects.
Default: 400.
easingIn string This param is used to set the easing when a new content is loaded.
Default: easeInBack.
easingOut string This param is used to set the easing when the current content is removed.
Default: easeInBack.
mpState boolean This param is used to set initial state of the main panel ( Show or Hide ).
Values: 0 ( Hide ), 1 ( Show ).
MainListScrollBarStyle string This param is used to set the style of main panel scroll bar.
Use color classes in CSS file.
Default: transparent-smoke.
SubmenuScrollBarStyle string This param is used to set the style of submenu scroll bar.
Use color classes in CSS file.
Default: transparent-smoke.
MainItemDisplay integer This param is used to set number of items in main item list will be shown.
Default: 4.

 

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:

Tagged with:
 

Comments are closed.

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