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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

jQuery Mobile/JQM Tutorial

다이나믹하게 radio button 생성하기

2012. 11. 28. 05:17 | Posted by 솔웅


반응형

jQuery Mobile에서 radio button을 다루는 것은 체크박스를 다루는 것과 아주 비슷합니다. Radio button은 <input> element에 type="radio" attribute를 넣어서 사용합니다.  jQuery Mobile 에 의해 추가된 checkboxradio () method 는 radio button을  manage 합니다.  radio button은 checkboxradio standard component 를 사용합니다.



Dynamically create radio buttons


<input> element에 type="radio" attribute 를 넣으면 radio 버튼이 생성됩니다. 여기서 name attribute 는 반드시 들어가야 할 항목 입니다. 이
name attributes 가 같아야지 하나의 그룹으로 묶을 수 있습니다.  이 <input> element 에는 radio 버튼에 대한 text를 가지고 있는 <label> element 가 필요하고 그 <label> element 안에는 for attribute 가 있어서 고유의 id attribute 를 정해 줍니다.

이 single set 로 된 그룹 radio 버튼들은 <div> element 안에 있고 그 <div> element 에는 data-role="controlgroup" attribute 가 있습니다.



Creating dynamic radio buttons



<!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> Choose the number of rooms: </span>

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<div data-role=controlgroup>";

html +=   "<label for=id1> 1 </label>";

html +=   "<input type=radio id=id1 name=rooms />";

html +=   "<label for=id2> 2 </label>";

html +=   "<input type=radio id=id2 name=rooms />";

html +=   "<label for=id3> 3 </label>";

html +=   "<input type=radio id=id3 name=rooms />";

html +=   "<label for=id4> 4 </label>";

html +=   "<input type=radio id=id4 name=rooms />";

html +=   "<label for=id5> 5 </label>";

html +=   "<input type=radio id=id5 name=rooms />";

html += "</div>";


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


</script>

tistory490_01.html








반응형
저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

Radio button 에서 이벤트 관리하기  (0) 2012.12.01
기존 리스트에 radio button 추가하기/지우기  (0) 2012.11.30
radio 버튼의 값 할당하거나 retrieve 하기  (7) 2012.11.29
Ajax 로 radio 버튼 insert 하기  (1) 2012.11.28
jQuery Mobile radio button 으로 HTML element 바꾸기  (1) 2012.11.28
체크 박스 생성 예제들  (0) 2012.11.27
체크박스 customize 하기  (5) 2012.11.27
체크박스에서 이벤트 관리하기  (0) 2012.11.26
리스트에 체크박스 삽입/삭제 하기  (0) 2012.11.25
체크박스에 값 할당/retrieve 하기  (0) 2012.11.24
jQuery Mobile/JQM Tutorial

체크 박스 생성 예제들

2012. 11. 27. 21:55 | Posted by 솔웅


반응형
Examples of manipulation of checkboxes



Transmit all checkboxes values on a server and then display another window


체크박스 중에 한가지라도 changed 되면 체크박스의 값들을 서버로 전달하는 예제를 만들겠습니다. 서버측에서는 값을 받으면 각 체크박스의 상태정보가 담긴 또 다른 window 를 보낼 겁니다.


Transmit the checkboxes values ​​and display a new 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> Choose an apartment: </span>

    <div data-role=controlgroup>

      <label for=id1> 1 bedroom </label>

      <input type=checkbox id=id1 name=p1 />

      <label for=id2> 2 bedrooms </label>

      <input type=checkbox id=id2 name=p2 />

      <label for=id3> 3 bedrooms </label>

      <input type=checkbox id=id3 name=p3 />

      <label for=id4> 4 bedrooms </label>

      <input type=checkbox id=id4 name=p4 />

      <label for=id5> 5 bedrooms </label>

      <input type=checkbox id=id5 name=p5 />

    </div>

  </div>

</div>


</body>

</html>


<script>


$(":checkbox").bind ("change", function (event)

{

  var data = { };

  $(":checkbox").each (function (index)

  {

    data[this.name] = $(this).attr ("checked");

  });

  

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

});


</script>



체크박스를 클릭할 때마다 서버로 call 하게 됩니다. 그러면 서버에서 보내 준 화면을 보게 되는데 그곳에는 체크박스가 selected 됐는지 안 됐는지에 대한 정보가 있습니다.

여기서 우리는 필드 이름이 포함된 data property를 사용했고 값들을 transmit 했습니다.
Eg p1, set to "true" (or "checked") if checked, or "false" (or "undefined") if not checked.


action.php file


<?
$p1 = $_REQUEST["p1"];
$p2 = $_REQUEST["p2"];
$p3 = $_REQUEST["p3"];
$p4 = $_REQUEST["p4"];
$p5 = $_REQUEST["p5"];

function display_selected ($p)
{
   if ($p == "true" or $p == "checked") 
     echo ("checked");
  else
     echo ("unchecked");
}
?>

<!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> 1 bedroom : <?= display_selected ($p1) ?> </p>
    <p> 2 bedrooms: <?= display_selected ($p2) ?> </p>
    <p> 3 bedrooms : <?= display_selected ($p3) ?> </p>
    <p> 4 bedrooms : <?= display_selected ($p4) ?> </p>
    <p> 5 bedrooms : <?= display_selected ($p5) ?> </p>
  </div>
</div>
</body>

</html>

action14.php


tistory489_01.html


몇번 체크박스를 선택하고 나면 아래 그림처럼 될 겁니다.





Use a submit button to transmit information


체크박스 중 한가지라도 change 했을 때 그 값을 전달하는게 아니라 submit button을 눌렀을 때 그 값을 전달하게도 만들 수 있습니다.


