jPanel 1.4.0

jPanel by Deepu KS deepu.ks@tcs.com, d4udts@gmail.com
Copyright (c) 2012 Deepu KS
Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
Version 1.4.0 26.03.2012

You've downloaded components and a theme that are compatible with jQuery 1.4+. Please make sure you are using jQuery 1.4 + in your production environment.

Styles from jQuery UI is applied by default download a jQuery UI theme or define styles in the jPanel.css file.
Any container element can be used to make a panel eg: DIV, FORM, SPAN etc.

This HTML file have the worst mark up you could see :P plz forgive me for that as this one is generated by a WYSIWYG editor :) saves a lot of time you know :D

For more details visit jPanel Site
Download
Plugin Home
Git Repo

Changelog:

v1.4.0:

v1.3.2:

v1.3.1:

v1.3.0:

v1.2.1:

v1.2.0:

v1.1.0:

v1.0.0:

Settings:

Options:

 Option  Type  Description     Values  Dependencies  Default
 effect
 String            Use specified values for animation effect while opening and closing the panel, use none to disable animation
 slide, fade or none  none  slide
 speed  String      Use to specify animation speed  slow, fast or medium
 effect must not be none
 medium
 easing  String  Use to specify animation easing  none,swing or linear  effect must not be none  none
 cookie  boolean  Enable to retain panel state using cookie, by default state is preserved over session, to extend over days use @option cExpires to provide no. of days or a date.
 Note: To use cookies every Div used for panels has to have a unique ID
 true or false  id attibute of the div used
 false
 cExpires
 Object
 Either an integer specifying the expiration date for cookies from now on in days or a Date object.
 If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
 If set to null or omitted, the cookie will be a session cookie and will not be retained when the the browser exits.
 Integer number or Date object
 cookie must be set to true
 null
 remoteDiv
 boolean  Enable to use ajax loading of content into the div from the specified href @attribute, if a target @attribute is set then data will be loaded there else data in the actual div will be overwritten.
 If a formids @attribute (multiple values separated by comma)is specified then the forms in the page with the id in formids will be serialized and sent as data in the ajax request.
 Note: The href @attribute is mandatory for ajax loading to work, provide action name in href, request will be sent as GET, both target @attribute and formids @attribute are optional.
 true or false
 href attribute must be set on the div used for panel
 false
 ajaxTimeout  number  Set to override the timeout for the ajax request
 time in milliseconds
 remoteDiv must be set to true  30000
 defaultView  String  Set to specify the default panel view
 panel or tab
 none  panel
 switchView  boolean  Enable to render a toggle button to switch between tab view and accordion view  true or false  none
 false
 retainView  boolean  Enable to retain panel view state(Tab or Accordion) using cookie, by default state is preserved over session, to extend over days use @option cExpires to provide no. of days or a date.
 Note: To use cookies every Div used for panels has to have a unique ID
 true or false  id attibute of the div used, cookie and switchView must be set to true
 false
 fieldSet  boolean  Enable or disable the fieldset view instead of accordion in panel view.
 Note: This property will not take effect if default view is set to 'tab' or if switch view is enabled.
 true or false  switchView must not be set and defaultView should be panel
 false
 ajaxCache  boolean  Enable or disable the cache of data loaded via ajax.
 Note: This property will take effect only when remoteDiv is set to true.
 true or false  remoteDiv must be set to true
 false
 defaultOpen  boolean  Enable or disable panel default to open in accordion/fieldset view
 Note: This does not have any effect on Tab view, Cookie settings will not work for accordion/fieldset view if this property is set to true.
 true or false  none
 false

Attributes:

 Attribute  Type  Description     Values  Dependencies  Default
 href/action
 String            Use href attibute to provide the url, page or action from where content has to fetched in remoteDiv mode.
Note: This attribute is mandatory for Remote content loading. href has precedence over action attribute
 action or url in same domain  remoteDiv must be set to true  none
 target  String      Use to specify a different target than the same Panel.
Note: If target is not specified the inner contents of the panel will be replaced by remote content.
 target element id where the remote content will be loaded
 remoteDiv must be set to true and href attribute must be set on the div used for panel  self
 formids  String  Use to specify which form data to be serialized and sent for remote data loading.
Note: All the data will be encoded and sent.
 comma separated id's of the forms to serialize  remoteDiv must be set to true and href attribute must be set on the div used for panel  none
 method  String  Use to specify a request method type for ajax.  GET or POST  remoteDiv must be set to true and href attribute must be set on the div used for panel  GET
 id
 String  The id for the panel, used as key for cookies.
 Note: It is mandatory for cookies to work.
 any string
none
 none
 title
 String  The Title to be rendered on the panel.
 any string
 none
 none

Usage:

This is a simple panel with default settings.

Mark up

HTML:
<div title="Title" class="class" > content here.... </div> JS:
$('.class').jPanel();

This is a simple panel with fade effect and slow animation with easing set to swing.

Mark up

HTML:
<div title="Title" class="class"> content here.... </div> JS:
$('.class').jPanel({ 'effect' : 'fade', 'speed' : 'slow', 'easing' : 'swing' });

This is a simple panel with cookie set to true and cookie expiry set to 2 days, refresh your browser to see the difference.

Mark up

HTML:
<div title="Title" class="class" id="id" > content here.... </div> JS: $('#id').jPanel({ 'cookie' :true, 'cExpires' :2 //optional });

Target for the following panel

Content here will be overriden with remote content

This is a panel with remote data loaded into a target. The content is loaded via ajax into the target specified (Target can be within or outside the actual panel).

Mark up

HTML:
<form title="Title" id="id" action="remote.html" target="targetId" > content here.... </form> JS: $('#id').jPanel({ 'remoteDiv' : true });

This is a panel with remote data loaded via ajax into a target, panel is set to Fieldset view with cookie and effects configured

Target for the Outer Panel, and also a nested panel with defaultOpen set to true (While using nested panels it is important to initialize the outer panel before the inner panel, i.e. The panels should be constructed from top down)

Mark up

HTML:
<div title="Outer Panel Title" id="outerId" action="remote.html" target="targetId" > some content here.... <div title="Inner Panel Title" id="innerId" > <div id="targetId" > content here.... </div> </div> </div> JS: (Please note that the panels has to initiated in the below order to work properly) $('#outerId').jPanel({ "fieldSet" : true, "effect" : "fade", "speed" : "slow", "remoteDiv" : true, "easing" : "swing", "cookie" : true, "cExpires" : 2 });
$('#innerId').jPanel({ "defaultOpen" : true });

Panels with switch view with Tab view as default wrapped inside another panel

To use the tab view make sure to have all the panel containers(div, span or form) one after the other with out any elements in between them and use a unique class as selector for all the panels to be grouped as tabs.


Mark up

HTML:
<div id="wrapperId" title="Wrapper Title"> some content here.... <div id="id1" title="Title" class="class" > content here.... </div> <span id="id2" title="Title" class="class" > content here.... <div title="Inner Panel Title" id="innerId" > Inner panel content here.... </div> </span> <form id="id3" title="Title" class="class" action="remoteFormsTab.html" method="POST" formids="demoform,testform"> content here.... </form> </div> JS: (Please note that the panels has to initiated in the below order to work properly) $('#wrapperId').jPanel({ "defaultOpen" : true });
$('.class').jPanel({ "ajaxTimeout" : 30000, "cookie" : true, "defaultView" : "tab", "remoteDiv" : true, "retainView" : true, "switchView" : true });
$('#innerId').jPanel({ "cookie" : true });