jQuery 레이아웃 플러그인 UI Layout_jquery 소개 및 사용법

UI Layout은 jQuery를 기반으로 한 레이아웃 프레임워크입니다. 프로젝트 홈페이지는 http://layout.jquery-dev.net/입니다. 이 프레임워크의 참조 프로토타입은 ExtJS의 경계 레이아웃이므로 ExtJS를 사용하는 원본 프로젝트를 jQuery 프로젝트로 변환하는 데 매우 적합합니다. 핵심은 크기 적응형 중앙 패널(필수)입니다. 접이식 및 확장 가능 패널을 패널의 네 방향에 배치할 수 있습니다(선택 사항). 각 패널에 머리글 및 바닥글 패널을 원하는 만큼 추가할 수 있습니다. UI 레이아웃은 내부 레이아웃의 중첩을 지원합니다. 모든 블록 요소는 레이아웃 컨테이너로 사용할 수 있습니다.

기본 사용법: 컨테이너 요소를 가져오고 레이아웃 메서드를 호출하고 구성 매개변수(선택 사항) 옵션을 전달합니다.
$('body').layout( [options] ); 레이아웃 코드를 통해 레이아웃 모양을 추가로 제어하기 위한 참조입니다.

코드 복사 코드는 다음과 같습니다.

var myLayout = $('body') .layout( );//레이아웃 구성 옵션 읽기
var is_west_ressible = myLayout.options.west.ressible;
var north_maxHeight = myLayout.options.north.maxSize
//레이아웃 함수 호출
myLayout.toggle("north");
myLayout.sizePane("west", 300);
// 레이아웃 도구 호출
myLayout.addPinBtn("#myPinButton", "west" );
myLayout.allowOverflow("north");

모든 패널은 기존 HTML 요소를 기반으로 하며 패널의 보조 구성 요소(확대기 및 축소 스위치)는 자동으로 생성된 div 요소입니다. added 해당 클래스 속성이 추가됩니다. 거의 모든 패널 요소는 양식 컨테이너를 제외하고 컨테이너 요소의 직계 하위 요소여야 합니다. 기본 클래스 이름이나 사용자 정의 클래스 이름 및 ID를 해당 HTML 요소에 할당하여 레이아웃 패널을 지정할 수 있습니다. 다음은 직관적인 예입니다.

코드 복사 코드는 다음과 같습니다.

$( document).ready(function() {
$("body").layout({
/*
동쪽 및 서쪽 창에는 'ID' 선택기가 필요합니다.
'div 내부에 중첩되어 있기 때문입니다. '
*/
west__paneSelector: "#west"
, east__paneSelector: "#east"
/*
북쪽 및 남쪽 창은 'body의 하위 창'입니다
*/
, north__paneSelector : ".ui-layout-north"//기본 구성, 생략 가능
, south__paneSelector: ".myclass-south"
/*
가운데 창은 '첫 번째 형식의 하위'입니다. '
참고용으로 표시된 기본 선택기
*/
, center__paneSelector: ".ui-layout-center"//기본 구성, 생략 가능
});


해당페이지 :

코드복사코드는 다음과 같습니다.

north
< div class="myclass-south">south

🎜>

center