Send the checkboxes when you click on the 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> Choose an apartment: </span>

      <div data-role=controlgroup>

        <label for=id1> 1 bedroom </label>

        <input type=checkbox id=id1 name=p1 />

        <label for=id2> 2 bedrooms </label>

        <input type=checkbox id=id2 name=p2 />

        <label for=id3> 3 bedrooms </label>

        <input type=checkbox id=id3 name=p3 />

        <label for=id4> 4 bedrooms </label>

        <input type=checkbox id=id4 name=p4 />

        <label for=id5> 5 bedrooms </label>

        <input type=checkbox id=id5 name=p5 />

      </div>

      <input type=submit value=OK>

    </form>

  </div>

</div>


</body>

</html>



form 안에 OK button 과 checkbox들이 있습니다. 그리고 <form action=action.php>이 있어서 버튼을 누르면 action.php를 call 하게 될 겁니다.

이 action.php는 이전에 사용했던 php 와 거의 동일합니다.


action.php file


<?
$p1 = $_REQUEST["p1"];
$p2 = $_REQUEST["p2"];
$p3 = $_REQUEST["p3"];
$p4 = $_REQUEST["p4"];
$p5 = $_REQUEST["p5"];

function display_selected ($p)
{
   if ($p == "on") 
     echo ("checked");
  else
     echo ("unchecked");
}
?>

<!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> 1 bedroom : <?= display_selected ($p1) ?> </p>
    <p> 2 bedrooms: <?= display_selected ($p2) ?> </p>
    <p> 3 bedrooms : <?= display_selected ($p3) ?> </p>
    <p> 4 bedrooms : <?= display_selected ($p4) ?> </p>
    <p> 5 bedrooms : <?= display_selected ($p5) ?> </p>
  </div>
</div>
</body>

</html>

action15.php


tistory489_02.html


다른 점은 체크박스가 selected 됐는지 안 됐는지를 확인 하는 부분입니다. 여기서는 value 가 "on"인지의 여부를 봅니다. "on"이면 체크 된 상황이죠. "on"이 아니면 체크된 상황이 아니구요.



반응형
저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

기존 리스트에 radio button 추가하기/지우기  (0) 2012.11.30
radio 버튼의 값 할당하거나 retrieve 하기  (7) 2012.11.29
Ajax 로 radio 버튼 insert 하기  (1) 2012.11.28
jQuery Mobile radio button 으로 HTML element 바꾸기  (1) 2012.11.28
다이나믹하게 radio button 생성하기  (0) 2012.11.28
체크박스 customize 하기  (5) 2012.11.27
체크박스에서 이벤트 관리하기  (0) 2012.11.26
리스트에 체크박스 삽입/삭제 하기  (0) 2012.11.25
체크박스에 값 할당/retrieve 하기  (0) 2012.11.24
Ajax 로 checkbox 만들어 넣기  (0) 2012.11.21
jQuery Mobile/JQM Tutorial

체크박스 customize 하기

2012. 11. 27. 06:29 | Posted by 솔웅


반응형

Customize checkboxes



이 전 글에서 어떻게 jQuery Mobile 이 오리지널 HTML 코드를 jQuery Mobile 형식에 맞는 HTML 코드로 바꾸는지에 대해 살펴 보았습니다. 아래 예제에서는 체크박스의 display 를 바꾸기 위해 jQuery Mobile 에서 사용하는 CSS 클래스들을 수정해 보겠습니다.


Styling the checkboxes


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

    .ui-controlgroup .ui-checkbox label {

      font-size : 25px;

      font-style : italic;

    }

    .ui-checkbox .ui-btn {

      text-align : right;

    }

  </style>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <span> Choose an apartment: </span>

    <div data-role=controlgroup>

      <label for=id1> 1 bedroom </label>

      <input type=checkbox id=id1 name=p1 />

      <label for=id2> 2 bedrooms </label>

      <input type=checkbox id=id2 name=p2 />

      <label for=id3> 3 bedrooms </label>

      <input type=checkbox id=id3 name=p3 />

      <label for=id4> 4 bedrooms </label>

      <input type=checkbox id=id4 name=p4 />

      <label for=id5> 5 bedrooms </label>

      <input type=checkbox id=id5 name=p5 />

    </div>

  </div>

</div>


</body>

</html>

tistory487_01.html


반응형
저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

radio 버튼의 값 할당하거나 retrieve 하기  (7) 2012.11.29
Ajax 로 radio 버튼 insert 하기  (1) 2012.11.28
jQuery Mobile radio button 으로 HTML element 바꾸기  (1) 2012.11.28
다이나믹하게 radio button 생성하기  (0) 2012.11.28
체크 박스 생성 예제들  (0) 2012.11.27
체크박스에서 이벤트 관리하기  (0) 2012.11.26
리스트에 체크박스 삽입/삭제 하기  (0) 2012.11.25
체크박스에 값 할당/retrieve 하기  (0) 2012.11.24
Ajax 로 checkbox 만들어 넣기  (0) 2012.11.21
jQuery Mobile checkbox로 HTML element 변환하기  (0) 2012.11.20
jQuery Mobile/JQM Tutorial

체크박스에서 이벤트 관리하기

2012. 11. 26. 22:04 | Posted by 솔웅


반응형
Manage events on checkboxes



jQuery Mobile 은 checkbox들의 change event 를 관찰하고 있습니다. checkbox는 두가지 state 를 가지고 있습니다. (checked or not) 이 이벤트는 사용자가 checkbox를 click 했을 때 나타납니다. click event 이벤트도 있습니다. 하지만 이 click event 이벤트는 아래에서 사용되지 않습니다.


Using the change event on checkboxes


<!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> Choose an apartment: </span>

    <div data-role=controlgroup>

      <label for=id1> 1 bedroom </label>

      <input type=checkbox id=id1 name=p1 />

      <label for=id2> 2 bedrooms </label>

      <input type=checkbox id=id2 name=p2 />

      <label for=id3> 3 bedrooms </label>

      <input type=checkbox id=id3 name=p3 />

      <label for=id4> 4 bedrooms </label>

      <input type=checkbox id=id4 name=p4 />

      <label for=id5> 5 bedrooms </label>

      <input type=checkbox id=id5 name=p5 />

    </div>

  </div>

