.panel-body{background:#f0f0f0;} .panel-header{background:#fff url('') no-repeat top right;} .panel-tool-collapse{background:url('') no-repeat 0px -3px;} .panel-tool-expand{background:url('') no-repeat 0px -3px;}

jQuery EasyUI Layout - Create XP-style Left Panel

Typically, in the Windows XP Explorer folder, the left panel contains some common tasks. This tutorial shows you how to create an XP-style left panel using the easyui panel plugin.

Define Some Panels

We define some panels to display tasks. Each panel should have at least a collapse/expand tool button.

The code is as follows:

Customize the Panel's Appearance

Please note that this view appearance is not what we want. We must change the panel header background image and the icon of the collapse/expand button.

It's not difficult to do this. All we need to do is redefine some CSS.

.panel-body{background:#f0f0f0;}
.panel-header{background:#fff url('images/panel_header_bg.gif') no-repeat top right;}
.panel-tool-collapse{background:url('images/arrow_up.gif') no-repeat 0px -3px;}
.panel-tool-expand{background:url('images/arrow_down.gif') no-repeat 0px -3px;}

As you can see, using easyui to define the user interface is very simple.

Download jQuery EasyUI Example

jeasyui-layout-xp.zip