OpenPanel is a jQuery plugin that allows you to open panels at any where in your page, unlimited panels as you want and support for responsive design. With this small plugin you can open more space for your site to add anything you want.

OpenPanel - Open Responsive Panel AnyWhere

 

OpenPanel Features:

  • Open Panels Anywhere ( Include Panels in Panels ).
  • Unlimited Panels.
  • Support Responsive Design.
  • Auto Show one Panel.
  • Inline Content for SEO Purpose.
  • Support Ajax Content.
  • Four Moving Directions and Fade Effects.
  • Close all Panels by ESC key or buttons.

 

Demos:

 

Change Logs:

Oct 2013: Update version 1.2.1:

  • Fix “Background delay” bug.

26 Sep 2013: Update Version 1.2:

  • Add “autoPanel” param to set a panel show automatically when the page is loaded (like popup).
  • Add the loading image when a panel is loading.
  • Fix some litle bugs.

01 Mar 2013: Update Version 1.1:

  • Added the button and ESC key to Close all panels.
  • Update jQuery 1.9.1.

14 Nov 2012: First Version.

 

Credits:

This plugin is developed by SONHLAB.com  and used below third parties:

  • jQuery Library.
  • MouseWheel Plugin.
  • jScrollPane Plugin.

 

Table of Contents:

  1. Setup OpenPanel.
  2. Create Panels.
  3. Call OpenPanel Plugin.
  4. Parameters.

 

 

Section 1: Installing OpenPanel 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/sonhlab-base.css" type="text/css" />
<link rel="stylesheet" href="css/openpanel.css" type="text/css" />

For IE 8 and older we need:

<!-- IE 8 -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/sonhlab-fix-ie8.css" type="text/css" />
<![endif]-->

 

Add Viewport Meta:

<meta name="viewport" content="width=device-width, user-scalable=no" />

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

<!-- 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>
<!-- OpenPanel Plugin -->
<script type="text/javascript" src="js/openpanel.min.js"></script>

 

Done. OpenPanel Installation is completed and ready to use.

 

Section 2: Create Panels.

With Open Panel plugin you can use two methods to show panels ( Inline Content and AJAX content ).

If you use Inline Content Method you will need to create panel content in the showing page and place it in OpenPanel Station block ( <div id="op-station"></div> ).

If you use AJAX Content Method you will need to create new files to contain panel content and place them in “/content/openpanel” folder ( the file name MUST be same data-panelid value ).

Now we will start to create a sample panel.

First, we create a block and give it an id and and a class=”op-panel”:

<div id="panelname" class="op-panel[ background-class]">
  <div class='op-panelform'>
    <!-- Panel Content -->
  </div>
</div>

* You can find background classes in the “Background List” Section in “css/sonhlab-base.css” file.

 

Then we need to add a close button to close the panel.

Note: the close button must have “data-close value” (this is the current panel id.) and op-bt-close class.

<div id="panelname" class="op-panel">

  <!-- Control -->
  <div class="op-panelctrl">
    <!-- Close Button -->
    <div data-close='panelname' class="op-panelbt op-bt-close">
      <img src="images/arrow-left-48.png" alt="close" />
    </div>
    <!-- End Close button -->           
    <div class="clearspace"></div>
  </div>
  <!-- End Control -->

  <div class="op-panelform">
  <!-- Panel Content Here -->
  </div>

</div>

If you like you can add a close-all-panel button:

<div id="panelname" class="op-panel">

  <!-- Control -->
  <div class="op-panelctrl">
    <!-- Close Button -->
    <div data-close='panelname' class="op-panelbt op-bt-close">
      <img src="images/arrow-left-48.png" alt="close" />
    </div>
    <!-- End Close button -->       

    <!-- Close All -->
    <div class="op-panelbt op-bt-closeall">
      <img src="images/close-white-48a.png" alt="close all" />
    </div>
    <!-- End Close All -->

    <div class="clearspace"></div>

  </div>
  <!-- End Control -->

  <div class="op-panelform">
    <!-- Panel Content Here -->
  </div>

</div>

Finally, You can add any content into the panel. You can see the demo files in the downloaded package for more detail.

 

Section 3: Call OpenPanel Plugin.

Basic code to call the OpenPanel plugin:

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

To call the OpenPanel plugin with an auto panel and set file extension for AJAX files:

<script type="text/javascript">
$(window).load(function(){
  $('body').openpanel({
    autoPanel:'panel-ID',
    ext: 'php'
  });
});
</script>

 

Section 4: Parameters

 

Javascript Parameters:

Parameters Properties Description
ext string. This param is used to define AJAX file extension.
Value: php, html, …
autoPanel string. This param is used to set a panel will be opened automatically when the page is loaded.

 

HTML Parameters:

Parameters Properties Description
data-panelid string. This param is used to determine which panel will be opened.
data-pos string. This param is used to set display effect.
Value: top, left, right, bottom, none.
data-close string. This param is used to close panels.
Value: The current panel id.

 

 

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!

 

 

LEAVE A COMMENT
Tagged with:
 

Comments are closed.

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