国产中文字幕在线观看不卡一区,国产裸体美女视频网站免费观看,天堂www网

jQuery EasyUI使用教程：創(chuàng)建XP風(fēng)格的左側(cè)面板

原創(chuàng)|使用教程|編輯：龔雪|2015-11-23 09:08:40.000|閱讀 710 次

概述：通常情況下，在Windows XP的資源管理器文件夾中，左側(cè)的面板包含了一些常見的任務(wù)。本教程教你如何通過easyui的面板插件來創(chuàng)建XP風(fēng)格的左側(cè)面板。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

<jQuery EasyUI最新版下載>

通常情況下，在Windows XP的資源管理器文件夾中，左側(cè)的面板包含了一些常見的任務(wù)。本教程教你如何通過easyui的面板插件來創(chuàng)建XP風(fēng)格的左側(cè)面板。

jQuery EasyUI使用教程：創(chuàng)建XP風(fēng)格的左側(cè)面板

定義多個(gè)面板

我們定義了多個(gè)面板來顯示一些任務(wù)，每個(gè)面板至少應(yīng)該有折疊/展開工具按鈕。該代碼如下：

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

自定義面板的外觀效果

請(qǐng)注意，如果這個(gè)視圖的外觀效果不是我們想要的，那么我們必須更改面板頭部背景圖片和折疊/展開按鈕的圖標(biāo)。做到這一點(diǎn)并不是很難，我們應(yīng)該重新定義一些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定義用戶界面是非常簡(jiǎn)單的。

下載該EasyUI示例：

購買最新正版授權(quán)！""