top
Loading...
jQuery EasyUI 布局 – 創建 XP 風格左側面板

jQuery EasyUI 布局 - 創建 XP 風格左側面板

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

定義一些面板(panel)

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

代碼如下所示:

    <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)的外觀傚果

請注意,這個視圖外觀傚果不是我們想要的,我們必須改變面板(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 定義用戶界面非常簡單。

北斗有巢氏 有巢氏北斗