jEasyUI 創(chuàng)建 XP 風(fēng)格左側(cè)面板

通常情況下，在 Windows XP 的資源管理器文件夾中，左側(cè)的面板（panel）包含一些常見任務(wù)。本教程向您展示如何通過 easyui 的面板（panel）插件來創(chuàng)建 XP 左側(cè)面板。

定義一些面板（panel）

我們定義一些面板（panel），這些面板（panel）用來顯示一些任務(wù)。每個(gè)面板（panel）應(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>

自定義面板（panel）的外觀效果

請注意，這個(gè)視圖外觀效果不是我們想要的，我們必須改變面板（panel）的頭部背景圖片和折疊/展開按鈕的圖標(biāo)。

做到這一點(diǎn)并不難，我們需要做的只是重新定義一些 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 定義用戶界面非常簡單。

上一篇：jEasyUI 添加自動(dòng)播放標(biāo)簽頁下一篇：jEasyUI 轉(zhuǎn)換 HTML 表格為數(shù)據(jù)網(wǎng)格