jQuery mobile

Content formatting

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

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

<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-* 클래스를 중복해서 사용한다.

<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" 속성을 사용한다. 처음으로 등장하는 헤더 태그가 제목으로 사용된다.

<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

테마

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

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

전체소스

 

댓글

댓글 본문
  1. 허공
    감사합니다!
  2. ericpark
    감사합니다.
  3. JustStudy
    고맙습니다
  4. imkurtkim
    감사합니다. 잘봤습니다.
  5. 말랑
    재밌어요ㅎㅎ
  6. 북경사자
    감사합니다~ 잘 보고 있어요~
  7. 포스만빵
    따라하다보니 아주 쉽고 재밌네요..
  8. 권영인
    영상 뒷부분 짤리고 사진 짤렸네욧~!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기