jQuery EasyUI 布局 - 創建 XP 風格左側面板 · W3School jQuery UI 教程

# jQuery EasyUI 布局 - 創建 XP 風格左側面板通常情況下，在 Windows XP 的資源管理器文件夾中，左側的面板（panel）包含一些常見任務。本教程向您展示如何通過 easyui 的面板（panel）插件來創建 XP 左側面板。 ![](https://box.kancloud.cn/2015-12-18_56738683f3f6a.png) #### 定義一些面板（panel）我們定義一些面板（panel），這些面板（panel）用來顯示一些任務。每個面板（panel）應該至少有折疊/展開工具按鈕。代碼如下所示： ``` <div style="width:200px;height:auto;background:#7190E0;padding:5px;"> <div class="easyui-panel" title="Picture Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;"> View as a slide show<br/> Order prints online<br/> Print pictures </div> <br/> <div class="easyui-panel" title="File and Folder Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;"> Make a new folder<br/> Publish this folder to the Web<br/> Share this folder </div> <br/> <div class="easyui-panel" title="Other Places" collapsible="true" collapsed="true" style="width:200px;height:auto;padding:10px;"> New York<br/> My Pictures<br/> My Computer<br/> My Network Places </div> <br/> <div class="easyui-panel" title="Details" collapsible="true" style="width:200px;height:auto;padding:10px;"> My documents<br/> File folder<br/><br/> Date modified: Oct.3rd 2010 </div> </div> ``` #### 自定義面板（panel）的外觀效果請注意，這個視圖外觀效果不是我們想要的，我們必須改變面板（panel）的頭部背景圖片和折疊/展開按鈕的圖標。做到這一點并不難，我們需要做的只是重新定義一些 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; } ``` 由此可見，使用 easyui 定義用戶界面非常簡單。 ## 下載 jQuery EasyUI 實例 [jeasyui-layout-xp.zip](/try/jeasyui/download/jeasyui-layout-xp.zip)