다이나믹 하게 switch 만들기
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