</div>


</body>

</html>


<script>


$(":checkbox").bind ("change", function (event)

{

  alert ($(this).attr ("checked"));

});


</script>

tistory486_01.html





왜 click event는 직접적으로 사용되지 않을까요?  jQuery Mobile 은 original HTML code를 transform 하는 것을 기억하세요. 그러니까 <input> element가 아니라  ui-checkbox CSS class가 있는 <div> element에서 click event를 receive 하게 됩니다. 그래서 <div> element에서 일어나는 클릭은 <input> element 에서 change event를 유발합니다. 그리고 이 change event를 사용하구요.


반응형
저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

Ajax 로 radio 버튼 insert 하기  (1) 2012.11.28
jQuery Mobile radio button 으로 HTML element 바꾸기  (1) 2012.11.28
다이나믹하게 radio button 생성하기  (0) 2012.11.28
체크 박스 생성 예제들  (0) 2012.11.27
체크박스 customize 하기  (5) 2012.11.27
리스트에 체크박스 삽입/삭제 하기  (0) 2012.11.25
체크박스에 값 할당/retrieve 하기  (0) 2012.11.24
Ajax 로 checkbox 만들어 넣기  (0) 2012.11.21
jQuery Mobile checkbox로 HTML element 변환하기  (0) 2012.11.20
checkbox 다이나믹하게 생성하기  (0) 2012.11.19
jQuery Mobile/JQM Tutorial

리스트에 체크박스 삽입/삭제 하기

2012. 11. 25. 21:20 | Posted by 솔웅


반응형
Insert and delete a checkbox in an existing list



checkbox 추가하고 제거하는데 jQuery 의 standard methods 를 사용합니다.


Insertion and removal of checkboxes


<!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> Choose an apartment: </span>

    <div data-role=controlgroup>

      <label for=id1> 1 bedroom </label>

      <input type=checkbox id=id1 name=p1 />

      <label for=id2> 2 bedrooms </label>

      <input type=checkbox id=id2 name=p2 />

      <label for=id3> 3 bedrooms </label>

      <input type=checkbox id=id3 name=p3 />

      <label for=id4> 4 bedrooms </label>

      <input type=checkbox id=id4 name=p4 />

      <label for=id5> 5 bedrooms </label>

      <input type=checkbox id=id5 name=p5 />

    </div>

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<label for=id0> Studio </label>";

html += "<input type=checkbox id=id0 name=p0 />";


$("input#id1").after (html);

$("input#id1, label[for=id1]").remove ();


</script>

tistory485_01.html



위와 같이 만들었는데요. 이게 항상 제대로 작동한다는 보장은 없습니다. 여기서는 제대로 작동될 겁니다. 왜냐하면 여기서는 check box가 추가되고 제거될 떄 jQuery Mobile 에 의해서 HTML이 변환되지 않았으니까요. HTML 이 jQuery Mobile 에 의해 변환 될 때가 있을 겁니다. 이럴 때는 다른 방법을 사용해야 이 방법을 구현할 수 있습니다.


Insertion and removal of checkboxes in a window already created


<!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> Choose an apartment: </span>

    <div data-role=controlgroup>

      <label for=id1> 1 bedroom </label>

      <input type=checkbox id=id1 name=p1 />

      <label for=id2> 2 bedrooms </label>

      <input type=checkbox id=id2 name=p2 />

      <label for=id3> 3 bedrooms </label>

      <input type=checkbox id=id3 name=p3 />

      <label for=id4> 4 bedrooms </label>

      <input type=checkbox id=id4 name=p4 />

      <label for=id5> 5 bedrooms </label>

      <input type=checkbox id=id5 name=p5 />

    </div>

  </div>

</div>


</body>

</html>


<script>


$("#id1").bind ("checkboxradiocreate", function (event)

{

  var html = "";

  html += "<label for=id0> Studio </label>";

  html += "<input type=checkbox id=id0 name=p0 />";

  

  $(this).parent ("div.ui-checkbox").after (html);   // insertion

  $(this).parent ("div.ui-checkbox").remove ();      // suppression

  $("#id0").checkboxradio ();

  $("div:jqmData(role=controlgroup)").controlgroup ();

});


</script>

tistory485_02.html



첫번째 체크박스를 만들 때 우리는 checkboxradiocreate event 에 의해 생성되는 것을 기다려야 합니다. jQuery Mobile 에 의해 HTML 코드가 이미 변환되었고 이 체크박스는 이제 ui-checkbox CSS class 가 있는 <div> element 로 그룹화  됩니다. 체크박스를 삽입할 때는 삽입되는 엘리먼트에 checkboxradio () method 를 사용해야 합니다. 그렇게 해서 HTML 로 convert 해야 되는거죠. 또한 삽입되는 엘리먼트는 모든 체크박스들이 그룹화시키는 <div> element 와 맞는 structure 를 가져야 합니다. 그래서 <div> element 에 controlgroup () method 를 사용하는 겁니다.


새 체크박스를 생성하기위해 controlgroup () method를 사용할 수도 있습니다. 그리고 refresh 하시면 됩니다.

그렇게 하기 위해 아래 코드 대신


Using standard methods on the components (first way)


$("#id0").checkboxradio ();
$("div:jqmData(role=controlgroup)").controlgroup ();



아래 코드를 사용하시면 됩니다.


Use the create event on the window (2nd way)


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


반응형
저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

