16. jQuery Mobile 그리드 레이아웃

Index

14. jQuery Mobile 아이콘(data-icon, data-iconpos, 사용자 정의 아이콘)

15. jQuery Mobile 리스트

16. jQuery Mobile 그리드 레이아웃

17. jQuery Mobile Collapsible 블록

18. 터치 이벤트

 

 

jQuery Mobile의 그리드 레이아웃은 CSS 기반의 컬럼을 제공해서 그리드 레이아웃을 구성할 수 있도록 한다. 그리드 레이아웃은 한 행에 최대 5개의 컬럼을 제공한다. 그리드 레이아웃은 작은 사이즈의 컴포넌트를 페이지 상에 배치할 때 사용될 수 있다.

 

그리드 레이아웃을 그리는 방법은 그리드 외각을 결정하는 <div>태그의 class 속성에 컬럼의 갯수에 따라 ui-grid-a, ui-grid-b, ui-grid-c, ui-grid-d 중 하나를 지정한다. 그리드 안의 각 컬럼에 해당하는 <div>태그의 class 속성에 배치되는 순서에 따라 ui-block-a, ui-block-b, ui-block-c, ui-block-d, ui-block-e 를 차례대로 지정한다.

 

 

 

그리드의 레이아웃 및 컬럼 속성

 

그리드 정의	컬럼수	컬럼에 해당하는 항목 class 속성 값
ui-grid-a	2	ui-block-a, ui-block-b
ui-grid-b	3	ui-block-a, ui-block-b, ui-block-c
ui-grid-c	4	ui-block-a, ui-block-b, ui-block-c, ui-block-d
ui-grid-d	5	ui-block-a, ui-block-b, ui-block-c, ui-block-d, ui-block-e

 

 

컬럼수가 2개인 그리드 예제

<div class="ui-grid-a">

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

 

     ...

 

</div>

 

컬럼수가 3개인 그리드 예제

<div class="ui-grid-b">

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

 

     ...

 

</div>

 

 

컬럼수가 4개인 그리드 예제

<div class="ui-grid-c">

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-d"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-d"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-d"></div>

 

     ...

 

</div>

 

컬럼수가 5개인 그리드 예제

<div class="ui-grid-d">

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-d"></div>

    <div class="ui-block-e"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-d"></div>

    <div class="ui-block-e"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-d"></div>

    <div class="ui-block-e"></div>

 

     ...

 

</div>