jEasyUI가 테두리 레이아웃을 생성합니다.

테두리 레이아웃은 동쪽, 서쪽, 북쪽, 남쪽, 중앙의 5개 영역을 제공합니다. 다음은 몇 가지 일반적인 용도입니다.

• 북쪽 영역은 웹사이트의 슬로건을 표시하는 데 사용할 수 있습니다.

• 남쪽 지역은 저작권 및 일부 지침을 표시하는 데 사용될 수 있습니다.

• 서쪽 지역은 탐색 메뉴를 표시하는 데 사용할 수 있습니다.

• 동쪽 지역에서는 일부 프로모션 품목을 전시할 수 있습니다.

• 중앙 영역은 주요 콘텐츠를 표시하는 데 사용할 수 있습니다.

레이아웃을 적용하려면 레이아웃 컨테이너를 식별한 후 일부 영역을 정의해야 합니다. 레이아웃에는 하나 이상의 중앙 영역이 필요합니다. 다음은 레이아웃 예입니다.

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

레이아웃은 컨테이너를 다음과 같이 잘라냅니다. 왼쪽에 탐색 메뉴가 있습니다. 오른쪽에는 주요 내용이 있습니다.

마지막으로 데이터를 검색하기 위한 onclick 이벤트 핸들러 함수를 작성합니다. 'showcontent' 함수는 매우 간단합니다.

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

jQuery EasyUI 예제 다운로드

jeasyui-layout-layout.zip