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 SiteOption | 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 |
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 |
This is a simple panel with default settings.
This is a simple panel with fade effect and slow animation with easing set to 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.
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).
This is a panel with remote data loaded via ajax into a target, panel is set to Fieldset view with cookie and effects configured
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.