Create XP style left panel

Tutorial » Create XP style left panel

Normally, Explorer folders in Windows XP has left panel that contains common tasks. This tutorial show you how to create the XP left panel with panel plugin of easyui.

Define several panels

We defines several panels to show some tasks, each panel should has only collapse/expand tool button.

The code looks just like this:

Custom appearance effect of panel

Notice that the view appearance effect is not what we want, we must change the header background image of panel and the collapse/expand button icon.

It's not difficult to do this, What we should do is to redefine some CSS.

As you can see, it's very easy while using easyui to define user-interface.

Download the EasyUI example:

easyui-panel-demo.zip