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

최근에 받은 트랙백

글 보관함


Assign and retrieve the value of a slider



Slider already present in the HTML code


slider는 <input> element와 연관이 있죠. 이것을 이용하면 간단하게 slide 바가 만들어 집니다.  축위에 버튼이 놓여질 위치를 정하기 위해서 val (value) method를 사용할 겁니다.  그리고 slider의 값 얻기위해 val () 메소드를 사용할 거구요.


Assign and retrieve 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>

    <span> Indicate the number of rooms: </span><br />

    <input type=range min=1 max=5 />

  </div>

</div>


</body>

</html>


<script>


$("input").live ("slidercreate", function (event)

{

  $("input").val (3);

  $("input").slider ("refresh");

  alert ($("input").val ());

});


</script>


tistory536_01.html


코드에 대해서는 약간의 설명이 필요한데요. 
val (value) 하게 되면 cursor 의 값에 영향을 미치게 됩니다. 사실은 이 메소드는 단지 그 slider 의 <input> input field 에 영향을 미치는 겁니다.slider 그 자체에 영향을 미치는 것은 아닙니다 그래서 slider ("refresh")를 실행해 줘야 하는 겁니다. 이 구문은 slider 가 생성되기 전에는 실행할 수 없기 때문에 slidercreate event를 사용하는 겁니다.



initial <input> element는 두개의 element들로 변환된다는 사실도 기억해 두세요. 하나는 <input> input field와 관계가 있고 그리고 또 하나는 slider 에 관계 된 ui-slider class를 가지고 있는 <div> element 입니다.


original <input> element (HTML 코드에 있는) 는 jQuery Mobile 에 의해서 없어지고 이 두개의 새로운 element 가 대체될 겁니다. 그렇기 때문에 반드시 bind ()가 아니라 live () method를 사용해야 합니다. 그래야 jQuery Mobile 에 의해 생성된 새 <input> element가 slidercreate event를 receive 할 수 있습니다.


또한 그 버튼을 축의 어느 한 지점에 위치하도록 할 수도 있습니다.





Slider dynamically created



이것을 위해서는 위에서 사용했던 val (value) val () methods 들을 여전히 사용합니다. 그리고 slider 의 버튼을 display 하기 위해 slider ("refresh") method를 사용해서 refresh 해야 합니다.


Assign and retrieve 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>

    <span> Indicate the number of rooms: </span><br />

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<input type=range min=1 max=5 />";

$("#home div:jqmData(role=content)").append (html);


$("input").live ("slidercreate", function (event)

{

  $("input").val (3);

  $("input").slider ("refresh");

  alert ($("input").val ());

});


</script>


tistory536_02.html

권영길
경남 도지사 후보
공식 싸이트


이전 예제에서와 같은 이유로 live () instruction을 사용해서 slidercreate event를 통해 화면에 slider 가 생성되기를 기다립니다.


slider 를 생성할 때 이 코드를 이미 포함하고 있도록 만들려면 자바스크립트 코드를 약간 사용해야 합니다. 이 때는 slider () instruction 을 사용합니다.


Assign and retrieve the value of the slider, creating the slider by slider () method


<!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 />

  </div>

</div>


</body>

</html>


<script>


$("#home").bind ("pagecreate", function (event)

{

  var html = "";

  html += "<input min=1 max=5 />";

  $("#home div:jqmData(role=content)").append (html);

  

  $("input").slider ();

  $("input").val (3);

  $("input").slider ("refresh");

  alert ($("input").val ());

});


</script>


tistory536_03.html

이수호
서울시 교육감 후보
홍보 동영상


만약 slider () instruction 이 없다면 slider ("refresh") instruction 은 실행 될 수 없습니다. 왜냐하면 slider 자체가 없으니까 refresh 를 시킬 수 없게 되는거죠. 그리고 <input> element 에는 type="range" attribute가 없는걸 잘 보세요. 만약 이것이 있으면 jQuery Mobile 에 의해 변환되는 element 가 기대하지 않게 동작할 수도 있습니다. (예를 들어 slider 가 두개 나타난다던지 하는....)



반응형

Comment