使用easyUI创建XP风格左侧面板

@author YHC

通常,资源管理器文件夹在XP下的左侧的panel包含一些常见任务,这个教程向你展示如何创建XP左侧面板风格,使用easyui的panel插件.

查看 Demo

定义一些panel

我们定义一些panel显示一些任务,每个panel应该至少有collapse(折叠)/expand(展开)工具按钮.

代码看起来就像这些:

<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头部的背景图片和collapse(折叠)/expand(展开)按钮的icon的样式,

做到这个一点都不难,我们需要做的是重新定义一些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