반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

slider 생성 관련 예제들..

2012. 12. 15. 05:54 | Posted by 솔웅


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);
?>



action23.php

tistory542_01.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>


action24.php


tistory542_02.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>


tistory542_03.html



그 나는 값이 0.29가 되면 아래와 같이 표시될 겁니다.      




반응형

Comment