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="http://w2ui.com/src/w2ui-1.5.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>
<body>
    <div id="mySidebar" style="height: 450px; width: 250px;"></div>
</body>
<script>
$(function () {
    $('#mySidebar').w2sidebar({
        name  : 'mySidebar',
        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 (event) {
            console.log(event.target);
        }
    });
});
</script>
</html>

​x
 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>
<body>
    <div id="mySidebar" style="height: 450px; width: 250px;"></div>
</body>
<script>
$(function () {
    $('#mySidebar').w2sidebar({
        name  : 'mySidebar',
        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 (event) {
            console.log(event.target);
        }
    });
});
</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);
}
});
​