Documentation

1 Getting Started
2 Design Overview
3 Page Controller Boot Process
4 Your First App
5 Page Controller
6 Modules
7 Components
8 jqcEmpty
9 jqcLabel
10 jqcButton
11 jqcLayer
12 jqcPanelDeck
13 jqcAccordion
14 jqcProgressBar
15 Data Binding & Remote Data Synchronization
16 jqcDataService
17 jqcDataModel
18 jqcViewModel
19 jqcList
20 jqcTable
21 jqcForm
22 jqcResponsiveLayoutManager
23 jqcTreeList
24 Demos

jqcPanelDeck


This document matches version 1.6.0 .

The jqcPanelDeck component is used to group together a set of panels (<div> elements) and only show one of the panels at a time. The jqcPanelDeck can thus be used to implement tabbed panes, image slideshows and other similar GUI components.

jqcPanelDeck Example

Here is an example that shows how to use create the HTML needed for the jqcPanelDeck, as well as the use of the show(panelId) and showNext() functions:

<button id="one"   >Panel 1</button>
<button id="two"   >Panel 2</button>
<button id="three" >Panel 3</button>
<button id="next"  >Show Next</button>


<div id="myPanelDeck" jqc-type="jqcPanelDeck" 
         jqc-show="panel2" style="border: 1px solid #cccccc;">

    <div jqc-panel-id="panel1" >
        Panel 1 <br/>
        Panel 1 <br/>
        Panel 1 <br/>
    </div>

    <div jqc-panel-id="panel2" >
        Panel 2 <br/>
        Panel 2 <br/>
        Panel 2 <br/>
    </div>

    <div jqc-panel-id="panel3" >
        Panel 3 <br/>
        Panel 3 <br/>
        Panel 3 <br/>
    </div>
</div>
    
<span jqc-module="myModule"></span>
<script>
function myModule () {
    var module = {};
    
    module.postConfigure = function() {
        var components =  module.jqc.pageController.components;
        
        $("#one").click(function() {
            components.myPanelDeck.show('panel1');        
        });
        $("#two").click(function() {
            components.myPanelDeck.show('panel2');        
        });
        $("#three").click(function() {
            components.myPanelDeck.show('panel3');        
        });
        $("#next").click(function() {
            components.myPanelDeck.showNext();        
        });
    }
    
    return module;
}    
</script>

This example creates a jqcPanelDeck with 3 panels inside. The panel deck is represented by a div element. Each panel inside the panel deck is represented by a div element too.

Each panel is given an id using the jqc-panel-id attribute. The value of this attribute can be used with the show() function. If you do not give a nested div an id via the jqc-panel-id attribute, the jqcPanelDeck will not interpret it as a panel.

Notice the 4 buttons at the beginning of the example. They all have a click handler set in the postConfigure() boot phase function of the myModule module. The click handlers of the first 3 buttons will show a specific panel. The click handler of the last button will show the next panel in the sequence. Clicking this button multiple times will make the panel deck cycle through the panels, just like an image slider.

If you combine the jqcPanelDeck with a timer you can create an automatically cycling image slide show.

Attributes

The jqcPanelDeck contains the following attributes which you can apply to the div wrapping the panels:

AttributeDescription
jqc-show Sets the id of the panel to show when the panel deck is first rendered. The panel id should be equal to the jqc-panel-id attribute value of the panel (div) to show.

Functions

The jqcPanelDeck component contains the following functions:

FunctionDescription
show(panelId) Shows the panel with the given panelId. The panelId should be equal to the jqc-panel-id attribute value of the panel (div) to show.
showNext() Shows the next panel in the panel sequence.