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 Image:Themeroller_ready_white_200px.png
Try out these themes using below switcher widget or define styles in the jPanel.css file.

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.


This is a simple panel formed from a DIV

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

This is a simple panel formed from a SPAN

LOREM IPSUM SIT AMET....

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
	});
For more details visit jPanel Site
Readme
Settings
Download
Plugin Home