通常情況下，在 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 定義用戶界面非常簡單。

總結

以上是生活随笔為你收集整理的html5 easyui 布局,Easyui 在面板中创建复杂布局_EasyUI 插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。