JQuery Mobile - Layout Grid (Columns)

Layout Grid

여러 컬럼을 가진 레이아웃을 사용하는 것은 모바일 기기쪽에서는 별로 권장되지 않는 방법입니다. 화면 크기가 작기 때문이죠. 하지만 작은 것들을 차례대로 좌우로 표시해야 될 때가 있습니다. (버튼이나 탭같은...)

jQuery Mobile framework은 CSS-based 컬럼들을 만드는 간단한 방법을 제공하고 있습니다. ui-grid 클래스를 call 하면 block 스타일 컬럼을 만들 수있습니다.

• two-column (using the ui-grid-a class)
• three-column (using the ui-grid-b class)
• four-column (using the ui-grid-c class)
• five-column (using the ui-grid-d class)

Grid는 100% width 에다 border나 배경이 없어서 보이지 않습니다. 그리고 padding이나 margin도 없죠. 그래서 그 안에 어떤 style과 함께 서로 간섭할 수가 없습니다.

Grid 콘테이너에는 ui-block-a/b/c/d/e 라는 child element들이 할당됩니다. 각 block element들을 side-by-side로 정렬하도록 만드는 거죠. ui-block-a 는 새로운 줄을 시작할 때 사용할 수 있습니다.


Two column grids

2개의 컬럼이 있는 레이아웃을 만드려면 ui-grid-a 클래스를 div에 넣습니다. 그리고 그 안에 두개의 child 콘테이너를 넣는데요. ui-block-a 는 첫번째 컬럼이 되고 ui-block-b 는 두번째 컬럼이 됩니다.


<div class="ui-grid-a">
	<div class="ui-block-a"><strong>I'm Block A</strong> 
        and text inside will wrap</div>
	<div class="ui-block-b"><strong>I'm Block B</strong> 
        and text inside will wrap</div>
</div><!-- /grid-a -->

위 예제를 실행하면 아래처럼 보일 겁니다.

I'm Block A and text inside will wrap.      I'm Block B and text inside will wrap.

위에서 보듯이 grid block은 디폴트로 아무런 visual styling이 없습니다. 단지 그 내용을 side-by-side로 보여 줄 뿐입니다.

Grid 클래스는 어떤 컨테이너에든지 apply 될 수 있습니다. 다음 예제에서는 ui-grid-a 를 fieldset에 넣을 겁니다. 그리고 두개의 버튼의 컨테이너 안에 각각 ui-block classes 를 넣을 거구요. 이 두개의 버튼들은 나란히 화면의 50%를 차지하게 될 겁니다.

<fieldset class="ui-grid-a">
	<div class="ui-block-a"><button type="submit" data-theme="c">
                                Cancel</button></div>
	<div class="ui-block-b"><button type="submit" data-theme="b">
                                Submit</button></div>
</fieldset>

framework은 그리드 안에서 버튼들에 각각 왼쪽, 오른쪽 마진을 넣게 됩니다. 버튼이 한개라면 class ui-grid-solo 를 사용하고 버튼에 ui-block-a 를 추가하면 됩니다. 그러면 이 버튼은 위의 두 버튼과 동일한 마진을 갖게 될 겁니다. 아래처럼요.


<div class="ui-grid-a">
	<div class="ui-block-a"><button type="button" data-theme="c">
                                Previous</button></div>
	<div class="ui-block-b"><button type="button" data-theme="c">
                               Next</button></div>	   
</div>
<div class="ui-grid-solo">
	<div class="ui-block-a"><button type="v" data-theme="b">More</button></div>
</div>

 
grid를 포함해서 theme 클래스를 추가할 수도 있습니다. 아래에 우리는 두개의 
클래스를 추가했습니다. 
ui-bar클래스를 추가함으로서 default bar 패딩이 추가 됐고 ui-bar-e를 추가함으로서 
e 툴바 theme swatch에 background gradient와 폰트 스타일을 적용했습니다.
inline style="height:120px" attribute 도 각 grid에 추가해서 각 grid에 높이를 
주었습니다.




소스는 이 글 마지막에 올린 샘플 파일을 참조하세요.

Three-column grids

다른 grid 레이아웃은 parent에 class=ui-grid-b 를 사용해서 만들 수 있습니다. 이렇게 하면 3개의 child 콘테이너 element들을 만들게 됩니다. 3개의 child는 각각 ui-block-a/b/c class를 갖게 됩니다. 그러면 각각 33%의 width를 갖는 grid가 나타날 겁니다. Note: 샘플 파일에는 style을 적용했습니다. 그래서 각 grid를 구분해 놔서 눈으로 확인 하실 수 있으실 겁니다.

<div class="ui-grid-b">
	<div class="ui-block-a">Block A</div>
	<div class="ui-block-b">Block B</div>
	<div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->

각 grid 안에 버튼을 넣을 수도 있습니다. (샘플파일 참조)

Four-column grids

25/25/25/25% grid 로 4개의 컬럼을 만들 수있는데 이것은 parent에 class=ui-grid-c를 넣어서 만들 수 있습니다.


Five-column grids

20/20/20/20/20% 이렇게 5개의 컬럼은 class=ui-grid-d 로 만들 수 있습니다.




Multiple row grids

여러줄로 된 grid를 만들 수도 있습니다. 예를 들어 3개 컬럼 grid를 container에 지정하고 (ui-grid-b) 그 안에 9개의 child block이 있다고 생각해 봅시다. 그러면 각 블럭들이 3줄로 표시 될 겁니다. 한 줄을 끝내고 다른 줄을 시작하기 위해 CSS 룰을 따라야 합니다. class=ui-block-a 는 새로운 줄을 시작하는 신호가 될 겁니다. (a, b, c, a, b, c, etc.) 이렇게 반복하면 여러줄을 만들 수 있습니다.

자세한 것은 샘플 파일을 참조하세요.

Grids in toolbars

Grid는 툴바에 layout을 만드는데 유용하게 활용할 수 있습니다. 아래는 footer에 4개의 컬럼을 가진 grid를 넣어서 활용한 예입니다. 소스는 샘플파일을 참조하세요.

layoutGrid.html