HTML 이나 JavaScript 를 직접 사용해서 switch 를 만드는 것 보다 Server 쪽에 Ajax를 요청하고 응답을 받아서 만들 수 있습니다.
Create a switch by Ajax
<!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>
$.ajax (
{
url : "action.php",
complete : function (xhr, result)
{
if (result != "success") return;
var response = xhr.responseText;
$("#home div:jqmData(role=content)").append (response);
$("select").slider ();
}
});
</script>
slider
() method는 switch 와 관련된 <select>
element 에서 사용되고 서버로부터 switch를 display 할 HTML 코드를 받아서 HTML 코드를 변환시켜주는 역할을 합니다. 만약 이 메소드가 call 되지 않으면 simple selection list (<select>
element 에 해당하는)가 display 됩니다.
action.php file
<?
$html = "";
$html .= "<select data-role=slider>";
$html .= "<option value=no> No </option>";
$html .= "<option value=yes> Yes </option>";
$html .= "</select>";
echo utf8_encode ($html);
?>
|
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
다이나믹하게 slider 생성하기 (0) | 2012.12.09 |
---|---|
switch 관련 예제들 (0) | 2012.12.08 |
Switch 커스터마이징 하기 (0) | 2012.12.08 |
switch 에서 이벤트 관리하기 (0) | 2012.12.05 |
switch 값 할당하거나 retrieve 하기 (0) | 2012.12.05 |
HTML 을 jQuery Mobile switch로 바꾸기 (0) | 2012.12.04 |
다이나믹 하게 switch 만들기 (0) | 2012.12.04 |
Radio 버튼 생성 예제들... (0) | 2012.12.03 |
radio 버튼 커스터마이징 하기 (0) | 2012.12.02 |
Radio button 에서 이벤트 관리하기 (0) | 2012.12.01 |