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的文章！