jQuery EasyUI 布局 – 创建 XP 风格左侧面板
Windows XP 的资源管理器文件夹视图中，左侧面板通常包含“常见任务”（Common Tasks）、“文件和文件夹任务”（File and Folder Tasks）等可折叠的部分。本教程将展示如何使用 jQuery EasyUI 的 panel 组件创建类似 XP 风格的左侧面板：背景蓝色、多个可折叠的任务面板、链接式任务列表。
这种左侧面板常用于模拟经典 XP 界面，或作为后台系统的侧边栏辅助区。
官方教程参考：https://www.jeasyui.com/tutorial/layout/panel2.php
在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=Panel&pitem=XP+Style+Panel
步骤 1: 引入 EasyUI 资源
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建 XP 风格左侧面板
使用多个 easyui-panel，设置蓝色背景、可折叠（collapsible）、仅显示展开/折叠工具图标。
<div style="width:220px;height:auto;background:#7190E0;padding:5px;">
<!-- 图片任务面板 -->
<div class="easyui-panel" title="图片任务" collapsible="true" style="width:200px;height:auto;padding:10px;">
<a href="#">以幻灯片放映</a><br/>
<a href="#">在线订购冲印</a><br/>
<a href="#">打印图片</a><br/>
<a href="#">复制到光盘</a>
</div>
<br/>
<!-- 文件和文件夹任务面板 -->
<div class="easyui-panel" title="文件和文件夹任务" collapsible="true" style="width:200px;height:auto;padding:10px;">
<a href="#">新建文件夹</a><br/>
<a href="#">将此文件夹发布到 Web</a><br/>
<a href="#">共享此文件夹</a>
</div>
<br/>
<!-- 其他位置面板 -->
<div class="easyui-panel" title="其他位置" collapsible="true" collapsed="true" style="width:200px;height:auto;padding:10px;">
<a href="#">我的电脑</a><br/>
<a href="#">我的文档</a><br/>
<a href="#">共享文档</a><br/>
<a href="#">控制面板</a>
</div>
<br/>
<!-- 文件夹详情面板 -->
<div class="easyui-panel" title="文件夹详情" collapsible="true" collapsed="true" style="width:200px;height:auto;padding:10px;">
文件夹名称：图片收藏<br/>
文件夹类型：图片文件夹<br/>
位置：C:\Documents and Settings<br/>
文件夹大小：120 MB<br/>
创建时间：2025-12-01
</div>
</div>步骤 3: 自定义面板工具（仅显示展开/折叠箭头）
默认面板有多个工具图标，我们只需保留展开/折叠功能。
<script type="text/javascript">
$(function(){
// 为所有面板自定义工具，只显示 collapse-tool
$('.easyui-panel').panel({
tools: [{
iconCls:'icon-redo', // 向下箭头（展开）
handler:function(){}
}]
});
});
</script>步骤 4: 完整示例（嵌入 border layout 的 west 区域）
将 XP 风格左侧面板放入整体布局的左侧。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI XP 风格左侧面板</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<!-- 左侧 XP 风格面板 -->
<div data-options="region:'west',title:'XP 风格侧边栏',split:true" style="width:250px;padding:5px;">
<div style="background:#7190E0;">
<div class="easyui-panel" title="系统任务" collapsible="true" style="padding:10px;">
<a href="#">查看系统信息</a><br/>
<a href="#">添加/删除程序</a><br/>
<a href="#">更改设置</a>
</div>
<br/>
<div class="easyui-panel" title="其他位置" collapsible="true" collapsed="true" style="padding:10px;">
<a href="#">控制面板</a><br/>
<a href="#">网络连接</a><br/>
<a href="#">回收站</a>
</div>
<br/>
<div class="easyui-panel" title="详细信息" collapsible="true" collapsed="true" style="padding:10px;">
当前用户：Administrator<br/>
计算机名：MY-PC<br/>
系统类型：Windows XP
</div>
</div>
</div>
<!-- 主内容区 -->
<div data-options="region:'center',title:'主内容区'">
<div style="padding:20px;">
<h2>这是一个模拟 Windows XP 资源管理器的左侧面板示例</h2>
<p>左侧面板使用多个可折叠的 easyui-panel 实现，背景色 #7190E0 是经典 XP 蓝色。</p>
</div>
</div>
<script>
$(function(){
$('.easyui-panel').panel({
tools: [{
iconCls:'icon-redo',
handler:function(){}
}]
});
});
</script>
</body>
</html>关键说明
- XP 经典蓝色：外层 div 使用
background:#7190E0;（XP 任务栏蓝色）。 - 可折叠面板：
collapsible="true"，初始折叠用collapsed="true"。 - 任务链接：使用
<a href="#">模拟可点击任务。 - 工具自定义：只保留展开/折叠箭头，隐藏关闭、刷新等图标。
- 嵌入布局：适合作为 layout 的 west 区域，与主内容区结合。
效果
- 多个蓝色背景的可折叠任务组。
- 点击标题展开/折叠，内容为链接列表。
- 视觉上高度还原 Windows XP 资源管理器左侧面板。
更多示例：
- 官方 XP 风格面板：https://www.jeasyui.com/tutorial/layout/panel2.php
如果需要添加图标、动态加载任务、或结合 tree 菜单的更复杂 XP 风格侧边栏，请提供更多细节！