jQuery Mobile radio button 으로 HTML element 바꾸기  (1) 2012.11.28
다이나믹하게 radio button 생성하기  (0) 2012.11.28
체크 박스 생성 예제들  (0) 2012.11.27
체크박스 customize 하기  (5) 2012.11.27
체크박스에서 이벤트 관리하기  (0) 2012.11.26
체크박스에 값 할당/retrieve 하기  (0) 2012.11.24
Ajax 로 checkbox 만들어 넣기  (0) 2012.11.21
jQuery Mobile checkbox로 HTML element 변환하기  (0) 2012.11.20
checkbox 다이나믹하게 생성하기  (0) 2012.11.19
selection list 관련 예제들  (0) 2012.11.18
jQuery Mobile/JQM Tutorial

체크박스에 값 할당/retrieve 하기

2012. 11. 24. 09:17 | Posted by 솔웅


반응형
Assign and retrieve the value of a checkbox



Checkbox already present in the HTML


checkbox를 select 하거나 deselect 하는 것을 관리하기 위해 checkbox 가 있는 <input> element 에 checked attribute 를 사용했습니다.

  • <input> element에서 사용하는 attr ("checked", "checked") method 는 checkbox를 select 하는데 사용됩니다. attr ("checked", "") method는 checkbox를 deselect 하는데 사용합니다.

  •  attr ("checked") method는 checked attribute 의 값을 retrieve 하는데 사용됩니다. return 값은 jQuery 의 버전에 따라 다른데요. jQuery 1.5에서는 box가 체크돼 있으면 값이 true 가 될겁니다. 체크돼 있지 않으면 false 가 되겠죠. jQuery 1.6 는 체크돼 있으면 값이 "checked"가 됩니다.  체크돼 있지 않으면 undefined가 되구요.

Check the "2 bedrooms" checkbox


$("input#id2").attr ("checked", "checked");


Uncheck the "2 bedrooms" checkbox


$("input#id2").attr ("checked", "");


Is the "2 bedrooms" checkbox checked?


alert ($("input#id2").attr ("checked")); 
   // true / "checked" (if checked), false / undefined (if unchecked)

 


아래 예제에서는 위의 예제들을 활용하는 방법을 보여줍니다.


Selecting and deselecting a checkbox


<!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> Choose an apartment: </span>

    <div data-role=controlgroup>

      <label for=id1> 1 bedroom </label>

      <input type=checkbox id=id1 name=p1 />

      <label for=id2> 2 bedrooms </label>

      <input type=checkbox id=id2 name=p2 />

      <label for=id3> 3 bedrooms </label>

      <input type=checkbox id=id3 name=p3 />

      <label for=id4> 4 bedrooms </label>

      <input type=checkbox id=id4 name=p4 />

      <label for=id5> 5 bedrooms </label>

      <input type=checkbox id=id5 name=p5 />

    </div>

  </div>

</div>


</body>

</html>


<script>


$("#id2").attr ("checked", "checked");

alert ($("#id2").attr ("checked"));     // Displays true or checked

alert ($("#id3").attr ("checked"));     // Displays false or undefined


</script>

tistory484_01.html



Checkbox dynamically created


attr ("checked") and attr ("checked", "checked" / "") methods 들은 체크박스에 값을 할당하거나 retrieve 할 때 사용됩니다. 체크박스를 refresh 할 때는 checkboxradio ("refresh") method 를 사용합니다.

jQuery 로 여러개의 체크박스를 생성한 경우를 가정해 봅시다.  checkboxradiocreate event 에서 2 bedrooms and 3 bedrooms 를 체크하고 싶습니다.


Check the "2 bedrooms" and "3 bedrooms" in the list


<!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> Choose an apartment: </span>

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<div data-role=controlgroup>";

html +=   "<label for=id1> 1 bedroom </label>";

html +=   "<input type=checkbox id=id1 name=p1 />";

html +=   "<label for=id2> 2 bedrooms </label>";

html +=   "<input type=checkbox id=id2 name=p2 />";

html +=   "<label for=id3> 3 bedrooms </label>";

html +=   "<input type=checkbox id=id3 name=p3 />";

html +=   "<label for=id4> 4 bedrooms </label>";

html +=   "<input type=checkbox id=id4 name=p4 />";

html +=   "<label for=id5> 5 bedrooms </label>";

html +=   "<input type=checkbox id=id5 name=p5 />";

html += "</div>";


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


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

{

  if (this.id == "id2" || this.id == "id3") 

    $(this).attr ("checked", "checked").checkboxradio ("refresh");

});

</script>




tistory484_02.html



여기서는 checkboxradio ("refresh") method를 사용해야 합니다. 왜냐하면 checkbox는 생성되고 나서 affect 될 수 있기 때문이죠. (예를 들어 checkboxradiocreate event 같은). 만약 생성되기 전에 만들면 (이벤트 이전이 되겠죠) 그러면 이 메소드 call 은 소용없습니다. 그리고 Firebug에서 보시면 jQuery 에러를 만들어 냅니다. 왜냐하면 non-authorized context 안에서 이 메소드가 사용되기 때문이죠.




반응형
저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

다이나믹하게 radio button 생성하기  (0) 2012.11.28
체크 박스 생성 예제들  (0) 2012.11.27
체크박스 customize 하기  (5) 2012.11.27
체크박스에서 이벤트 관리하기  (0) 2012.11.26
리스트에 체크박스 삽입/삭제 하기  (0) 2012.11.25
Ajax 로 checkbox 만들어 넣기  (0) 2012.11.21
jQuery Mobile checkbox로 HTML element 변환하기  (0) 2012.11.20
checkbox 다이나믹하게 생성하기  (0) 2012.11.19
selection list 관련 예제들  (0) 2012.11.18
selectiion list customize 하기  (0) 2012.11.17
jQuery Mobile/JQM codes

jQuery Mobile 로 iOS arrow button 효과 내기

2012. 11. 23. 08:43 | Posted by 솔웅


반응형

프로젝트를 진행하다 보면 여러 요청 사항들이 이루어 지도록 구현해야 하는 상황이 많이 있지요.


그 중에서는 별로 구현해 봤자 크게 유용하지 않은 것들도 있습니다. 프로그래머 입장에서 봤을 때 말이죠.


