【Electron教程】第1节 Electron 简介与环境搭建 - 教程
2025/12/17 14:52:08
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 资源
<linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建 XP 风格左侧面板
使用多个easyui-panel，设置蓝色背景、可折叠（collapsible）、仅显示展开/折叠工具图标。
<divstyle="width:220px;height:auto;background:#7190E0;padding:5px;"><!-- 图片任务面板 --><divclass="easyui-panel"title="图片任务"collapsible="true"style="width:200px;height:auto;padding:10px;"><ahref="#">以幻灯片放映</a><br/><ahref="#">在线订购冲印</a><br/><ahref="#">打印图片</a><br/><ahref="#">复制到光盘</a></div><br/><!-- 文件和文件夹任务面板 --><divclass="easyui-panel"title="文件和文件夹任务"collapsible="true"style="width:200px;height:auto;padding:10px;"><ahref="#">新建文件夹</a><br/><ahref="#">将此文件夹发布到 Web</a><br/><ahref="#">共享此文件夹</a></div><br/><!-- 其他位置面板 --><divclass="easyui-panel"title="其他位置"collapsible="true"collapsed="true"style="width:200px;height:auto;padding:10px;"><ahref="#">我的电脑</a><br/><ahref="#">我的文档</a><br/><ahref="#">共享文档</a><br/><ahref="#">控制面板</a></div><br/><!-- 文件夹详情面板 --><divclass="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: 自定义面板工具（仅显示展开/折叠箭头）
默认面板有多个工具图标，我们只需保留展开/折叠功能。
<scripttype="text/javascript">$(function(){// 为所有面板自定义工具，只显示 collapse-tool$('.easyui-panel').panel({tools:[{iconCls:'icon-redo',// 向下箭头（展开）handler:function(){}}]});});</script>步骤 4: 完整示例（嵌入 border layout 的 west 区域）
将 XP 风格左侧面板放入整体布局的左侧。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>jQuery EasyUI XP 风格左侧面板</title><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><bodyclass="easyui-layout"><!-- 左侧 XP 风格面板 --><divdata-options="region:'west',title:'XP 风格侧边栏',split:true"style="width:250px;padding:5px;"><divstyle="background:#7190E0;"><divclass="easyui-panel"title="系统任务"collapsible="true"style="padding:10px;"><ahref="#">查看系统信息</a><br/><ahref="#">添加/删除程序</a><br/><ahref="#">更改设置</a></div><br/><divclass="easyui-panel"title="其他位置"collapsible="true"collapsed="true"style="padding:10px;"><ahref="#">控制面板</a><br/><ahref="#">网络连接</a><br/><ahref="#">回收站</a></div><br/><divclass="easyui-panel"title="详细信息"collapsible="true"collapsed="true"style="padding:10px;">当前用户：Administrator<br/>计算机名：MY-PC<br/>系统类型：Windows XP</div></div></div><!-- 主内容区 --><divdata-options="region:'center',title:'主内容区'"><divstyle="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 风格侧边栏，请提供更多细节！