jEasyUI crée une disposition des bordures

La disposition des frontières propose cinq zones : est, ouest, nord, sud et centre. Voici quelques utilisations courantes :

• La zone nord peut être utilisée pour afficher le slogan du site Web.

• La zone sud peut être utilisée pour afficher les droits d'auteur et certaines instructions.

• la zone ouest peut être utilisée pour afficher le menu de navigation.

• La zone Est peut être utilisée pour exposer certains objets promotionnels.

• La zone centrale peut être utilisée pour afficher le contenu principal.

Afin d'appliquer une mise en page, vous devez identifier un conteneur de mise en page, puis définir certaines zones. La mise en page doit nécessiter au moins une zone centrale. Voici un exemple de mise en page :

	<div class="easyui-layout" style="width:400px;height:200px;">
		<div region="west" split="true" title="Navigator" style="width:150px;">
			<p style="padding:5px;margin:0;">Select language:</p>
			<ul>
				<li><a href="javascript:void(0)" onclick="showcontent('java')">Java</a></li>
				<li><a href="javascript:void(0)" onclick="showcontent('cshape')">C#</a></li>
				<li><a href="javascript:void(0)" onclick="showcontent('vb')">VB</a></li>
				<li><a href="javascript:void(0)" onclick="showcontent('erlang')">Erlang</a></li>
			</ul>
		</div>
		<div id="content" region="center" title="Language" style="padding:5px;">
		</div>
	</div>

Nous avons créé une mise en page de bordure dans un conteneur <div> à gauche et le contenu principal à droite.

Enfin, nous écrivons une fonction de gestionnaire d'événements onclick pour récupérer des données, la fonction 'showcontent' est très simple :

	function showcontent(language){
		$('#content').html('Introduction to ' + language + ' language');
	}

Télécharger l'instance jQuery EasyUI

jeasyui-layout-layout. zip