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

최근에 받은 트랙백

글 보관함

Radio 버튼 생성 예제들...

2012. 12. 3. 04: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


반응형

Comment


Customize radio buttons

이전에 jQuery Mobile이 어떻게 오리지널 HTML 에서 jQuery Mobile convention에 맞도록 display 될 HTML 코드로 변환하는지 살펴 봤습니다. 아래 예제를 볼까요. jQuery Mobile 에 의해서 사용되는 CSS 클래스들을 몇개 바꿔서 색다른 radio 버튼을 만들어 보겠습니다.


Styling the 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>


  <style type=text/css>

    .ui-controlgroup .ui-radio label {

      font-size : 25px;

      font-style : italic;

    }

    .ui-radio .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 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>


tistory498_01.html





반응형

Comment


Manage events on radio buttons



jQuery Mobileradio 버튼에 대해 change event를 observe 할 수 있습니다. 이 이벤트는 레이디오 버튼을 클릭할 때마다 발생합니다.  그 레이디오 버튼이 selected 상태든지 아니든지 모두 발생하죠. click event도 있지만 이전에도 언급했듯이 직접적으로 사용되지는 않습니다.



Using the change event on 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 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)

{

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

});


</script>

tistory497_01.html




click event 가 직접적인 방법으로 사용되지 않을까요. jQuery Mobile이 원래의 HTML 코드를 변환시킨다는 것을 기억해 보세요. 그러니까 그 click event를 받는 것은 <div> element내의 ui-radio CSS class 가 됩니다. 소스에 원래 있던 <input> element 가 아니죠. 그래서 <input> element에 있는
<div> element를 클릭하면 이 <div> element가 change event를 만들게 되는 것입니다.

반응형

Comment


Insert and delete a radio button in an existing list



radio button을 삽입하거나 지우기 위해서 jQuery 의 standard method 를 사용합니다.


Insertion and removal of 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 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>


var html = "";

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

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


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

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


</script>


tistory495_01.html






이 방법이 항상 통하는 건 아닙니다. 이 예제에서는 제대로 작동합니다. 왜냐하면 radio 버튼이 삽입되고 지워질때 jQuery Mobile 에 의해 HTML 이 변환되지 않아서 그렇습니다. 즉 그 때 JQM 에 의해서 HTML 이 변환되면 제대로 작동 안한다는 거죠. 그럴 땐 다른 방법을 사용해야 합니다.


Insertion and removal of radio buttons 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 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>


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

{

  var html = "";

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

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

  

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

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

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

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

});


</script>


tistory495_02.html




첫번째 radio button 을 manipulate 하기 위해서 checkboxradiocreate event 에 의해 생성되는 과정을 기다려야 합니다. HTML 코드는 jQuery Mobile 에 의해 변환 됐습니다. 이 radio 버튼은 이제 ui-radio CSS class 가 있는 <div> element 로 그룹화 해야 합니다. radio button 을 삽입하려면 checkboxradio () method 를 사용해야 합니다. 그리고 그룹화를 위해서
<div> element에 controlgroup () method 를 사용하는 것도 필요하구요.


새로운 radio button 을 생성하기 위해 create event 를 사용할 수도 있습니다. 이것을 사용하고 난 다음엔 display 된 element들을 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");



반응형

Comment


Assign and retrieve the value of a radio button



Radio button already present in the HTML code


radio button 선택하거나 해제하기 위해 <input> element에서 checked attribute 를 사용합니다. 만약 radio 버튼이 선택되면 같은 그룹안의 다른 radio 버튼들은 자동적으로 해제 됩니다. (한 그룹안에서는 오직 한개만의 radio 버튼이 선택될 수 있습니다.)


  • attr ("checked", "checked") method는 <input> element 상에서 사용되어 지는데요, radio 버튼을 선택할 때 사용합니다. (그러면 그 그룹안의 다른 radio 버튼은 해제 됩니다.) 그리고 attr ("checked", "") method 는 radio 버튼을 해제할 때 사용됩니다.

  • attr ("checked") method는 checked attribute 의 값을 retrieve 하는데 사용되어 집니다. return 값은 jQuery 의 버전에 따라 다른데요. jQuery 1.5 에서는 버튼이 선택되면 true가 반환되고 나머지는 false가 반환됩니다. jQuery 1.6 에서는 선택되면 "checked"가 그렇지 않으면 undefined가 반환됩니다.


Select the "2 rooms" radio button


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


Deselect the "2 rooms" radio button


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


Is the "2 rooms" radio button selected?


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



아래 예제에서는 위에서 언급된 메소드들을 사용했습니다.


Selecting and deselecting a radio 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>

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


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

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

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


</script>


tistory493_01.html





Radio button dynamically created


