Accordion Layout

API Doc
Demo

You are here : > > > >

Accordion Layout

layout: { type: 'accordion' }

Demo

SAMPLE

CODE

<!-- The view will be rendered to the div below -->
<div id="accordion-container" style="width:300px;height:400px;margin:10"></div>
<script type="text/javascript">
var w = new ludo.FramedView({
        renderTo:$('#accordion-container'),
        title:'Accordion Sample',
        layout:{
            height:'100%',
            type:'accordion', // Render children in an accordion
            easing: 'swing', // easing for the animation. linear and swing are available. More can be found in jQuery plugins
            duration: 300 // 0.3s duration for the animations
        },
        children:[ // Children for the accordion listed below
            {
                title: 'First Accordion View',
                css:{
                    padding:5,
                    'font-size' : '1.2em'
                },
                html:'First Accordion View'
            },
            {
                title: 'Click To show second View', // Title for the accordion
                html: 'HTML Of second accordion',
                css:{ // CSS styling for the view
                    padding:5,
                    'font-size' : '1.2em',
                    'overflow-y': 'auto'
                }
            }
        ]
    });
</script>

The Accordion layout

The Accordion Layout displays child Views in an Accordion where you show child views by clicking on the titles.

To render child views in an accordion, set layout.type to "accordion" for the parent view.

var v = new ludo.View({
    layout: { 
        type:'accordion'
        ...

     },
     children:[ {...}, {...} ]
    ...
    ...
}

Set visible accordion view

By default, the first child view is shown. You can override this by using the layout.selected property on a child view:

layout: {
    type:'accordion'
},
children:[
    { title: "Title of 1st accordion", html : "Content 1" },
    { title: "Selected", html : "Content 2", layout: { selected: true },
    { type:"calendar.TimePicker", title: "Title of 2nd accordion"  }
]

Initially hidden child views

Child views where the hidden property is set to false

{ title:"Accordion View", hidden:true ... }

will not be displayed in the accordion.

If you want to show hidden child views during runtime, call

ludo.get('<id of child>').show();

Example

SAMPLE

CODE

<div id="accordion-container2" style="width:250px;height:400px;margin:10"></div>
<script type="text/javascript">
var w = new ludo.FramedView({
        renderTo:$('#accordion-container2'),
        title:'Accordion Sample',
        layout:{
            height:'100%',
            type:'accordion', // Render children in an accordion
            easing: 'swing', // easing for the animation. linear and swing are available. More can be found in jQuery plugins
            duration: 300 // 0.3s duration for the animations
        },
        children:[ // Children for the accordion listed below
            {
                title: 'First',
                css:{
                    padding:5,
                    'font-size' : '1.2em'
                },
                html: "There are three child views in this accordion, one is hidden<br><br>Call <a href='#' onclick=\"ludo.get('hiddenView').show();return false\">ludo.get('hiddenView').show()</a>"
            },
            {
                title: 'Click Me', // Title for the accordion
                html: 'HTML Of second accordion',
                css:{ // CSS styling for the view
                    padding:5,
                    'font-size' : '1.2em',
                    'overflow-y': 'auto'
                }
            },
            { 
                id:"hiddenView",
                hidden:true,
                title: "Initially hidden",
                html: "Hidden View",
                css:{
                    padding:5,
                    'font-size' : '1.2em'
                }
            }
        ]
    });
</script>

Next: Table Layout

Generated 2016-12-02 19:27:13