jQuery EasyUI使用教程之建立XP風格的左側面板

<jQuery EasyUI最新版下載>

一般狀況下，在Windows XP的資源管理器文件夾中，左側的面板包含了一些常見的任務。本教程教你如何經過easyui的面板插件來建立XP風格的左側面板。

查看演示

定義多個面板

咱們定義了多個面板來顯示一些任務，每一個面板至少應該有摺疊/展開工具按鈕。該代碼以下：

< 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 >

自定義面板的外觀效果

請注意，若是這個視圖的外觀效果不是咱們想要的，那麼咱們必須更改面板頭部背景圖片和摺疊/展開按鈕的圖標。作到這一點並非很難，咱們應該從新定義一些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定義用戶界面是很是簡單的。

下載該EasyUI示例：easyui-panel-demo.zip

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的文章！