attr ("checked") attr ("checked", "checked" / "") methods 들은 radio 버튼에 값을 할당하거나 그 값을 retrieve 할 때 사용합니다. 그리고 checkboxradio ("refresh") method 로 refresh 할 수 있습니다.


jQuery 에 의해 다이나믹하게 생성된 여러개의 radio 버튼이 있다고 가정합시다. checkboxradiocreate event 에서 2 rooms를 선택할 겁니다.


Select "2 rooms" 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 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);


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

{

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

});


</script>


tistory493_02.html





여기서는 checkboxradio ("refresh") method 가 필요한데요. radio 버튼이 window 가 생성된 다음에 할당됐기 때문입니다. (checkboxradiocreate event 에서 생성됐죠). 생성 되기도 전에 change 하면 아무 소용 없겠죠. 그리고 이런 경우 Firebug 에서 보면 jQuery error 를 보실 수 있습니다. 그래서 refresh 해 줄 필요가 있습니다.

반응형

Comment

  1. jQuery Mobile 은 HTML 코드와 혼재되어 있는것이
    개발 접근성은 좋지만, 유지보수 측면에서는 더 힘들듯 합니다...
    그러지 않을까요?! ^^?
    옆에 광고 모델 멋지네요...
    터치 한번 하고 갑니다...ㅎㅎㅎ

    • 솔웅 2012.11.29 01:42 신고

      예 맞아요. 저희팀에서도 그런 얘기들을 많이 해요.
      MVC 에 맞게 코딩할 수 있는 센차가 JQM 보다는 유지보수가 편하겠죠.
      다만 센차는 처음에 접근하기가 좀 어려운 면이 있구요.
      지금 프로젝트는 페이지가 몇개 안 되는 소형 프로젝트이고 개발자들이 모바일 웹 경험이 부족하고 프로젝트가 올해내로 끝나야 되서 JQM 으로 결정했습니다.
      간단한 애플리케이션이라면 JQM 으로 하면서 View 와 Business 로직을 구분하고 유지보수까지 감안하면서 코딩하면 단점이 좀 보완 되겠죠.
      광고 클릭 고마와요.
      초매님은 블로그에 광고 배열을 아주 이쁘게 하셨더라구요..^^
      부러워요.

  2. Sencha 가 확실히 접근이 어려운게 사실입니다.
    하지만, 앱 UI 배치라던지, API, 강력한 기능들도 있는게 사실이죠...
    이제 Sencha 를 손 놓은지가 몇달이 되니까...
    가물 가물 하네요...ㅎㅎㅎ

    그리고, 광고배열 괜찮은가요!?! ^^;;
    광고가 계속 늘어나니까... 보는 제가 답답해서요...ㅎㅎㅎ
    그래도 방문객이 많지 않아,,,,클릭수는 많지 않네요...^^
    광고도 동일 IP 로 자주 누르면
    계정 정지 사유가 된다고 하더라구요...^^

    오늘은 하나만...ㅎㅎㅎ

    • 솔웅 2012.11.29 08:14 신고

      계정 정지까지 신경써 주시고... 감사 감사....
      Sencha 가 블랙베리 지원 하나요?
      저희는 회사 내 business 를 돕는 모바일 웹을 만들고 있습니다.
      미국회사다 보니까 예전부터 블랙베리를 업무용으로 사용하고 있어요.
      대개 버전 5,6,7 이 대부분인데.
      아마 처음에 툴을 결정할 때 Sencha Touch 는 블랙베리에서 잘 지원이 안되는 이유로 우리쪽 프로젝트에 적용하기가 어려웠던 점도 있는 것 같네요. (저도 기억이 가물가물)
      스마트폰 시장이 워낙에 빨리 바뀌어서...
      불과 2~3년 전만해도 스마트폰인 블랙베리를 업무에 활용하는 것이 아주 획기적이고 앞선 방법이었는데...
      요즘엔 아이폰, 안드로이드가 대세라 금방 시대에 뒤쳐지는 상황이 됐네요....

  3. Sencha 사이트에서 해당 내용을 살펴보니,,,,
    run on iOS,Android, BlackBerry, Kindle Fire, and more...
    라고 되어있네요...
    아마... 웹 버전이라 BlackBerry 가 Explorer 가 아닌 webkit 기반의
    브라우저라면 보이지 않을까 생각합니다.
    하지만, 화면이 너무 작은 걸 생각해서
    개발을 해야할 듯 하네요~!

    혹시 블랙베리에서 잘 되시면 저도 좀 알려주세요...
    저흰 블랙베리를 아예 배제하고 개발하고 있거든요...^^

    • 솔웅 2012.11.29 16:45 신고

      예 맞아요. 블랙베리 버전 6 부터인가 webkit 기반으로 나왔습니다.
      그래도 이것 저것 제약이 좀 많이 있는 걸로 알고 있습니다.

  4. 그래서 Sencha 도 블랙베리 버전 6부터 지원하는 군요...^^
    잘 되면 글 남겨주세요...ㅎㅎㅎ

