이전에 jQuery Mobile이 어떻게 오리지널 HTML 에서 jQuery Mobile convention에 맞도록 display 될 HTML 코드로 변환하는지 살펴 봤습니다. 아래 예제를 볼까요. jQuery Mobile 에 의해서 사용되는 CSS 클래스들을 몇개 바꿔서 색다른 radio 버튼을 만들어 보겠습니다.
Styling the radio buttons
<!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-radio label {
font-size : 25px;
font-style : italic;
}
.ui-radio .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 the number of rooms: </span>
<div data-role=controlgroup>
<label for=id1> 1 </label>
<input type=radio id=id1 name=rooms />
<label for=id2> 2 </label>
<input type=radio id=id2 name=rooms />
<label for=id3> 3 </label>
<input type=radio id=id3 name=rooms />
<label for=id4> 4 </label>
<input type=radio id=id4 name=rooms />
<label for=id5> 5 </label>
<input type=radio id=id5 name=rooms />
</div>
</div>
</div>
</body>
</html>
tistory498_01.html
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| switch 값 할당하거나 retrieve 하기 (0) | 2012.12.05 |
|---|---|
| Ajax로 switch 삽입하기 (1) | 2012.12.04 |
| HTML 을 jQuery Mobile switch로 바꾸기 (0) | 2012.12.04 |
| 다이나믹 하게 switch 만들기 (0) | 2012.12.04 |
| Radio 버튼 생성 예제들... (0) | 2012.12.03 |
| Radio button 에서 이벤트 관리하기 (0) | 2012.12.01 |
| 기존 리스트에 radio button 추가하기/지우기 (0) | 2012.11.30 |
| radio 버튼의 값 할당하거나 retrieve 하기 (7) | 2012.11.29 |
| Ajax 로 radio 버튼 insert 하기 (1) | 2012.11.28 |
| jQuery Mobile radio button 으로 HTML element 바꾸기 (1) | 2012.11.28 |