jEasyUI는 XP 스타일 왼쪽 패널을 생성합니다.

일반적으로 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('../style/images/panel_header_bg.gif') no-repeat top right;
	}
	.panel-tool-collapse{
		background:url('../style/images/arrow_up.gif') no-repeat 0px -3px;
	}
	.panel-tool-expand{
		background:url('../style/images/arrow_down.gif') no-repeat 0px -3px;
	}

easyui를 사용하여 사용자 인터페이스를 정의하는 것이 매우 간단하다는 것을 알 수 있습니다.

jeasyui-layout-xp.zip

jeasyui-layout-xp.zip을 다운로드하세요