Ajax 로 radio 버튼 insert 하기

2012. 11. 28. 04:28 | Posted by 솔웅


Insert radio buttons by Ajax


이전 글에서 처럼 Radio 버튼을 HTML 코드로 곧바로 생성하는 것 대신에 Ajax를 통해서 서버로부터 HTML 코드를 받는 방법도 있습니다.


Insert radio buttons 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 the number of rooms: </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> <label> elements 들을 jQuery Mobile 의 radio button 형식인 radio button (class ui-radio) 이 적용되는 <div> element 로 HTML 코드를 바꿔 줍니다. wrapping <div> element에서 controlgroup () method 를 call 한 것은 single visual set 로 radio 버튼을 그룹화 할 수 있도록 합니다.



action.php file


<?
$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>";
echo utf8_encode ($html);
?>



action16.php


tistory492_01.html


checkboxradio () controlgroup () method 를 call 하는 대신에
create event를 triggering 함으로서 이 기능을 대신 할 수도 있습니다.


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


반응형

Comment

  1. Ajax 예전엔 조금 구현했었는데...
    Sencha 에선 기본적으로 구현되는 기능이라...
    관심을 두지 않았네요..ㅎㅎㅎ


Turning an HTML element into a jQuery Mobile radio button




이전 글에서 작성한 예제를 Firebug 로 보겠습니다. radio button 이 inclusion 된 이후 jQuery Mobile 에 의해 생성된 HTML 코드 입니다.





radio 버튼들을 감싼 <div> ui-controgroup CSS class 가 생겼습니다. 그리고 각각의 radio button 들은 <div> element가 생겼고 그 안에 ui-radio class 가 들어갔습니다. 그 안에 여러 <span> elements 가 있는 <label> element 가 있고 또 <input> element 가 있습니다.


모두 checkbox의 경우와 같습니다. 단지 ui-checkbox class가 ui-radio class로 바뀐 것 말고는요.



반응형

Comment

  1. 소스를 등록하실 때 SyntaxHighlighter 를 사용하시면 좋습니다.
    추후 유지보수라던지,,, 보기에도 깔끔하고 좋더라구요...^^
    저도 이미지로 글 올리다가 SyntaxHighlighter 알고 난 후부터는
    이것 사용합니다...^^
    Javascript 로 간단하게 등록되는 거라 편하실꺼예요...^^
    오늘도 꾸욱 누르고 갑니다..ㅎㅎㅎ


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> elementtype="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








반응형

Comment

체크 박스 생성 예제들

2012. 11. 27. 04: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"이 아니면 체크된 상황이 아니구요.



반응형

Comment

체크박스 customize 하기

2012. 11. 26. 13: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


반응형

Comment

  1. 저도 jQuery Mobile 을 좀 공부 해둬야겠습니다.
    객체지향적인 Sencha 와는 좀 다른 방식이더라구요...^^
    오늘도 꾸욱 누르고 갑니다...ㅎㅎㅎ

    • 솔웅 2012.11.27 03:28 신고

      저도 sencha 에 관심이 많은데... 기회가 안 닿네요...
      매번 꾸욱 누르신다니 정말 감사드립니다... ^^
      요즘 대부분 저의 jQuery Mobile 관련 글은 http://the-jquerymobile-tutorial.org/ 에 있는 내용입니다.
      jQuery Mobile 책 내신 분인데...
      여기는 매일 꾸욱 할만한게 없더라구요.
      프랑스에서 IT 관련 책을 내시는 분인데요.
      Eric Sarrion 이분도 기억해 주세요... ^^

  2. 앗... 영어네요...ㅎㅎㅎ
    영어는 쥐약이라~!~!
    이해가 너무 느려요...^^
    Sencha 는 초반 개념 잡는데 조금의 시간만 투자한다면,
    매력적인 Framework 인 듯 합니다...
    계속 공부해야 겠어요...ㅎㅎㅎ

    • 솔웅 2012.11.27 11:45 신고

      예 우리 팀에서도 개발 후 유지 보수 측면에서 MVC 를 충실히 지원하는 Sencha touch 가 장점이 있다고 얘기하고 있어요.
      저도 이번 프로젝트 어느정도 정리 되면 Sencha touch 공부 이어 나갈 생각입니다. 열심히 하자구요.

  3. 아... 지금 jQuery Mobile 로 프로젝트를 진행중이신가봐요~!
    Sencha 부분 공부하실 때...
    모르는 거 있으시면, 이야기 해주세요.
    같이 풀어 가는 재미가 있을 듯 합니다...^^
    화이팅~!~!~!
    오늘도 꾸욱...ㅎㅎㅎ

이전 1 2 3 4 5 6 7 ··· 14 다음