Examples of manipulation of sliders
Transmit the slider's value to the server
slider 의 값을 서버로 전달하는 것은 이전 글에서 봤듯이 change event에서 구현할 수 있습니다. 이 이벤트는 축에서 버튼을 움직일 때마다 무수히 많이 발생하게 됩니다 서버에 수없이 현재 값을 전달하게 되겠죠... 해결책은 뭘까요?
하나는 축에서 버튼의 움직임이 끝났을 때에만 즉 손가락이나 마우스가 slider에서 떠났을 때에만 서버로 그 값을 전달하는 방법이 있겠고 이렇게 change event가 아닌 다른 이벤트를 사용하는 방법이 있겠죠.
Transmit
the value of the slider to the server 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> Indicate the number of rooms: </span><br />
<input type=range min=1 max=100 /><br />
</div>
</body>
</html>
<script>
$("input").live ("slidercreate", function ()
{
$(".ui-slider").bind ("vmouseup", function (event)
{
var value = $("input").val ();
$.ajax (
{
url : "action.php",
data : { value : value },
complete : function (xhr, result)
{
if (result != "success") return;
var response = xhr.responseText;
$("#home div:jqmData(role=content)").append (response);
}
});
});
});
</script>
change event를 사용하는 대신에 슬라이더에서 손가락이 떠날때 발생하는 mouseup
event를 사용했습니다.
action.php
file
<?
$value = $_REQUEST["value"];
$html = "";
$html .= "Value: <span id=txt>$value</span><br />";
echo utf8_encode ($html);
?>
아래는 버튼을 몇번 옮기고 난 후의 화면입니다.
Use a submit button to transmit information
이제 서버에 slider이 값을 전달하기 위해 Submit button을 사용해 보겠습니다. slider의 값을 표시하는 새창에는 back 버튼을 표시하겠습니다.
Use
a submit button to transmit the value of the slider
<!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> Indicate the number of rooms: </span><br />
<input type=range min=1 max=100 name=slider /><br />
<input type=submit value=OK />
</form>
</div>
</div>
</body>
</html>
slider와 관계가 있는 <input>
element 에는 이제 name
attribute가 있는데요 이것은 서버로 슬라이더의 값을 전달할 때 사용될 겁니다.
action.php
file
<?
$slider = $_REQUEST["slider"];
?>
<!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> Value of slider : <?= $slider ?> </p>
</div>
</div>
</body>
</html>
Change the opacity of an image with a slider
We
would like to modify the opacity of an image using a slider. The
minimum value is 0 (opacity of 0), the max is 100 (opacity of 1).
Note that we do not change the value of the slider from 0 to 1,
because it allows only two possible values for the following: 0 or 1.
이제 슬라이더를 이용해서 이미지의 투명도를 조절해 보겠습니다. 미니멈 값은 0이고 맥시멈 값은 100 입니다. 0에서 1이 아니라는 것을 유념해 주세요. 왜냐하면 그렇게 하면 오직 두개의 값만 표시될테니까요.
그런데 투명도의 범위는 0에서 1이니까 이것을 현재 값에서 100으로 나누겠습니다.
Use
a slider for varying the opacity of an image
<!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> Change the opacity of the image: </span><br />
<input type=range min=0 max=100 value=100 /><br /><br /><br />
<img src=images/jquery.jpg height=50% />
</div>
</div>
</body>
</html>
<script>
$("input").live ("slidercreate", function ()
{
$("input").bind ("change", function (event)
{
$("img").css ( { opacity : $("input").val () / 100 } );
});
});
</script>
그 나는 값이 0.29가 되면 아래와 같이 표시될 겁니다.
tistory560_01.html
action26.php
scroll-to-top.zip