이번에 jQuery Mobile 프로젝트를 진행하는데 그래픽 디자이너가 아래 와 같이 만들어 버렸습니다.




음 이건....


왼쪽의 arrow button 이 문제인데요. 왜냐하면 jQuery Mobile 에서는 저런 arrow button 을 지원하지 않거든요. 저런 버튼은 iPhone 이나 iPad 같은 iOS 기기에서 지원하는 위젯이거든요.



아마 디자이너가 아이폰에서 저런 arrow-back button 을 보고 디자인을 한 것 같습니다.

일단 저런 요청이 들어왔으니까 저는 한번 시도해 보기로 했습니다.

jQuery Mobile 에서 arrow button 구현하기.


아래 버튼이 제가 구현한 것인데요.




CSS 로 긴 사각형을 만들고 왼쪽에 작은 사각형을 만든 다음에 이걸 45도 돌린 겁니다.

여기서 작은 사각형을 돌리고 나서 오른쪽에 있는 버튼이랑 잘 어울려야 하거든요.

그래서 Gradient 를 45도 rotate 하고 난 상태에서 오른쪽 사각형이랑 어울리도록 하는 것이 관건입니다.




<html>
<head>
<style type=text/css>
#ios-arrow-left {
    display : block;
    position:absolute;
    z-index : 0;
    left:50px;
    top:50px;   
    height:30px;
    width:100px;
    padding: 0 10px 0 6px;

    font-weight:
            bold;
    color:
            #fff /*{f-bup-color}*/;
    text-shadow:
            0 /*{f-bup-shadow-x}*/
            1px /*{f-bup-shadow-y}*/
            0 /*{f-bup-shadow-radius}*/
            #294d05 /*{f-bup-shadow-color}*/;
           
    border-radius: 5px;

    background:
        #b9f07f; /* Old browsers */
    background:
        -moz-linear-gradient(
            top, 
            #b9f07f 0,
            #8fbd36 9%,
            #387800 94%,
            #74a814 97%,
            #387800 100%); /* FF3.6+ */
    background:
        -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0,#b9f07f),
            color-stop(9%,#8fbd36),
            color-stop(94%,#387800),
            color-stop(97%,#74a814),
            color-stop(100%,#387800)); /* Chrome,Safari4+ */
    background:
        -webkit-linear-gradient(
            top, 
            #b9f07f 0,
            #8fbd36 9%,
            #387800 94%,
            #74a814 97%,
            #387800 100%); /* Chrome10+,Safari5.1+ */
    background:
        -o-linear-gradient(
            top, 
            #b9f07f 0,
            #8fbd36 9%,
            #387800 94%,
            #74a814 97%,
            #387800 100%); /* Opera 11.10+ */
    background:
        -ms-linear-gradient(
            top, 
            #b9f07f 0,
            #8fbd36 9%,
            #387800 94%,
            #74a814 97%,
            #387800 100%); /* IE10+ */
    background:
        linear-gradient(
            to bottom, 
            #b9f07f 0,
            #8fbd36 9%,
            #387800 94%,
            #74a814 97%,
            #387800 100%); /* W3C */
           
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9f07f', endColorstr='#387800',GradientType=0 ); /* IE6-9 */
}

#ios-arrow-left:before {

    position:absolute;
    content : ' ';
    left:-7px;
    top:4px;
    height : 21px;
    width: 20px;
    z-index : 1;

    -moz-transform :
        rotateZ(45deg) skewY(-0deg) skewX(-0deg);
    -o-transform :
        rotateZ(45deg) skewY(-0deg) skewX(-0deg);
    -webkit-transform :
        rotateZ(45deg) skewY(-0deg) skewX(-0deg);
    transform :
        rotateZ(-0deg) skewY(-0deg) skewX(-0deg);
   
    background: #b9f07f; /* Old browsers */
    background:
        -moz-linear-gradient(
            -45deg, 
            #b9f07f 0%,
            #8fbd36 9%,
            #387800 94%,
            #74a814 97%,
            #387800 100%); /* FF3.6+ */
    background:
        -webkit-gradient(
            linear,
            left top,
            right bottom,
            color-stop(0%,#b9f07f),
            color-stop(9%,#8fbd36),
            color-stop(94%,#387800),
            color-stop(97%,#74a814),
            color-stop(100%,#387800)); /* Chrome,Safari4+ */
    background:
        -webkit-linear-gradient(
            -45deg, 
            #b9f07f 0%,
            #8fbd36 9%,
            #387800 94%,
            #74a814 97%,
            #387800 100%); /* Chrome10+,Safari5.1+ */
    background:
        -o-linear-gradient(
            -45deg, 
            #b9f07f 0%,
            #8fbd36 9%,
            #387800 94%,
            #74a814 97%,
            #387800 100%); /* Opera 11.10+ */
    background:
        -ms-linear-gradient(
            -45deg, 
            #b9f07f 0%,
            #8fbd36 9%,
            #387800 94%,
            #74a814 97%,
            #387800 100%); /* IE10+ */
    background:
        linear-gradient(
            135deg, 
            #b9f07f 0%,
            #8fbd36 9%,
            #387800 94%,
            #74a814 97%,
            #387800 100%); /* W3C */
    filter: progid:
        DXImageTransform.Microsoft.gradient(
            startColorstr='#b9f07f',
            endColorstr='#387800',
            GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#ios-arrow-left:hover {
    background:
            #b9007f /*{f-bup-background-color}*/;
    border:
            1px solid #5f666b /*{f-bup-border}*/;
    background:
            #b9f07f /*{f-bup-background-color}*/;
    font-weight:
            bold;
    color:
            #fff /*{f-bup-color}*/;
    text-shadow:
            0 /*{f-bup-shadow-x}*/
            1px /*{f-bup-shadow-y}*/
            0 /*{f-bup-shadow-radius}*/
            #294d05 /*{f-bup-shadow-color}*/;
    background:
            #387800; /* Old browsers */
    background: -moz-linear-gradient(
            top, 
            #387800 0%,
            #74a814 9%,
            #387800 94%,
            #b9f07f 100%); /* FF3.6+ */
    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0%,#387800),
            color-stop(9%,#74a814),
            color-stop(94%,#387800),
            color-stop(100%,#b9f07f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(
            top, 
            #387800 0%,
            #74a814 9%,
            #387800 94%,
            #b9f07f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(
            top, 
            #387800 0%,
            #74a814 9%,
            #387800 94%,
            #b9f07f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(
            top, 
            #387800 0%,
            #74a814 9%,
            #387800 94%,
            #b9f07f 100%); /* IE10+ */
    background: linear-gradient(
            to bottom, 
            #387800 0%,
            #74a814 9%,
            #387800 94%,
            #b9f07f 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#387800',
            endColorstr='#b9f07f',
            GradientType=0 ); /* IE6-9 */
}

#ios-arrow-left:hover:before
{

    position:absolute;
    content : ' ';
    left:-9px;
    top:4px;
    height : 21px;
    width: 20px;
    z-index : 1;

    -moz-transform :
        rotateZ(45deg) skewY(-0deg) skewX(-0deg);
    -o-transform :
        rotateZ(45deg) skewY(-0deg) skewX(-0deg);
    -webkit-transform :
        rotateZ(45deg) skewY(-0deg) skewX(-0deg);
    transform :
        rotateZ(-0deg) skewY(-0deg) skewX(-0deg);
       
        border-bottom:
            1px solid #5f666b;
        border-left:
            1px solid #5f666b;           

   
    background: #387800; /* Old browsers */
    background:
        -moz-linear-gradient(
            -45deg, 
            #387800 0%,
            #74a814 9%,
            #387800 94%,
            #b9f07f 100%); /* FF3.6+ */
    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0%,#387800),
            color-stop(9%,#74a814),
            color-stop(94%,#387800),
            color-stop(100%,#b9f07f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(
            -45deg, 
            #387800 0%,
            #74a814 9%,
            #387800 94%,
            #b9f07f 100%); /* Chrome10+,Safari5.1+ */
    background:
        -o-linear-gradient(
            -45deg, 
            #387800 0%,
            #74a814 9%,
            #387800 94%,
            #b9f07f 100%); /* Opera 11.10+ */
    background:
        -ms-linear-gradient(
            -45deg, 
            #387800 0%,
            #74a814 9%,
            #387800 94%,
            #b9f07f 100%); /* IE10+ */
    background:
        linear-gradient(
            -45deg, 
            #387800 0%,
            #74a814 9%,
            #387800 94%,
            #b9f07f 100%); /* W3C */
    filter: progid:
        DXImageTransform.Microsoft.gradient(
            startColorstr='#b9f07f',
            endColorstr='#387800',
            GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
  </style>
</head>

<body>
<div id="ios-arrow-left"></div>
</body>
</html>

iosBtn.html


#ios-arrow-left 부분이 오른쪽의 큰 사각형 부분입니다.

그 다음 #ios-arrow-left:before 부분이 그 사각형 왼쪽에 작은 사각형을 만든건데요.

rotateZ(45deg) skewY(-0deg) skewX(-0deg); 으로 사각형을 45도 돌립니다.

그리고 Gradient 부분을 보면

        -webkit-linear-gradient(
            -45deg, 
            #b9f07f 0%,
            #8fbd36 9%,
            #387800 94%,
            #74a814 97%,
            #387800 100%); /* Chrome10+,Safari5.1+ */


여기서도 45도 돌려서 gradient 가 그려지도록 만들었습니다.

그러면 45도 돌린 후에는 오른쪽 사각형이랑 제대로 gradient 가 어울리겠죠.


그 다음 #ios-arrow-left:hover 와 #ios-arrow-left:hover:before 부분은 마우스를 올렸을 효과를 구현했습니다.


구현하고 보니까 크롬하고 사파리에서만 돌아가던데요.

(Firefox 와 Opera 같은데서는 작은 사각형의 rotate 가 안되더라구요.)


이번 프로젝트의 target device 는 main 이 blackberry (ver 6,7) 이구요. sub 로 iPad와 iPhone 을 대상으로 합니다.

회사 내부의 특정 business 를 위한 모바일 웹인데 담당자들이 주로 사용하는 디바이스들이 블랙베리랑 iOS 디바이스들이거든요.

이 두 종류의 디바이스에서는 제대로 적용이 됩니다.


그런데 이 효과는 적용하지 않기로 했습니다.

User Experience 부분에서 문제가 있어서 입니다. hover 는 mouseup 이벤트에 해당하는 거고 요즘 사용하는 touch screen 모바일 기기에서는 다른 여러 다양한 이벤트들이 발생하기 때문이거든요.

오른쪽 큰 사각형은 버튼으로 설정이 되서 jQuery Mobile 이 각 이벤트마다 알아서 CSS 처리를 하는데 이 작은 사각형은 그러지 못해서 편안한 UX 를 위해서는 이 touch screen 의 해당 이벤트를 catch 해서 그에 맞는 UI 를 구현해야 하거든요.


이 작은 효과를 내기 위해서 개발에 소요되는 시간이 너무 깁니다.

완전 Time consuming job 이죠.

당연히 jQuery Mobile 에서 지원하지 않는 부분을 매뉴얼로 구현하니까 일일이 이벤트 발생시마다 컨트롤 해야 되는 거겠죠.


처음 이 디자인을 받았을 때 부터 그럴거라고 생각을 했었지만 디자이너와 프로젝트 리더와 프로젝트 매니저를 설득하고 좀 더 효율적이고 유저에게도 도움을 주는 방향으로 프로젝트를 진행해 나갈 수 있게 하려면 충분한 근거를 제시하면서 제 의견을 얘기해야 되겠기에 일단 여기까지 구현하고 직접 디바이스에서 실행하면서 그 장단점을 발표했습니다.


그 결과 이 방법 보다는 버튼 안에 < 이미지를 넣는 방법이 더 효율적이라는 의견을 도출해 냈죠.


그 미팅에 디자이너는 참석하지 않았는데요.

오늘은 추수감사절이라 휴일이고 내일 가서 디자이너에게 자세히 설명하고 버튼안에 들어갈 이미지를 부탁해야 겠습니다.


사실 오늘 그 디자이너 집에 초대받아서 점심 먹고 왔거든요.


여기 추수감사절은 칠면조 요리를 먹는게 전통이지만 그 디자이너가 얼마전에 인도에서 와서 토종 인도 요리로 먹고 왔습니다.



저기 레몬 얹혀 있는 건 수육인데 그건 저희 집에서 준비해 간 거였어요.

마침 그 집안은 목요일에는 고기를 안 먹는다 그래서 한 점도 안 먹었어요. ^^

저 동그란 거는 뿌리라는 요리이고 큰 접시에 담긴건 컬리 플라우어 커리(카레)와 브지인가 브르지인가 하는 계란요리하고 감자요리가 담겨져 있습니다. 그리고 노란 스프같은 건요.

사실 이게 우리나라에서 먹는 커리(카레) 랑 제일 비슷하지만 카레는 아니고 달 이라는 음식입니다.

왼쪽 위에 하얀 접시로 덮여진 것이 밥이구요.


내일은 추수감사절 다음날인 Black Friday 입니다.

저희 회사에서는 휴일은 아니고 대부분 재택근무를 하는데요.

저는 이 디자이너가 미팅이 있어서 회사에 나간다고 해서 같이 나갈려구요.


이 기능을 구현하려고 이것 저것 구글링을 했었는데요.


저 위에 사용한 소스는 아래 싸이트에 있는 소스를 참조한 겁니다.

http://cssnerd.com/2011/11/30/the-best-pure-css3-ios-style-arrow-back-button/


그리고 이미지를 사용해서 구현한 소스도 있는데요.




이 방법은 처음부터 대상에서 제외 했습니다.

기본적으로 이번 프로젝트에서는 버튼을 만들 때 이미지를 사용하지 않거든요.

이 방법을 사용하면 다른 버튼과 조화를 이루는 방법에 아주 많은 공수가 들어갈 겁니다.


아래 정보가 있는 싸이트와 파일을 올립니다.

http://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile

iOS-Inspired-jQuery-Mobile-Theme-master.zip



그리고 또 한군데 발견한 곳은

http://appcropolis.com/how-to-make-iphone-back-button-in-jquery-mobile/

입니다.


이 글은 자세히 읽어보지는 못했습니다. 별로일 것 같아서요.

혹시 이 소스 분석해 보시고 저 위에 있는 두가지 방법보다 좋은 것 같으면 알려 주세요.


일단 저 arrow button 효과는 이번 프로젝트에서는 사용하지 않을 거지만 덕분에 좋은 공부를 했고 좋은 자료를 이 블로그에 남길 수 있게 됐습니다.


나중에 진짜 필요한 상황이 오면 큰 도움이 되겠죠.


여러분들도 좋은 하루 보내시고 즐코딩하세요.

반응형
저작자표시 비영리 동일조건

'jQuery Mobile > JQM codes' 카테고리의 다른 글

jQuery Mobile 샘플코드 분석, Cascading Selects - .empty() .val() -  (0) 2012.08.11
jQuery Mobile 샘플코드 분석, Dynamic Add  (0) 2012.08.10
jQuery Mobile 로 만든 To-Do List 분석하기 04  (0) 2012.08.09
jQuery Mobile 로 만든 To-Do List 분석하기 03  (0) 2012.08.08
jQuery Mobile 로 만든 To-Do List 분석하기 02  (0) 2012.08.07
jQuery Mobile 로 만든 To-Do List 분석하기 01  (0) 2012.08.07
json2.js 플러그 인 알아보기  (0) 2012.08.04
jQuery.tmpl 플러그 인 튜토리얼  (0) 2012.08.04
jquery.cookie.js 사용법 알아보기  (1) 2012.08.03
jQuery Mobile/JQM Tutorial

Ajax 로 checkbox 만들어 넣기

2012. 11. 21. 05:48 | Posted by 솔웅


반응형
Insert checkboxes by Ajax



이전에 했던 것 처럼 checkbox를 HTML 코드에 직접 생성해 넣지 않고 Ajax를 통해서 서버로부터 HTML 코드를 받아오는 방법이 있습니다.


Insert checkboxes 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> Choose an apartment: </span>

  </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").checkboxradio ();

    $("input").closest ("div:jqmData(role=controlgroup)").controlgroup ();

  }

});  


</script>



checkboxradio () 와 controlgroup () methods 를 사용했습니다.
checkboxradio () method는 <input> and <label> HTML elements를 checkbox (ui-checkbox class)와 연관이 있는 <div>로 변환하는데 사용합니다.  감싸여진 <div> 에서 controlgroup () method를 call 하면 그 checkbox들을 그룹화 할 수 있습니다.



action.php file


<?
$html = "";
$html .= "<div data-role=controlgroup>";
$html .=   "<label for=id1> 1 bedroom </label>";
$html .=   "<input type=checkbox id=id1 name=p1 />";
$html .=   "<label for=id2> 2 bedrooms </label>";
$html .=   "<input type=checkbox id=id2 name=p2 />";
$html .=   "<label for=id3> 3 bedrooms </label>";
$html .=   "<input type=checkbox id=id3 name=p3 />";
$html .=   "<label for=id4> 4 bedrooms </label>";
$html .=   "<input type=checkbox id=id4 name=p4 />";
$html .=   "<label for=id5> 5 bedrooms </label>";
$html .=   "<input type=checkbox id=id5 name=p5 />";
$html .= "</div>";
echo utf8_encode ($html);
?>


action13.php

tistory479_01.html


checkboxradio () 와 controlgroup () methods 를 calling 하면 create evnet 의 triggering 에 의해 replace 될 수 있다는 것을 잘 봐 두세요.  그래서 아래 코드 대신에


Using standard methods of the components (first way)


$("input").checkboxradio ();


$("input").closest ("div:jqmData(role=controlgroup)").controlgroup ();


아래 코드를 사용할 수 있습니다.


Using the create event on the window (2nd way)


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


The create event will be received by the document object in jQuery Mobile, and internal treatment of this event searches for HTML elements to transform into jQuery Mobile components. Thus triggering a single create event processes checkboxes and the group that includes them.


create event 는 jQuery Mobile안에 있는 document object 에 의해 receive 될 겁니다. 그리고 이 이벤트는 HTML element를 jQuery Mobile component로 변환하도록 합니다. 그러니까 single create event를 triggering 하면 checkboxes 와 the group 작업을 수행합니다.


반응형
저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

체크 박스 생성 예제들  (0) 2012.11.27
체크박스 customize 하기  (5) 2012.11.27
체크박스에서 이벤트 관리하기  (0) 2012.11.26
리스트에 체크박스 삽입/삭제 하기  (0) 2012.11.25
체크박스에 값 할당/retrieve 하기  (0) 2012.11.24
jQuery Mobile checkbox로 HTML element 변환하기  (0) 2012.11.20
checkbox 다이나믹하게 생성하기  (0) 2012.11.19
selection list 관련 예제들  (0) 2012.11.18
selectiion list customize 하기  (0) 2012.11.17
selection list 에서 이벤트 관리하기  (0) 2012.11.17
jQuery Mobile/JQM Tutorial

jQuery Mobile checkbox로 HTML element 변환하기

2012. 11. 20. 22:18 | Posted by 솔웅


반응형
Turning an HTML element into a jQuery Mobile checkbox




Firebug 에서 봐 보세요. 이전 글에서 checkbox 들이 포함되고 나서 jQuery Mobile 에 의해 생성된 HTML 코드입니다.

<div> element 에 ui-controgroup CSS class 가 있습니다. 그리고 각 checkbox들은 <div> 에  ui-checkbox class 를 가지고 있습니다. 모두 그룹화 돼 있습니다. 그 안에는 <span> elements 를 가지고 있는 <label> element 가 있구요. <input> element 는 checkbox 에 해당하는 겁니다.




반응형
저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

체크박스 customize 하기  (5) 2012.11.27
체크박스에서 이벤트 관리하기  (0) 2012.11.26
리스트에 체크박스 삽입/삭제 하기  (0) 2012.11.25
체크박스에 값 할당/retrieve 하기  (0) 2012.11.24
Ajax 로 checkbox 만들어 넣기  (0) 2012.11.21
checkbox 다이나믹하게 생성하기  (0) 2012.11.19
selection list 관련 예제들  (0) 2012.11.18
selectiion list customize 하기  (0) 2012.11.17
selection list 에서 이벤트 관리하기  (0) 2012.11.17
selection list 추가하기와 지우기  (0) 2012.11.15
jQuery Mobile/JQM Tutorial

checkbox 다이나믹하게 생성하기

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


반응형


Checkboxes 는 jQuery Mobile에 의해 <input> element에 type="checkbox" attribute 가 삽입되어서 만들어 집니다. jQuery 의 standard 메소드들이 사용될 수 있고 jQuery Mobile 에 의해 추가된
checkboxradio () method도 사용될 수 있습니다.
checkboxes 는 checkboxradio standard component 와 연결돼 있습니다.



Dynamically create checkboxes


type attribute가 "checkbox"인 <input> element를 넣음으로서 checkbox는 생성되고 name attribute 는 필수요소 입니다. 이 element 는 반드시 체크박스의 text를 가지고 있는 <label> element와 연결되야 합니다.

<input> element 의 id attribute 와 연결된 for attribute 를 가지고 있어야 합니다.

같은 set 내에 checkboxes들을 그룹화 하려면  data-role="controlgroup" attribute 를 <div> element 에 넣으시면 됩니다.


Creating dynamic checkboxes


<!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> Choose an apartment: </span>

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<div data-role=controlgroup>";

html +=   "<label for=id1> 1 bedroom </label>";

html +=   "<input type=checkbox id=id1 name=p1 />";

html +=   "<label for=id2> 2 bedrooms </label>";

html +=   "<input type=checkbox id=id2 name=p2 />";

html +=   "<label for=id3> 3 bedrooms </label>";

html +=   "<input type=checkbox id=id3 name=p3 />";

html +=   "<label for=id4> 4 bedrooms </label>";

html +=   "<input type=checkbox id=id4 name=p4 />";

html +=   "<label for=id5> 5 bedrooms </label>";

html +=   "<input type=checkbox id=id5 name=p5 />";

html += "</div>";


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


</script>

tistory477_01.html


반응형
저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

체크박스에서 이벤트 관리하기  (0) 2012.11.26
리스트에 체크박스 삽입/삭제 하기  (0) 2012.11.25
체크박스에 값 할당/retrieve 하기  (0) 2012.11.24
Ajax 로 checkbox 만들어 넣기  (0) 2012.11.21
jQuery Mobile checkbox로 HTML element 변환하기  (0) 2012.11.20
selection list 관련 예제들  (0) 2012.11.18
selectiion list customize 하기  (0) 2012.11.17
selection list 에서 이벤트 관리하기  (0) 2012.11.17
selection list 추가하기와 지우기  (0) 2012.11.15
selection list 에서 select 된 아이템 값 할당하거나 가져오는 방법  (0) 2012.11.15
이전 1 2 3 4 5 6 7 8 ··· 17 다음

티스토리툴바