jQuery Plugins Plugins 

MetroPanel jQuery Plugin Documentation

SONHLAB , , , , , ,

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.

 

Buy Now

 

 

Demos:

MetroPanel Demo

 

 

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.

 

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

 

 

More Plugins with Metro UI: