jEasyUI mencipta panel kiri gaya XP

Biasanya, dalam folder Explorer Windows XP, panel kiri mengandungi beberapa tugas biasa. Tutorial ini menunjukkan kepada anda cara membuat panel kiri XP menggunakan pemalam panel easyui.

Tentukan beberapa panel

Kami menentukan beberapa panel, yang digunakan untuk memaparkan beberapa tugasan. Setiap panel harus mempunyai sekurang-kurangnya butang runtuhan/kembangkan alat.

Kodnya adalah seperti berikut:

	<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>

Sesuaikan penampilan panel

Sila ambil perhatian bahawa penampilan paparan ini bukan seperti yang kita mahu, kita mesti menukar panel (Panel) imej latar belakang pengepala dan ikon butang runtuh/kembangkan.

Tidak sukar untuk melakukan ini, yang perlu kita lakukan ialah mentakrifkan semula beberapa 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;
	}

Ia boleh dilihat bahawa menggunakan easyui untuk mentakrifkan antara muka pengguna adalah sangat mudah.

Muat turun contoh jQuery EasyUI

jeasyui-layout-xp.zip