jQuery Mobile(PhoneGap) [jQuery Mobile] Content formatting

황제낙엽 2012.11.15 17:45 조회 수 : 109

sitelink1  
sitelink2  
sitelink3 http://1 


Layout grid

레이아웃 그리드란 컨텐츠를 배치하는 방법을 지정한다. 배치하려는 컨텐츠를 포함하고 있는 컨테이너 엘리먼트에 배치 방식에 해당하는 클래스 이름을 부여한다. 클래스 이름은 아래와 같다.

칼럼의 수 비율 클래스 명 자식으로 올 수 있는 CSS 클래스
2 50:50% ui-grid-a ui-block-a,b
3 33:33:33% ui-grid-b ui-block-a,b,c
4 25:25:25:25% ui-grid-c ui-block-a,b,c,d
5 20:20:20:20:20% ui-grid-d ui-block-a,b,c,d,e

다음 예제는 버튼을 수평으로 배치하는 예제다.

1
2
3
4
<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>

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

행을 나누고 싶을 때는 ui-block-* 클래스를 중복해서 사용한다.

1
2
3
4
5
6
7
8
9
10
11
<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 class="ui-block-a">Block A</div>
    <div class="ui-block-b">Block B</div>
    <div class="ui-block-c">Block C</div>
    <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>

전체소스

Collapsible content

컨텐츠를 감추었다가 사용자가 원하면 보여주는 컴포넌트로 div 태그에 data-role="collapsible" 속성을 사용한다. 처음으로 등장하는 헤더 태그가 제목으로 사용된다.

1
2
3
4
<div data-role="collapsible">
   <h3>I'm a header</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

전체소스

참고 : http://jquerymobile.com/demos/1.1.0/docs/content/content-collapsible.html

테마

테마 기능을 이용해서 컨텐츠 영역의 디자인을 변경할 수 있다.

1
<div data-role="page" data-theme="a" data-content-theme="a">

전체소스

이 게시물을
목록
쓰기 태그