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

최근에 받은 트랙백

글 보관함

slider 의 이벤트 관리하기

2012. 12. 14. 11:56 | Posted by 솔웅


Manage events on sliders




slider 는 .<input> input field 와 관련이 있죠. 그래서 slider에 어떤 변화가 오면 input field에 change event가 발생 됩니다.


것을 확인하기 위해 화면의 <span> element 에 slider 의 값을 display 해 보겠습니다.



Using the slider change events


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

    Value : <span id=txt></span>  </div>

</div>


</body>

</html>


<script>


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

{

  $("input").bind ("change", function (event)

  {

    $("#txt").text ($(this).val ());

  });

});


</script>


tistory540_01.html




여기서 중요한 점은 slider 의 change events 를 살펴보는 것은 그 slider 가 화면에 제대로 생성됐을 때만이 가능하다는 겁니다. 다시말해 오리지널 HTML 코드가 jQuery Mobile 에 의해 완전하게 변화된 이후라야 된다는 거죠. 그래서 우리는 slidercreate event 에change event 를 살펴보도록 코딩을 한 겁니다. 그렇지 않으면 제대로 작동하지 않을 겁니다.





위의 방법과는 다른 방법을 사용할 수도 있습니다. slider 가 생성되 있지 않아도 되는 방법이죠.  change event가 발생했을 때 bind () method 대신에 live () method를 사용하는 겁니다. 그러면 jQuery Mobile 이 <input> field 를 생성할 때에도 live () method 에 의해서 그 변화가 observed 될 수 있습니다.  아래 예제를 보시겠습니다.


Observe the change event on the slider without waiting for its creation


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

    Value : <span id=txt></span>  </div>

</div>


</body>

</html>


<script>


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

{

  $("#txt").text ($(this).val ());

});


</script>



tistory540_02.html


반응형

Comment


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

jQuery Conference Asia 2012 동영상

2012. 12. 11. 19:13 | Posted by 솔웅


지난달 12일에 'jQuery Conference Asia 2012' 행사가 인크로스 주최로 열렸었습니다.


인크로스에서 초대권을 협찬해 주셔서 이 블로그 방문자 분 중 한분을 추첨해서 전달해 드렸는데요.


그 행사 동영상이 Vimeo 에 올라 왔습니다.


관심 있으신 분들은 이 동영상을 보시면 많은 도움이 될 겁니다.




jQuery Conference Asia 2012 - Session 1 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 2 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 3 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 4 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 5 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 7 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 8 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 9 from DaVinci on Vimeo.


jQuery Conference Asia 2012 - Session 10 from DaVinci on Vimeo.


jQuery Conference Asia 2012 from Lanio on Vimeo.


반응형

Comment

Ajax 로 slider 삽입하기

2012. 12. 11. 03:48 | Posted by 솔웅


Insert a slider by Ajax


Ajax를 통해서 slider 를 만들  HTML 코드를 retrieve 해서 기존 HTML 페이지에 넣예제를 보겠습니다.


Insert a slider 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 />

  </div>

</div>


</body>

</html>


<script>


$.ajax (

  url : "action.php", 

  complete : function (xhr, result)

  {

    if (result != "success") return;

    var response = xhr.responseText;

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

    

    $("input").slider ();

    $("input").textinput ();

  }

});  


</script>



보시면 slider () textinput () methods 가 사용됐습니다.

  • slider () method는 서버로 부터 받은 <input> element 를 jQuery Mobile convention에 맞는 slider 로 변환합니다. 만약 이 메소드를 사용하지 않으면 <input> element는 일반적인 input field 로 표시될 겁니다.

  • textinput () method는 slider 의 왼쪽에 jQuery Mobile style 의 input field 를 표시합니다. 이 메소드를 사용하지 않으면 jQuery Mobile 스타일이 아닌 input field 가 표시될 겁니다.



action.php file


<?
$html = "";
$html .= "<input type=range min=1 max=5 />";
echo utf8_encode ($html);
?>


slider () textinput ()메소드의 순서는 상관 없습니다. 이 두 메소드는 trigger ("create") method 를 call 하는걸로 대체할 수 있습니다.


Using the create event to create the slider by Ajax


$.ajax (


  url : "action.php", 

  complete : function (xhr, result)

  {

    if (result != "success") return;

    var response = xhr.responseText;

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

    

    $("#home").trigger ("create");

  }

});

>

action22.php

tistory528_01.html




반응형

Comment


Turning an HTML element into a jQuery Mobile slider




지난 글에서 다룬 예제를 Firebug로 보겠습니다. jQuery Mobile 이 변환시킨 코드입니다.





<input> element 에 data-type="range" attribute 가 있습니다. 그리고
type attribute는 "number"입니다. 이것은 slider 전에 있는 input field 와 관계가 있습니다. <div> element 에는 ui-slider class 가 있고 그 안에
ui-slider-handle class 가 포함돼 있는 <a> link 가 있습니다. 이것은 slider 의 축을 오가는 버튼을 꾸며 줍니다.


반응형

Comment

  1. ㅎㅎㅎ 어떤 이유라도,,, 투표율은 많이 늘어야죠...

    • 솔웅 2012.12.11 18:27 신고

      예 재외국민 투표율도 70%가 넘었네요.
      한국 본토에서는 80% 가 넘을 수 있겠죠? ^^


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

