Navigation Bar Layout

API Doc

You are here : > > > >

Navigation Bar Layout

layout:{
    type : 'navbar'
}

Demo

SAMPLE

CODE

<div id="nav-bar-container" style="height:320px"></div>
<script type="text/javascript">

var w = new ludo.FramedView({
    renderTo:$('#nav-bar-container'),
    title:'Slide-In Layout',
    id:'nav-bar',
    layout:{
        type:'navbar',
        width:300, height:250
    },
    children:[
        // This view will be initially hidden and shown on demand
        { 
            id:'menu',
            elCss:{border:0, 'border-right': '1px solid #ddd'},
            layout: { width: 200, type:'menu', orientation:'vertical' }, 
            children:[
                { html: 'Menu Item 1' },{ html: 'Menu Item 2' },{ html: 'Menu Item 3' }
            ]
        },
        // This second and main child view
        { 
            css:{ padding: 5, 'font-size': '1.2em' },
            html: '<a href="#" onclick="ludo.get(\'nav-bar\').getLayout().toggle();return false">Click To toggle Menu</a>'
        }
    ]
});

</script>

In the Navigation Bar layout, you always have two child views. The first view is initially off screen to the left, while the second main view will span the entire viewport(parent view).

When the first view is shown, it will slide in from the left moving both child views:

ludo.get('<parent>').getLayout().show();

If you want to hide the view again, you can call

ludo.get('<parent>').getLayout().hide();

You may also use the toggle function. It will call the show method if the view is hidden and the hide method otherwise.

ludo.get('<parent>').getLayout().toggle();

Back to Linear Layout

Next: Relative Layout

Generated 2016-12-02 19:27:14