CollapsePanel Demo
Introduction
This is a demonstration about the class UI_HTML_CollapsePanel.
It is based on the class UI_HTML_Panel - please see the Panel Demo for basic understanding!
A CollapsePanel is Panel, which can be collapsed by clicking on the panel header.
The content will be hidden and the CSS clases of the panels will change also.
R E M O T E
C O N T R O L
Demo 0 - Explained
This is the explained theme again (please the the Panel Demo).
Please note, that the has been added a line which builds the jQuery Plugin call.
You need to put out this JavaScript within your HTML code.
Panel Content, for example a list:
<![CDATA[
$panel = new UI_HTML_CollapsePanel();
$panel->setHeader( "Panel Heading" );
$panel->setAbstract( "Panel Abstract" );
$panel->setContent( "Panel Content, for example a list:<br/><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>" );
$panel->setFooter( "Footnote" );
$demo = $panel->build( "demo0", "explain demo" );
$script = $panel->createScript( "#demo0" );
]]>
<![CDATA[jQuery(document).ready(function(){
jQuery("#demo0").cmCollapsePanel([]).show();
});]]>
<![CDATA[/* -- PANEL -- */
.panel.explain {
}
.panel.explain .panelHead,
.panel.explain .panelAbstract,
.panel.explain .panelContent,
.panel.explain .panelFoot {
margin: 0em;
padding: 0em;
height: auto;
line-height: auto;
width: 100%;
}
.panel.explain .panelHead {
margin: 0em;
padding: 0em;
height: auto;
line-height: auto;
background-color: #BBFFBB;
border: 1px solid #44FF44;
}
.panel.explain .panelHead .panelHeadInner {
margin: 0.7em;
padding: 0.3em;
height: auto;
line-height: auto;
background: #DDFFDD;
border: 1px solid #77FF77;
font-size: 1.2em;
}
.panel.explain .panelAbstract {
margin: 0em;
padding: 0em;
height: auto;
line-height: auto;
background-color: #EEE;
border: 1px solid #DDD;
}
.panel.explain .panelAbstract .panelAbstractInner {
margin: 1em;
padding: 0.5em;
height: auto;
line-height: auto;
background: #F7F7F7;
border: 1px solid #E7E7E7;
font-size: 0.8em;
font-weight: lighter;
}
.panel.explain .panelContent {
margin: 0em;
padding: 0em;
height: auto;
line-height: auto;
background: #FFFFBB;
border: 1px solid #FFFF44;
}
.panel.explain .panelContent .panelContentInner{
margin: 0.8em;
padding: 0.4em;
height: auto;
line-height: auto;
background: #FFFFDD;
border: 1px solid #FFFF44;
}
.panel.explain .panelFoot {
margin: 0em;
padding: 0em;
height: auto;
line-height: auto;
background: #FFBBBB;
border: 1px solid #FF9999;
}
.panel.explain .panelFoot .panelFootInner {
margin: 1em;
padding: 0.5em;
height: auto;
line-height: auto;
background: #FFDDDD;
border: 1px solid #FF9999;
font-size: 0.8em;
font-weight: lighter;
}
/* -- COLLAPSE PANEL -- */
.panel.collapsable.explain {}
.panel.collapsable.explain .panelHead {
background-image:url(../img/bullet_toggle_minus.png);
background-repeat: no-repeat;
background-position: right top;
cursor: pointer;
}
.panel.collapsable.explain .panelContent {}
.panel.collapsable.explain .panelFoot {}
.panel.collapsable.explain.collapsed {
opacity: 0.75;
}
.panel.collapsable.explain.collapsed .panelHead {
background-image:url(../img/bullet_toggle_plus.png);
}
.panel.collapsable.explain.collapsed .panelContent {}
.panel.collapsable.explain.collapsed .panelFoot {}
]]>
Demo 1 - Default
This is the default theme again (please the the Panel Demo).
This is what it is about:
Panel Content, for example a list:
<![CDATA[
$panel = new UI_HTML_CollapsePanel();
$panel->setHeader( "Panel Heading" );
$panel->setAbstract( "This is what it is about:" );
$panel->setContent( "Panel Content, for example a list:<br/><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>" );
$panel->setFooter( "Footnote" );
$demo = $panel->build( "demo1", "default demo" );
$script = $panel->createScript( "#demo1" );
]]>
<![CDATA[jQuery(document).ready(function(){
jQuery("#demo1").cmCollapsePanel([]).show();
});]]>
<![CDATA[/* -- PANEL -- */
.panel.default {
background: #FFFFFF;
border: 1px solid #BFBFBF;
}
.panel.default .panelHead,
.panel.default .panelContent,
.panel.default .panelFoot {
width: 100%;
}
.panel.default .panelHead {
height: 2em;
line-height: 1.5em;
background-color: #DFDFDF;
border-bottom: 1px solid #CFCFCF;
}
.panel.default .panelHead .panelHeadInner {
padding-top: 3px;
padding-left: 10px;
font-size: 1.2em;
}
.panel.default .panelAbstract {
background-color: #EEEEEE;
border-bottom: 1px solid #DFDFDF;
}
.panel.default .panelAbstract .panelAbstractInner {
padding: 0px;
padding-left: 10px;
font-size: 0.8em;
font-weight: lighter;
font-style: italic;
color: gray;
}
.panel.default .panelContent {
background: #F7F7F7;
}
.panel.default .panelContent .panelContentInner{
padding: 10px;
}
.panel.default .panelFoot {
border-top: 1px solid #DFDFDF;
}
.panel.default .panelFoot .panelFootInner {
padding-top: 1px;
padding-left: 10px;
font-size: 0.8em;
font-weight: lighter;
}
/* -- COLLAPSE PANEL -- */
.panel.collapsable.default {}
.panel.collapsable.default .panelHead {
background-image:url(../img/bullet_toggle_minus.png);
background-repeat: no-repeat;
background-position: 4px 5px;
cursor: pointer;
}
.panel.collapsable.default .panelHead .panelHeadInner {
padding-left: 1.5em;
}
.panel.collapsable.default .panelContent {}
.panel.collapsable.default .panelFoot {}
.panel.collapsable.default.collapsed {
opacity: 0.75;
}
.panel.collapsable.default.collapsed .panelHead {
background-image:url(../img/bullet_toggle_plus.png);
}
.panel.collapsable.default.collapsed .panelContent {
}
.panel.collapsable.default.collapsed .panelFoot {
border-top: 0px;
}
]]>
Demo 3 - Apple
This is the Apple theme again (please the the Panel Demo).
<![CDATA[
$panel = new UI_HTML_CollapsePanel();
$panel->setHeader( "Heading" );
$panel->setContent( "Content" );
$panel->setFooter( " " );
$demo = $panel->build( "demo3", "apple demo" );
$script = $panel->createScript( "#demo3" );
]]>
<![CDATA[jQuery(document).ready(function(){
jQuery("#demo3").cmCollapsePanel([]).show();
});]]>
<![CDATA[/* -- PANEL -- */
.panel.apple {
margin-top: 1em;
margin-bottom: 1.5em;
}
.panel.apple .panelHead,
.panel.apple .panelFoot,
.panel.apple .panelHead .panelHeadInner,
.panel.apple .panelFoot .panelFootInner {
background-image:url(../img/back_1.png);
background-repeat: no-repeat;
}
.panel.apple .panelHead,
.panel.apple .panelFoot {
margin-right: 5px;
}
.panel.apple .panelHead .panelHeadInner,
.panel.apple .panelFoot .panelFootInner {
margin-left: 5px;
margin-right: -5px;
padding-left: 5px;
padding-right: 5px;
}
.panel.apple .panelHead {
height: 33px;
}
.panel.apple .panelHead .panelHeadInner {
background-position: right top;
padding-top: 6px;
padding-bottom: 4px;
color: #FFF;
font-size: 1.4em;
}
.panel.apple .panelContent {
border: 1px solid gray;
border-top: 0px;
border-bottom: 0px;
margin-left: 1px;
margin-right: 1px;
}
.panel.apple .panelContent .panelContentInner{
padding: 6px 8px 10px 8px;
background: #EEE;
}
.panel.apple .panelFoot {
background-position: left -33px;
}
.panel.apple .panelFoot .panelFootInner {
background-position: right -33px;
padding-top: 0.5em;
padding-left: 5px;
font-style: italic;
font-size: 0.9em;
}
.panel.apple:hover .panelHead,
.panel.apple:hover .panelHead .panelHeadInner,
.panel.apple:hover .panelFoot,
.panel.apple:hover .panelFoot .panelFootInner{
background-image:url(../img/back_2.png);
}
/* -- COLLAPSE PANEL -- */
.panel.collapsable.apple .panelHead,
.panel.collapsable.apple .panelFoot,
.panel.collapsable.apple .panelHead .panelHeadInner,
.panel.collapsable.apple .panelFoot .panelFootInner {
background-image:url(../img/back_2_signed.png);
background-repeat: no-repeat;
}
.panel.collapsable.apple.collapsed .panelHead,
.panel.collapsable.apple.collapsed .panelFoot,
.panel.collapsable.apple.collapsed .panelHead .panelHeadInner,
.panel.collapsable.apple.collapsed .panelFoot .panelFootInner {
background-image:url(../img/back_1_signed.png);
}
]]>
Demo 4 - Table Sorter
Here is another example with images taken from lenovo.com.
The images used are taken from jQuery plugin tablesorter.
Panel Content, for example a list:
<![CDATA[
$panel = new UI_HTML_CollapsePanel();
$panel->setHeader( "Heading" );
$panel->setAbstract( "Abstract" );
$panel->setContent( "Panel Content, for example a list:<br/><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>" );
//$panel->setFooter( "Footnote" );
$demo = $panel->build( "demo4", "sorter demo" );
$script = $panel->createScript( "#demo4" );
]]>
<![CDATA[jQuery(document).ready(function(){
jQuery("#demo4").cmCollapsePanel([]).show();
});]]>
<![CDATA[/* -- PANEL -- */
.panel.sorter {
border: 1px solid gray;
}
.panel.sorter .panelHead,
.panel.sorter .panelAbstract,
.panel.sorter .panelContent,
.panel.sorter .panelFoot {
width: 100%;
}
.panel.sorter .panelHead {
background-image: url(../img/bg.png);
background-repeat: repeat-x;
height: 33px;
}
.panel.sorter .panelHead .panelHeadInner {
height: 33px;
padding-top: 5px;
padding-left: 1em;
color: black;
font-weight: bold;
font-size: 1.1em;
outline: none;
}
.panel.sorter .panelAbstract {
background-color: #F7F7F7;
}
.panel.sorter .panelAbstract .panelAbstractInner {
padding: 0.1em 1em;
font-size: 0.8em;
font-weight: lighter;
font-style: italic;
color: gray;
}
.panel.sorter .panelContent {
height: 200px;
}
.panel.sorter .panelContent .panelContentInner{
padding: 1em;
}
.panel.sorter .panelFoot {
border-top: 1px solid #EEEEEE;
background-color: #F7F7F7;
}
.panel.sorter .panelFoot .panelFootInner {
padding: 0.1em 1em;
font-size: 0.8em;
font-weight: lighter;
}
/* -- COLLAPSE PANEL -- */
.panel.collapsable.sorter {}
.panel.collapsable.sorter .panelHead {
cursor: pointer;
}
.panel.collapsable.sorter .panelHead .panelHeadInner{
background-image: url(../img/header-desc.png);
background-repeat: no-repeat;
background-position: left top;
padding-left: 2.1em;
}
.panel.collapsable.sorter .panelContent {}
.panel.collapsable.sorter .panelFoot {}
.panel.collapsable.sorter.collapsed {
}
.panel.collapsable.sorter.collapsed .panelHead {}
.panel.collapsable.sorter.collapsed .panelHead .panelHeadInner{
background-image: url(../img/header-asc.png);
}
.panel.collapsable.sorter.collapsed .panelContent {}
.panel.collapsable.sorter.collapsed .panelFoot {}
]]>
Demo 5 - Lenovo
Here is another example with images taken from lenovo.com.
The images used are property of Lenovo.
Panel Content, for example a list:
<![CDATA[
$panel = new UI_HTML_CollapsePanel();
$panel->setHeader( "Heading" );
$panel->setContent( "Panel Content, for example a list:<br/><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>" );
$panel->setFooter( "Footnote" );
$demo = $panel->build( "demo5", "lenovo demo" );
$script = $panel->createScript( "#demo5" );
]]>
<![CDATA[jQuery(document).ready(function(){
jQuery("#demo5").cmCollapsePanel([]).show();
});]]>
<![CDATA[/* -- PANEL -- */
.panel.lenovo {
}
.panel.lenovo .panelHead,
.panel.lenovo .panelContent,
.panel.lenovo .panelFoot {
width: 100%;
}
.panel.lenovo .panelHead {
background-image: url(../img/CategoryBar.gif);
background-repeat: repeat-x;
height: 24px;
}
.panel.lenovo .panelHead .panelHeadInner {
height: 24px;
padding-top: 2px;
padding-left: 1em;
color: white;
font-weight: bold;
font-size: 1.1em;
outline: none;
}
.panel.lenovo .panelContent {
background-image: url(../img/section-gradient.gif);
background-repeat: repeat-x;
height: 200px;
}
.panel.lenovo .panelContent .panelContentInner{
padding: 1em;
}
.panel.lenovo .panelFoot {
border-top: 1px solid #EEEEEE;
}
.panel.lenovo .panelFoot .panelFootInner {
padding: 0.1em 1em;
font-size: 0.8em;
font-weight: lighter;
}
/* -- COLLAPSE PANEL -- */
.panel.collapsable.lenovo {}
.panel.collapsable.lenovo .panelHead {
cursor: pointer;
}
.panel.collapsable.lenovo .panelHead .panelHeadInner{
background-image: url(../img/caption-collapse.gif);
background-repeat: no-repeat;
background-position: left top;
padding-left: 1.8em;
}
.panel.collapsable.lenovo .panelContent {}
.panel.collapsable.lenovo .panelFoot {}
.panel.collapsable.lenovo.collapsed {
}
.panel.collapsable.lenovo.collapsed .panelHead {}
.panel.collapsable.lenovo.collapsed .panelHead .panelHeadInner{
background-image: url(../img/caption-expand.gif);
}
.panel.collapsable.lenovo.collapsed .panelContent {}
.panel.collapsable.lenovo.collapsed .panelFoot {}
]]>