switch 관련 예제들

2012. 12. 7. 12:18 | Posted by 솔웅


Examples of manipulation of switches




switch 의 값을 서버로 전달하고 다른 윈도우를 display 합니다.

여기서 서버로 클릭된 스위치의 값을 전달할 겁니다. 그러면 서버는 그 값을 가지고 있는 새 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>
<select data-role=slider>
<option value=no> No </option>
<option value=yes> Yes </option>
</select>
</div>
</div>

</body>
</html>

<script>

var value = $("select").val ();
$("select").bind ("change", function (event)
{
if (value == $(this).val ()) return;
value = $(this).val ();

var data = { };
data["value"] = value;

$.mobile.changePage ("action.php", { data : data } );
});

</script>




switch를 클릭할 때마다 서버를 call 해서 스위치의 값을 가지고 있는 새 window 를 보여줍니다. 초기 단계에 그 값이 이전것과 같은 것인지 아닌지를 체크합니다. 


action.php file


<?
$value = $_REQUEST["value"];
?>

<!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> Switch value: <?= $value ?> </p>
</div>
</div>
</body>

</html>


   

스위치를 클릭하면 아래와 같은 화면을 보실 겁니다.





action20.php

tistory518_01.html



정보를 전달할 때 submit button 사용하기

스위치를 클릭할 때마다 정보를 전달하는 것이 아니라 사용자가 Submit button 을 눌렀을 때 이 동작이 일어나도록 하겠습니다.

<!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> Would you like an apartment: </span>
<select data-role=slider name=switch>
<option value=no> No </option>
<option value=yes> Yes </option>
</select>
<input type=submit value=OK>
</form>
</div>
</div>

</body>
</html>

<script>

</script>


 

OK 버튼을 누르면 스위치가 form 에 insert 됩니다. 그리고 action.php 파일을 call 하죠. 자바스크립트 부분은 없습니다. 모든 프로세스는 jQuery Mobile 에 의해서 진행됩니다.

이전 예제랑 비교해서 반드시 해야 할 게 있습니다. 바로  <select> element  에  name attribute 를 명시해아 하는 겁니다. 이 attribute와 그 값이 서버로 전달이 될 것이기 떄문이죠.

action.php file 


<?
$switch = $_REQUEST["switch"];
?>

<!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> Switch value: <?= $switch ?> </p>
</div>
</div>
</body>

</html>


action21.php

tistory518_02.html



반응형

Comment

Switch 커스터마이징 하기

2012. 12. 7. 11:54 | Posted by 솔웅



 

switch는 jQuery Mobile 에 의해 제공되는 CSS class들을 이용해서 customizing 할 수 있습니다. 우리는 아래 DOM tree 에 있는 CSS 들을 수정해서  switch Yes / No: 를 display 해 보겠습니다.




switch를 customizing 하기 위해 위 CSS 클래스들 중 일부를 사용하겠습니다. 특히  ui-slider class 는 switch 의 width 와 관련 일반적인 appearance 를 관리합니다.  ui-slider-label class 는 switch 에서 텍스트를 display 하기 위해 사용됩니다. 이 클래스가   ui-btn-active 와 같이 어울리면 switch 가 ON 인 상태에서의 appearance 를 관리합니다. 마지막으로  ui-slider-handle class 는 switch 의 cursor 를 움직이는 것과 관련 있습니다.


Use CSS classes to style the 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>

  

  <style type=text/css>

    span.ui-slider-label {

      color : red;

      font-style : italic;

    }

    span.ui-slider-label.ui-btn-active {

      color : gainsboro;

    }

    .ui-slider-handle {

      background : grey;

    }

    .ui-slider {

      width : 50% !important; 

    }

  </style>

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



tistory517_01.html

ui-slider class width property를 할 때   !important 의 을 잘 요. 이것은 jQuery Mobile 이 CSS 안에서 이 프로퍼티를 redefine 하기 때문에 필요합니다. 만약  !important directive 가 있지 않다면 우리가 만든  CSS가 정의 되지 않을 겁니다.






반응형

Comment


Manage events on switches




change event는 switch 의 값이 바뀌면 이에 대해 알려줄 수 있도록 하는 기능이 있습니다. 이 이벤트는 스위치가 클릭 됐을 때 일어납니다. switch 의 왼쪽을 클릭했는지 오른쪽을 클릭했는지 상관없change event가 일어납니다.

주의 : jQuery Mobile 의 버전에 따라 switch 에 한번 클릭했는데 두번 change events 가 발생 할 수도 있습니다. switch 의 어느 부분을 클릭했느냐에 따라 다른데요. 이 문제를 해결하시려면 아래 예제를 잘 봐 주세요.


Retrieve the new value of the switch when clicked


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


아래 예제는 change event 를 사용해서 switch 를 클릭했을 때 이것을 어떻게 처리할지에 대한 예제 파일입니다. switch를 클릭할 때마다 그 값이 아래에 출력됩니다.


Manage the change event 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 id=txt></div>

  </div>

</div>


</body>

</html>


<script>


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

{

  $("#txt").append ($(this).val () + ", ");

});


</script>






tistory506_03.html




반응형

Comment


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