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" > |
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
18 | Google Map에 현재 위치 주변의 음식점 표시하기 | 황제낙엽 | 2017.01.23 | 8460 |
17 | Google Maps Geolocation API를 이용한 현재위치 검색 | 황제낙엽 | 2017.01.14 | 343 |
16 | cordova 플러그인을 이용하여 GPS 활성화 | 황제낙엽 | 2017.01.14 | 588 |
15 | 모바일 크롬에서 단축 아이콘 생성 - WebApp 만들기 | 황제낙엽 | 2016.12.03 | 165 |
14 | [JS] navigator geolocation 현재 접속 위치 가져오기 | 황제낙엽 | 2016.12.03 | 179 |
13 | Geolocation API를 이용해 위치 정보를 알아내기 | 황제낙엽 | 2016.12.03 | 196 |
12 | PhoneGap, Accelerator Titanium, Appspresso | 황제낙엽 | 2013.11.29 | 138 |
11 | [jQuery Mobile] 테마 (Theme) | 황제낙엽 | 2012.11.15 | 23 |
10 | [jQuery Mobile] 설정 | 황제낙엽 | 2012.11.15 | 22 |
9 | [jQuery Mobile] List view | 황제낙엽 | 2012.11.15 | 221 |
8 | [jQuery Mobile] Form element | 황제낙엽 | 2012.11.15 | 24 |
» | [jQuery Mobile] Content formatting | 황제낙엽 | 2012.11.15 | 55 |
6 | [jQuery Mobile] Button | 황제낙엽 | 2012.11.15 | 19 |
5 | [jQuery Mobile] Toolbar | 황제낙엽 | 2012.11.15 | 24 |
4 | [jQuery Mobile] page & dialog | 황제낙엽 | 2012.11.15 | 27 |
3 | [jQuery Mobile] 컴포넌트란? | 황제낙엽 | 2012.11.15 | 23 |
2 | [jQuery mobile] 기본 사용법 | 황제낙엽 | 2012.11.15 | 59 |
1 | [jQuery mobile] 소개 | 황제낙엽 | 2012.11.15 | 81 |