当前位置：首页 > news >正文

jQuery EasyUI 布局 - 创建 XP 风格左侧面板

news 2026/5/12 3:34:17

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>