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

최근에 받은 트랙백

글 보관함

Ajax로 switch 삽입하기

2012. 12. 4. 05:03 | Posted by 솔웅


Insert a switch by Ajax


HTML 이나 JavaScript 를 직접 사용해서 switch 를 만드는 것 보다 Server 쪽에 Ajax를 요청하고 응답을 받아서 만들 수 있습니다.


Create a switch 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> Would you like 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);

    

    $("select").slider ();

  }

});  


</script>



slider () method는 switch 와 관련된 <select> element 에사용되고 서버로부터 switch를 display 할 HTML 코드를 받아서 HTML 코드를 변환시켜주는 역할을 합니다. 만약 이 메소드가 call 되지 않으면 simple selection list (<select> element 에 해당하는)가 display 됩니다.


action.php file


<?
$html = "";
$html .= "<select data-role=slider>";
$html .= "<option value=no> No </option>";
$html .= "<option value=yes> Yes </option>";
$html .= "</select>";
echo utf8_encode ($html);
?>


action19.php

tistory504_01.html






반응형

Comment

  1. Ajax 를 직접 실행하는 것은 너무 오래전에 해본것 같네요...
    요즘엔 프레임워크에서 다들 해주니...ㅎㅎㅎ


Turning an HTML element into a jQuery Mobile switch



이전 글에 있는 예제의 소스코드를 볼까요. Firebug로 보시면 jQuery Mobile이 그 소스코드를 어떻게 변환했는지 보실 수 있습니다.






<select> element는 항상 있습니다. 하지만 ui-slider CSS class가 있는
<div> element는 jQuery Mobile에 의해 생성됩니다.

그렇게 함으로서 <select> selection list가 다른 모습으로 보일 수 있도록 바뀌는 겁니다. 이 리스트는 이제 ui-slider-switch class를 가지고 있는 것을 보실 수 있을 겁니다. 이것은 <select> element를 숨길수 있도록 해 줍니다. (display property가 "none"으로 세팅되도록 정의된 CSS class)



반응형

Comment


switch 를 만드는 것은 주로  jQuery method들을 이용해서 만듭니다.
data-role="slider" attribute 가 있는 <select> element를 사용하면 switch 가 됩니다. 이것을 관리하기 위해서 jQuery Mobile에서는 slider () method를 제공합니다. switch는 standard slider component와 연결 돼 있습니다.



Dynamically create a switch


data-role="slider" attribute가 있는 <select> element 를 사용해서 switch 를 만듭니다. switch 의 두개 값을 나타내기 위해 두개의  <option> elements도 사용합니다.


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

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


</script>






tistory502_01.html



반응형

Comment

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 로 간단하게 등록되는 거라 편하실꺼예요...^^
    오늘도 꾸욱 누르고 갑니다..ㅎㅎㅎ

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