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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

Radio 버튼 생성 예제들...

2012. 12. 3. 21:58 | Posted by 솔웅


반응형
Examples of manipulation of radio buttons



Transmit the selected radio button to the server and then display another window


서버에 방금 select 된 radio 버튼을 전송하려고 합니다. 서버에서는 연관된 radio 버튼의 id 를 포함한 다른 윈도우를 회송할 겁니다.



Transmit the id of the selected radio button and then 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 the number of rooms: </span>

    <div data-role=controlgroup>

      <label for=id1> 1 </label>

      <input type=radio id=id1 name=rooms />

      <label for=id2> 2 </label>

      <input type=radio id=id2 name=rooms />

      <label for=id3> 3 </label>

      <input type=radio id=id3 name=rooms />

      <label for=id4> 4 </label>

      <input type=radio id=id4 name=rooms />

      <label for=id5> 5 </label>

      <input type=radio id=id5 name=rooms />

    </div>

  </div>

</div>


</body>

</html>


<script>


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

{

  var data = { };

  data["rooms"] = this.id;

  

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

});


</script>


Each time you click a radio button, a call to the server is performed that displays a window indicating the identifier of the selected radio button.

We use the data property that contains the property rooms, indicating the id of the radio button. For example data.rooms is id1 if the first radio button is selected.

radio 버튼을 클릭할 때마다 server 를 call 하는 것이 발생합니다. 그러면 select 된 radio 버튼의 identifier 를 가리키는 window 를 display 하게 됩니다.


action.php file


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

<!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> Selected rooms (id) : <?= $rooms ?> </p>
  </div>
</div>
</body>

</html>


첫번째 아이템을 선택하면 아래와 같은 화면을 보실 겁니다.




action17.php

tistory501_01.html




Use a submit button to transmit information


select 된 radio 버튼을 pass 하는 대신에 submit button 버튼을 사용해서 선택된 radio 버튼 값을 표시하는 화면을 display 하도록 할 수 있습니다.


Send the selected radio button 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 the number of rooms: </span>

      <div data-role=controlgroup>

        <label for=id1> 1 </label>

        <input type=radio id=id1 name=rooms value=1 />

        <label for=id2> 2 </label>

        <input type=radio id=id2 name=rooms value=2 />

        <label for=id3> 3 </label>

        <input type=radio id=id3 name=rooms value=3 />

        <label for=id4> 4 </label>

        <input type=radio id=id4 name=rooms value=4 />

        <label for=id5> 5 </label>

        <input type=radio id=id5 name=rooms value=5 />

      </div>

      <input type=submit value=OK>

    </form>

  </div>

</div>


</body>

</html>



이제 form 에 OK button과 radio buttons들이 있습니다. 그리고 action.php call 합니다. 자바스크립트 부분은 너무너무 간단합니다. 왜냐하면 자바스크립트가 필요 없으니까요. jQuery Mobile 이 form validation 과 함께 내부적으로 과정을 모두 진행을 합니다.

이전 예제와 비교하자면 이번 예제에서는 각 radio 버튼마다 반드시 value attribute를 명시해야 합니다. 그 값이 서버로 전송될 거거든요. 그래서 그 값으로 선택된 radio 버튼을 알 수 있는 겁니다.


action.php 이전과 같습니다. 이전 파일을 그대로 사용하셔도 됩니다.


action.php file


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

<!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> Selected rooms (value) : <?= $rooms ?> </p>
  </div>
</div>
</body>

</html>



action18.php

tistory501_02.html


반응형