天天看點

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

通常情況下,在 Windows XP 的資料總管檔案夾中,左側的面闆(panel)包含一些常見任務。

本教程向您展示如何通過 easyui 的面闆(panel)插件來建立 XP 左側面闆。

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

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

代碼如下所示:

請注意,這個視圖外觀效果不是我們想要的,我們必須改變面闆(panel)的頭部背景圖檔和折疊/展開按鈕的圖示。

做到這一點并不難,我們需要做的隻是重新定義一些 CSS。

由此可見,使用 easyui 定義使用者界面非常簡單。

jeasyui-layout-xp.zip