jQuery EasyUI 创建 XP 风格左侧面板教程

jQuery EasyUI 布局教程：创建 XP 风格左侧面板

时间：2026-08-31 12:54

本教程介绍如何使用 jQuery EasyUI 的 Panel 插件创建类似 Windows XP 资源管理器的左侧任务面板。通过定义多个可折叠面板并自定义 CSS 样式，实现经典的 XP 风格界面效果。

在 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）和内边距，面板之间通过分隔。每个面板宽度固定为 200px，高度自适应内容。

自定义 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 微调对齐位置。