在 Windows XP 资源管理器中，左侧面板常用于展示常见任务。本文演示如何利用 jQuery EasyUI 的 Panel 插件快速构建此类界面，并通过自定义 CSS 调整头部背景与折叠图标，还原经典 XP 风格。
定义可折叠面板结构
使用 EasyUI 的 Panel 插件，可以通过简单的 HTML 标记创建多个可折叠面板。每个面板需设置 collapsible="true" 以启用折叠/展开功能，并通过 collapsed="true" 控制初始状态。
以下代码展示了四个任务面板的布局结构，包含“Picture Tasks”、“File and Folder Tasks”、“Other Places”和“Details”：
View as a slide show
Order prints online
Print pictures
Make a new folder
Publish this folder to the Web
Share this folder
New York
My Pictures
My Computer
My Network Places
My documents
File folder
Date modified: Oct.3rd 2010
外层容器设置了浅蓝色背景（#7190E0）和内边距，面板之间通过
自定义 CSS 实现 XP 风格
默认渲染的面板样式与 XP 风格存在差异，需通过覆盖 EasyUI 的默认 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;
}.panel-body 设置面板内容区为浅灰色背景；.panel-header 使用白色背景配合右上角渐变图片模拟 XP 标题栏；.panel-tool-collapse 和 .panel-tool-expand 分别替换折叠与展开状态的箭头图标，通过 background-position 微调对齐位置。
下载完整实例
完整项目代码已打包为 jeasyui-layout-xp.zip，包含 HTML 结构、CSS 样式及所需图片资源，可直接解压后在浏览器中运行查看效果。
