jQuery Plugins Plugins 

OpenPanel – Open Unlimited Responsive Panel Anywhere jQuery Plugin

SONHLAB , , , , , , , , ,

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.

 

Buy Now

 

 

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:

Nov 2015 – Version 2.2:

  • Add a new Javascript param (animSpeed) to control animation speed.
  • Disable CloseAll button when there is only one panel be active.
  • Change Panel Control Bar to fixed position at the top.

22 Oct 2014 – Update version 2.1:

  • Fix bugs that made panels did not display at the top in some cases.
  • Improve AJAX load method.

20 Apr 2014: Update version 2.0:

  • Improve AJAX load method.
  • Improve Panel Scrolling.
  • Optimize source code.

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.

 

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

<!-- mousewheel plugin -->
<script type="text/javascript" src="js/mousewheel/jquery.mousewheel.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 OpenPanel 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 displaying page and place it in OpenPanel Station block ( <div id="op-station"></div> ).

If you use AJAX Method to load content you will need to create new files to contain panel content and place them in “/content/openpanel” folder. There are two ways to create AJAX content: Dynamic and Static content.

If you use AJAX Dynamic content you can create panel content in the “ajaxstation.php” file in the “/content/openpanel” folder and use “If else” statement to control contents. If you like to use Static content you need to add “data-ext” for the button to set file extension and create new files (with filenames are “data-panelid” values) in the “/content/openpanel” folder.

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.
enableKeys boolean. This param is used to enable/disable ESC key to close all panels.
Value: true/false.
animSpeed integer. This param is used to set animation speed for panels.
Default: 400.

 

HTML Parameters:

Parameters Positions Description
data-panelid op-tab This param is used to determine which panel will be opened.
data-pos op-tab This param is used to set display effect.
Value: top, left, right, bottom, none.
data-ext op-tab This param is used to set AJAX file extension. It will override “ext” Javascript param.
Value: php/html/…
data-close op-bt-close This param is used to close the current panel.
Value: The current panel id.

 

 

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