Examples of manipulation of switches
switch 의 값을 서버로 전달하고 다른 윈도우를 display 합니다.
여기서 서버로 클릭된 스위치의 값을 전달할 겁니다. 그러면 서버는 그 값을 가지고 있는 새 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>
<select data-role=slider>
<option value=no> No </option>
<option value=yes> Yes </option>
</select>
</div>
</div>
</body>
</html>
<script>
var value = $("select").val ();
$("select").bind ("change", function (event)
{
if (value == $(this).val ()) return;
value = $(this).val ();
var data = { };
data["value"] = value;
$.mobile.changePage ("action.php", { data : data } );
});
</script>
switch를 클릭할 때마다 서버를 call 해서 스위치의 값을 가지고 있는 새 window 를 보여줍니다. 초기 단계에 그 값이 이전것과 같은 것인지 아닌지를 체크합니다.
action.php file
<?
$value = $_REQUEST["value"];
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />
</head>
<body>
<div data-role=page id=win2 data-add-back-btn=true>
<div data-role=header>
<h1>Window 2</h1>
</div>
<div data-role=content>
<p> Switch value: <?= $value ?> </p>
</div>
</div>
</body>
</html>
스위치를 클릭하면 아래와 같은 화면을 보실 겁니다.
action20.php
tistory518_01.html정보를 전달할 때 submit button 사용하기
스위치를 클릭할 때마다 정보를 전달하는 것이 아니라 사용자가 Submit button 을 눌렀을 때 이 동작이 일어나도록 하겠습니다.
<!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>
<form action=action.php>
<span> Would you like an apartment: </span>
<select data-role=slider name=switch>
<option value=no> No </option>
<option value=yes> Yes </option>
</select>
<input type=submit value=OK>
</form>
</div>
</div>
</body>
</html>
<script>
</script>
OK 버튼을 누르면 스위치가 form 에 insert 됩니다. 그리고 action.php 파일을 call 하죠. 자바스크립트 부분은 없습니다. 모든 프로세스는 jQuery Mobile 에 의해서 진행됩니다.
이전 예제랑 비교해서 반드시 해야 할 게 있습니다. 바로 <select> element
에
name attribute
를 명시해아 하는 겁니다. 이 attribute와 그 값이 서버로 전달이 될 것이기 떄문이죠.
action.php file
<?
$switch = $_REQUEST["switch"];
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />
</head>
<body>
<div data-role=page id=win2 data-add-back-btn=true>
<div data-role=header>
<h1>Window 2</h1>
</div>
<div data-role=content>
<p> Switch value: <?= $switch ?> </p>
</div>
</div>
</body>
</html>
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| slider 의 이벤트 관리하기 (0) | 2012.12.15 |
|---|---|
| Slider 에 값을 할당하거나 받아오기 (0) | 2012.12.13 |
| Ajax 로 slider 삽입하기 (0) | 2012.12.11 |
| HTML element를 jQuery Mobile slider 로 변환하기 (2) | 2012.12.10 |
| 다이나믹하게 slider 생성하기 (0) | 2012.12.09 |
| 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 |