OpenPanel – Open Unlimited Responsive Panel Anywhere jQuery Plugin

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.

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

Section 4: Parameters

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.

That’s it. If you have any questions that are beyond the scope of this plugin, please feel free to open tickets in OpenPanel Support Zone. No guarantees, but I’ll do my best to assist you. Thanks so much!