switch 를 만드는 것은 주로 jQuery method들을 이용해서 만듭니다.
data-role="slider"
attribute 가 있는 <select>
element를 사용하면 switch 가 됩니다. 이것을 관리하기 위해서 jQuery Mobile에서는 slider
() method를 제공합니다. switch는 standard slider component와 연결 돼 있습니다.
data-role="slider"
attribute가 있는 <select>
element 를 사용해서 switch 를 만듭니다. switch 의 두개 값을 나타내기 위해 두개의 <option>
elements도 사용합니다.
Dynamic creation of a switch
<!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>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Would you like an apartment: </span>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "<select data-role=slider>";
html += "<option value=no> No </option>";
html += "<option value=yes> Yes </option>";
html += "</select>";
$("#home div:jqmData(role=content)").append (html);
</script>
|
|
tistory502_01.html'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| Switch 커스터마이징 하기 (0) | 2012.12.08 |
|---|---|
| switch 에서 이벤트 관리하기 (0) | 2012.12.05 |
| switch 값 할당하거나 retrieve 하기 (0) | 2012.12.05 |
| Ajax로 switch 삽입하기 (1) | 2012.12.04 |
| HTML 을 jQuery Mobile switch로 바꾸기 (0) | 2012.12.04 |
| Radio 버튼 생성 예제들... (0) | 2012.12.03 |
| radio 버튼 커스터마이징 하기 (0) | 2012.12.02 |
| Radio button 에서 이벤트 관리하기 (0) | 2012.12.01 |
| 기존 리스트에 radio button 추가하기/지우기 (0) | 2012.11.30 |
| radio 버튼의 값 할당하거나 retrieve 하기 (7) | 2012.11.29 |