19EasyUI 布局- 创建 XP 风格左侧面板

通常情况下，在 Windows XP 的资源管理器文件夹中，左侧的面板（panel）包含一些常见任务。 本教程向您展示如何通过 easyui 的面板（panel）插件来创建 XP 左侧面板。

案例

自定义面板（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;
    }

完整代码

	
	
	
	jQuery EasyUI Demo
	
	
	
	
	
		.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;
		}
	


	

		

			View as a slide show
			Order prints online
			Print pictures
		
		
		

			Make a new folder
			Publish this folder to the Web
			Share this folder
		
		
		

			New York
			My Pictures
			My Computer
			My Network Places
		
		
		

			My documents
			File folder
			Date modified: Oct.3rd 2010