이 전 글에서 어떻게 jQuery Mobile 이 오리지널 HTML 코드를 jQuery Mobile 형식에 맞는 HTML 코드로 바꾸는지에 대해 살펴 보았습니다. 아래 예제에서는 체크박스의 display 를 바꾸기 위해 jQuery Mobile 에서 사용하는 CSS 클래스들을 수정해 보겠습니다.
Styling the checkboxes
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
<style type=text/css>
.ui-controlgroup .ui-checkbox label {
font-size : 25px;
font-style : italic;
}
.ui-checkbox .ui-btn {
text-align : right;
}
</style>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Choose an apartment: </span>
<div data-role=controlgroup>
<label for=id1> 1 bedroom </label>
<input type=checkbox id=id1 name=p1 />
<label for=id2> 2 bedrooms </label>
<input type=checkbox id=id2 name=p2 />
<label for=id3> 3 bedrooms </label>
<input type=checkbox id=id3 name=p3 />
<label for=id4> 4 bedrooms </label>
<input type=checkbox id=id4 name=p4 />
<label for=id5> 5 bedrooms </label>
<input type=checkbox id=id5 name=p5 />
</div>
</div>
</div>
</body>
</html>
|
|
tistory487_01.html'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| radio 버튼의 값 할당하거나 retrieve 하기 (7) | 2012.11.29 |
|---|---|
| Ajax 로 radio 버튼 insert 하기 (1) | 2012.11.28 |
| jQuery Mobile radio button 으로 HTML element 바꾸기 (1) | 2012.11.28 |
| 다이나믹하게 radio button 생성하기 (0) | 2012.11.28 |
| 체크 박스 생성 예제들 (0) | 2012.11.27 |
| 체크박스에서 이벤트 관리하기 (0) | 2012.11.26 |
| 리스트에 체크박스 삽입/삭제 하기 (0) | 2012.11.25 |
| 체크박스에 값 할당/retrieve 하기 (0) | 2012.11.24 |
| Ajax 로 checkbox 만들어 넣기 (0) | 2012.11.21 |
| jQuery Mobile checkbox로 HTML element 변환하기 (0) | 2012.11.20 |