Assign and retrieve the value of a switch
Switch already present in the HTML code
switch는 single <select> element 입니다. 이런 elements 들을 관리하는 것은 val (value) method를 사용합니다. selection list 에 값을 할당하거나 val () method를 사용해서 현재 select 된 값을 retrieve 하게 되는거죠. 두 경우 모두 <option> element 의 value attribute 에 정의된 값입니다.
Set the switch to Yes
$("select").val ("yes");
Retrieve the current value of the switch
alert ($("select").val ());
이 메소드를 사용해서 프로그램이 시작할 때 switch 를 Yes로 만들어 보죠.
Assign and retrieve the value 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>
<select data-role=slider>
<option value=no> No </option>
<option value=yes> Yes </option>
</select>
</div>
</div>
</body>
</html>
<script>
$("select").val ("yes");
alert ($("select").val ());
</script>
|
|
tistory505_01.htmlSwitch dynamically created
val (value) 와 val () methods 들도 이런 경우 사용할 수 있습니다. 아마 이 경우 값이 바뀐 후에도 switch display 가 refresh 되지 않아서 값이 바뀌지 않을 겁니다. 이럴 경우 slider ("refresh") method를 사용해서 refresh 합니다.
Set the switch to Yes
<!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);
$("select").bind ("slidercreate", function (event)
{
$("select").val ("yes");
$("select").slider ("refresh");
});
</script>
|
|
윈도우가 생성될 때 한번 switch 를 HTML 코드로 생성할 수 도 있습니다. (pagecreate event). 경우 HTML 은 jQuery Mobile에 의해 변환되서 jQuery Mobile 형식에 맞는 switch 를 display 하게 되죠. 이를 위해 <select> element 에서 slider () method 를 call 해야 합니다.
Create the switch after creating the window
<!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>
$("#home").bind ("pagecreate", function (event)
{
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);
$("select").slider ();
$("select").val ("yes");
$("select").slider ("refresh");
});
</script>
|
|
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| HTML element를 jQuery Mobile slider 로 변환하기 (2) | 2012.12.10 |
|---|---|
| 다이나믹하게 slider 생성하기 (0) | 2012.12.09 |
| switch 관련 예제들 (0) | 2012.12.08 |
| Switch 커스터마이징 하기 (0) | 2012.12.08 |
| switch 에서 이벤트 관리하기 (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 버튼 커스터마이징 하기 (0) | 2012.12.02 |