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 界说用户界面十分简略。

下载 jQuery EasyUI 实例

jeasyui-layout-xp.zip