Welcome to jPanel 1.4.0
This page
demonstrates the various configurations of jPanel and its usage, any container element can be used to make a panel eg: DIV, FORM, SPAN, P etc.
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
Try out these themes using below switcher widget or define styles in the jPanel.css file.
This is a simple panel with default settings.
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.
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.
HTML:
<div title="Title" class="class" id="id" >
content here....
</div>
JS:
$('#id').jPanel({
'cookie' :true,
'cExpires' :2 //optional
});
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).
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)
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
});
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.
This is a simple panel formed from a DIV
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
});
This is a simple panel formed from a SPAN
LOREM IPSUM SIT AMET....
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
});
For more details visit
jPanel Site
Readme
Settings
Download
Plugin Home