雷林鵬分享：jQuery EasyUI 布局 - 建立 XP 風格左側面闆

　　jQuery EasyUI 布局 - 建立 XP 風格左側面闆

　　通常情況下，在 Windows XP 的資料總管檔案夾中，左側的面闆(panel)包含一些常見任務。 本教程向您展示如何通過 easyui 的面闆(panel)插件來建立 XP 左側面闆。

　　定義一些面闆(panel)

　　我們定義一些面闆(panel)，這些面闆(panel)用來顯示一些任務。每個面闆(panel)應該至少有折疊/展開工具按鈕。

　　代碼如下所示：

　　

　　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

　　自定義面闆(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