jEasyUI crée un panneau gauche de style XP

Normalement, dans le dossier Explorateur de Windows XP, le panneau de gauche contient certaines tâches courantes. Ce tutoriel vous montre comment créer un panneau gauche XP à l'aide du plugin de panneau easyui.

Définir quelques panneaux

Nous définissons certains panneaux, qui sont utilisés pour afficher certaines tâches. Chaque panneau doit avoir au moins un bouton d'outil Réduire/Développer.

Le code est le suivant :

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

Personnaliser l'apparence du panneau

Veuillez noter que l'apparence de cette vue n'est pas ce que l'on souhaite, il faut changer de panneau Image d’arrière-plan de l’en-tête (Panneau) et icône du bouton Réduire/Agrandir.

Ce n’est pas difficile à faire, il suffit de redéfinir du 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;
	}

On voit qu'utiliser easyui pour définir l'interface utilisateur est très simple.

Télécharger l'instance jQuery EasyUI

jeasyui-layout-xp.zip