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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형

switch 를 만드는 것은 주로  jQuery method들을 이용해서 만듭니다.
data-role="slider" attribute 가 있는 <select> element를 사용하면 switch 가 됩니다. 이것을 관리하기 위해서 jQuery Mobile에서는 slider () method를 제공합니다. switch는 standard slider component와 연결 돼 있습니다.



Dynamically create a switch


data-role="slider" attribute가 있는 <select> element 를 사용해서 switch 를 만듭니다. switch 의 두개 값을 나타내기 위해 두개의  <option> elements도 사용합니다.


Dynamic creation of a switch


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


var html = "";

html += "<select data-role=slider>";

html +=   "<option value=no> No </option>";

html +=   "<option value=yes> Yes </option>";

html += "</select>";


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


</script>






tistory502_01.html



반응형