Sidebar: Overview | JavaScript UI

Sidebar Overview

The w2sidebar object allows you to create sidebar controls and side panel controls. The sidebar control can have any level of nestedness and will render nodes on demand. If it is used as a side panel control it can have groups.

Example

Below is a simple example how to use the sidebar control. It shows the minimum HTML and JavaScript you need to render the sidebar.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css"
        href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
    <div id="mySidebar" style="height: 450px; width: 170px"></div>
</body>
<script type="module">
import { w2sidebar } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
let sidebar = new w2sidebar({
    name: 'mySidebar',
    nodes: [
        { id: 'level-1', text: 'Level 1', icon: 'w2ui-icon-search', expanded: true,
            nodes: [
                { id: 'level-1-1', text: 'Level 1.1', icon: 'w2ui-icon-info' },
                { id: 'level-1-2', text: 'Level 1.2', icon: 'w2ui-icon-info' },
                { id: 'level-1-3', text: 'Level 1.3', icon: 'w2ui-icon-info' }
                ]
        },
        { id: 'level-2', text: 'Level 2', icon: 'w2ui-icon-search',
            nodes: [
                { id: 'level-2-1', text: 'Level 2.1', icon: 'w2ui-icon-search',
                    nodes: [
                        { id: 'level-2-1-1', text: 'Level 2.1.1', icon: 'w2ui-icon-info' },
                        { id: 'level-2-1-2', text: 'Level 2.1.2', icon: 'w2ui-icon-info' },
                        { id: 'level-2-1-3', text: 'Level 2.1.3', icon: 'w2ui-icon-info' }
                        ]
                    },
                { id: 'level-2-2', text: 'Level 2.2', icon: 'w2ui-icon-info' },
                { id: 'level-2-3', text: 'Level 2.3', icon: 'w2ui-icon-info' }
            ]
        },
        { id: 'level-3', text: 'Level 3', icon: 'w2ui-icon-search',
            nodes: [
                { id: 'level-3-1', text: 'Level 3.1', icon: 'w2ui-icon-info' },
                { id: 'level-3-2', text: 'Level 3.2', icon: 'w2ui-icon-info' },
                { id: 'level-3-3', text: 'Level 3.3', icon: 'w2ui-icon-info' }
            ]
        }
    ],
    onClick(event) {
        console.log(event.target)
    }
})
sidebar.render('#mySidebar')
</script>
</html>

​x
 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css"
        href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
    <div id="mySidebar" style="height: 450px; width: 170px"></div>
</body>
<script type="module">
import { w2sidebar } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
let sidebar = new w2sidebar({
    name: 'mySidebar',
    nodes: [
        { id: 'level-1', text: 'Level 1', icon: 'w2ui-icon-search', expanded: true,
            nodes: [
                { id: 'level-1-1', text: 'Level 1.1', icon: 'w2ui-icon-info' },
                { id: 'level-1-2', text: 'Level 1.2', icon: 'w2ui-icon-info' },
                { id: 'level-1-3', text: 'Level 1.3', icon: 'w2ui-icon-info' }
                ]
        },
        { id: 'level-2', text: 'Level 2', icon: 'w2ui-icon-search',
            nodes: [
                { id: 'level-2-1', text: 'Level 2.1', icon: 'w2ui-icon-search',
                    nodes: [
                        { id: 'level-2-1-1', text: 'Level 2.1.1', icon: 'w2ui-icon-info' },
                        { id: 'level-2-1-2', text: 'Level 2.1.2', icon: 'w2ui-icon-info' },
                        { id: 'level-2-1-3', text: 'Level 2.1.3', icon: 'w2ui-icon-info' }
                        ]
                    },
                { id: 'level-2-2', text: 'Level 2.2', icon: 'w2ui-icon-info' },
                { id: 'level-2-3', text: 'Level 2.3', icon: 'w2ui-icon-info' }
            ]
        },
        { id: 'level-3', text: 'Level 3', icon: 'w2ui-icon-search',
            nodes: [
                { id: 'level-3-1', text: 'Level 3.1', icon: 'w2ui-icon-info' },
                { id: 'level-3-2', text: 'Level 3.2', icon: 'w2ui-icon-info' },
                { id: 'level-3-3', text: 'Level 3.3', icon: 'w2ui-icon-info' }
            ]
        }
    ],
    onClick(event) {
        console.log(event.target)
    }
})
sidebar.render('#mySidebar')
</script>
</html>
​

HTML

xxxxxxxxxx
 
    <div id="sidebar" style="height: 450px"></div>
​

Java Script

$('#sidebar').w2sidebar({
name: 'sidebar',
img: null,
nodes: [
{ id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true,
nodes: [ { id: 'level-1-1', text: 'Level 1.1', img: 'icon-page' },
       { id: 'level-1-2', text: 'Level 1.2', img: 'icon-page' },
       { id: 'level-1-3', text: 'Level 1.3', img: 'icon-page' }
     ]
},
{ id: 'level-2', text: 'Level 2', img: 'icon-folder',
nodes: [ { id: 'level-2-1', text: 'Level 2.1', img: 'icon-folder',
         nodes: [
           { id: 'level-2-1-1', text: 'Level 2.1.1', img: 'icon-page' },
           { id: 'level-2-1-2', text: 'Level 2.1.2', img: 'icon-page' },
           { id: 'level-2-1-3', text: 'Level 2.1.3', img: 'icon-page' }
     ]},
       { id: 'level-2-2', text: 'Level 2.2', img: 'icon-page' },
       { id: 'level-2-3', text: 'Level 2.3', img: 'icon-page' }
     ]
},
{ id: 'level-3', text: 'Level 3', img: 'icon-folder',
nodes: [ { id: 'level-3-1', text: 'Level 3.1', img: 'icon-page' },
       { id: 'level-3-2', text: 'Level 3.2', img: 'icon-page' },
       { id: 'level-3-3', text: 'Level 3.3', img: 'icon-page' }
     ]
}
],
onClick: function (id, data) {
console.log(id);
}
});

xxxxxxxxxx
 
$('#sidebar').w2sidebar({
name: 'sidebar',
img: null,
nodes: [
{ id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true,
nodes: [ { id: 'level-1-1', text: 'Level 1.1', img: 'icon-page' },
       { id: 'level-1-2', text: 'Level 1.2', img: 'icon-page' },
       { id: 'level-1-3', text: 'Level 1.3', img: 'icon-page' }
     ]
},
{ id: 'level-2', text: 'Level 2', img: 'icon-folder',
nodes: [ { id: 'level-2-1', text: 'Level 2.1', img: 'icon-folder',
         nodes: [
           { id: 'level-2-1-1', text: 'Level 2.1.1', img: 'icon-page' },
           { id: 'level-2-1-2', text: 'Level 2.1.2', img: 'icon-page' },
           { id: 'level-2-1-3', text: 'Level 2.1.3', img: 'icon-page' }
     ]},
       { id: 'level-2-2', text: 'Level 2.2', img: 'icon-page' },
       { id: 'level-2-3', text: 'Level 2.3', img: 'icon-page' }
     ]
},
{ id: 'level-3', text: 'Level 3', img: 'icon-folder',
nodes: [ { id: 'level-3-1', text: 'Level 3.1', img: 'icon-page' },
       { id: 'level-3-2', text: 'Level 3.2', img: 'icon-page' },
       { id: 'level-3-3', text: 'Level 3.3', img: 'icon-page' }
     ]
}
],
onClick: function (id, data) {
console.log(id);
}
});
​