본문 바로가기
----- IT -----/jQuery Moblie

jQuery Mobile - Layout grids

by 대소니 2011. 5. 23.
여러 컬럼이 있는 레이아웃은 일반적으로 모바일환경에서는 추천되지 않습니다.
좁은 스크린의 길이 때문입니다. 그러나, 버튼이나 네이게이션 바와 같은 작은 요소들을 나열할 필요가 있을 경우가 있습니다.
JQM 프레임웍에서는 ui-grid로 불리는 편리한 블록 스타일 class를 통해 css 기반 컬럼을 쉽게 만들수 있습니다.

두가지 프리셋 레이아웃이 있는데, 그중 하나는 ui-grid-a의 class를 사용하는 두개의 컬럼과 ui-grid-b의 class를 사용하는 세개의 컬럼입니다. 컬럼이 필요한 어느 상황에라도 사용이 가능합니다.
Grid는 테두리나 백그라운드가 없이 보여질수 있는 100%의 가로 길이를 사용합니다. 패딩과 마진도 없습니다. 그래서, 그리드들은 그 내부에 있는 요소들의 스타일을 방해해서는 안됩니다.

Two column grids
두개의 컬럼 레이아웃을 만들기 위해, class속성 값이 ui-grid-a인 컨테이너로 시작합니다. 그리고, 내부의 두 컨테이너 중에 첫번째 것은 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 -->



그리드 class는 어떤 컨테이너에도 적용할 수 있습니다. fieldset태그에 ui-grid-a를 추가하고 스크린 가로 사이즈의 각각 반씩의 공간에 두개 버튼을 넣어 ui-block를 적용합니다.

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



Theming system으로부터의 테마class는 그리드를 포함하는 엘리먼트 하나를 추가할 수 있습니다. 두개 class를 추가여 블록을 만들수 있습니다. 기본 bar 패딩을 추가하기 위해 ui-bar를 사용하고 “e” 툴바 테마의 배경 그라디에이션과 폰트 스타일을 적용하기 위해 ui-bar-e를 추가합니다. Style=”height:120px” 속성은 또한 각 그리드의 기본 높이를 셋팅합니다.

<div class="ui-grid-a">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
</div><!-- /grid-a -->



Three-column grids
3개의 자식 컨테이너를 가지는 부모 컨테이너에 class=ui-grid-b를 추가하여 생성합니다. 자식 컨테이너는 가로 길이를 1/3하여 각각 요소에 ui-block-a/b/c의 class를 추가합니다.

<div class="ui-grid-b">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">Block C</div></div>
</div><!-- /grid-b -->



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



Four-column grids
4개의 컬럼을 갖는 그리드는 class=ui-grid-c 를 추가하여 만듭니다.

<div class="ui-grid-c">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
    <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
</div><!-- /grid-c -->



Five-column grids
5개 컬럼을 갖는 그리드는 class=ui-grid-d를 추가하여 만듭니다.

<div class="ui-grid-d">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
    <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
    <div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:120px">E</div></div>
</div><!-- /grid-c -->



Multiple row grids
그리드는 아이템들의 여러 row를 감싸서 디자인 합니다. 만약 3개 컬럼의 그리드에 9개 자식 블록을 만들고 싶다면, 각 3개 아이템을 3개 row로 감싸면 됩니다. 이것은 명확한 floats를 위한 css 룰입니다. 그리고 새로운 라인이 시작할 때 순차적으로 반복해서 class=ui-block-a부터 c까지 할당해 주면 됩니다.

<div class="ui-grid-b">
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
</div><!-- /grid-c -->


댓글0