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

최근에 받은 트랙백

글 보관함


Assign and retrieve the value of a switch



Switch already present in the HTML code


switch는  single <select> element 입니다. 이런 elements 들을 관리하는 것은 val (value) method를 사용합니다. selection list 에 값을 할당하거나  val () method를 사용해서 현재 select 된 값을 retrieve 하게 되는거죠. 두 경우 모두 <option> element 의 value attribute 에 정의된 값입니다.


Set the switch to Yes


$("select").val ("yes");


Retrieve the current value of the switch


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


이 메소드를 사용해서 프로그램이 시작할 때 switch 를 Yes로 만들어 보죠.


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

    <select data-role=slider>

      <option value=no> No </option>

      <option value=yes> Yes </option>

    </select>

  </div>

</div>


</body>

</html>


<script>


$("select").val ("yes");

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


</script>



tistory505_01.html


Switch dynamically created


val (value) 와 val () methods 들도 이런 경우 사용할 수 있습니다. 아마 이 경우 값이 바뀐 후에도 switch display 가 refresh 되지 않아서 값이 바뀌지 않을 겁니다. 이럴 경우 slider ("refresh") method를 사용해서 refresh 합니다.


Set the switch to Yes


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


$("select").bind ("slidercreate", function (event)

{

  $("select").val ("yes");

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

});


</script>



tistory505_02.html






윈도우가 생성될 때 한번 switch 를 HTML 코드로 생성할 수 도 있습니다.  (pagecreate event). 경우 HTML 은 jQuery Mobile에 의해 변환되서 jQuery Mobile 형식에 맞는 switch 를 display 하게 되죠. 이를 위해 <select> element 에서 slider () method 를 call 해야 합니다.


Create the switch after creating the window


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


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

{

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

  

  $("select").slider ();

  $("select").val ("yes");

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

});


</script>



tistory505_03.html






반응형

Comment