jPanel 1.2.1

jPanel by Deepu KS deepu.ks@tcs.com
Copyright (c) 2011 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.2.1 09.10.11

You've downloaded components and a theme that are compatible with jQuery 1.3+. Please make sure you are using jQuery 1.3+ 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.

For more details visit jPanel Site
Download
Plugin Home

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

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:

Simple panel with default settings.

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

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' });

Simple panel with cookie set to true and cookie expiry set to 2 days.

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

Simple panel with remote data loading.

Mark up
HTML:
<div title="Title" id="id" href="remoteSimple.html" >
content here....
</div> JS: $('#id').jPanel({ 'remoteDiv' : true });

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:
<div title="Title" id="id" href="remote.html" target="targetId" >
content here....
</div> JS: $('#id).jPanel({ 'remoteDiv' : true });

Panel with remote data loading. The content is loaded from a different source via ajax through POST and the specified form data are sent to the href url as data.
The ajaxTimeout option allows you to set time out in milliseconds for the request.

Mark up

HTML:
<div title="Title" id="id" href="remoteForms.html" formids="form1,form2" method="POST" >
content here....
</div> JS: $('#id').jPanel({ 'remoteDiv' : true, 'ajaxTimeout' : 50000 });