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

최근에 받은 트랙백

글 보관함


slider를 만드는 것은 jQuery methods 들을 사용해서 이뤄 집니다.
slider () method 는 슬라이더를 사용할 수 있도록 하는 jQuery Mobile 에 추가 된 메소드 입니다. 슬라이더는 표slider component 와 연계 돼 있습니다.




Dynamically create a slider



slider는 <input> element에 type attribute "range"로 넣어서 생성합니다.  data-role="slider" or data-type="range" attributes 들도 사용할 수 있습니다. min and max attributes 들은 슬라이더의 최소값과 최대값을 세팅하는 경우에 필수로 들어가야 하는 항목들 입니다.


Dynamic creation of a 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);


</script>






tistory521_01.html



jQuery Mobile 에서 slider 는 축을 따라서 버튼을 움직일 때의 슬라이더 값을 표시하는 input field 와 항상 같이 있다는 점을 유념해 주세요. 이 input field 를 표시하지 않을 수도 있습니다.

이 부분은 다음에 다룰께요.




반응형

Comment