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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

jQuery Mobile/JQM Tutorial

Ajax 로 리스트 Retrieve 하기

2012. 10. 23. 21:06 | Posted by 솔웅


반응형
Retrieve a list by Ajax


Ajax에 의해 처리된 리스트를 만들겁니다. 이 리스트는 window content에 마지막 element 로서 추가 될 겁니다.


Retrieve a list by Ajax and insert into the window


<!DOCTYPE html>

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <meta name="apple-mobile-web-app-capable" content="yes" />

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

    <p> Window content </p>

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

    $("#list").listview ();

  }

}); 


</script>



action.php file 에는 window 에 넣을 list를 return 하는 server program 이 있습니다.


action.php file



<?
$html = "";
$html .= "<ol id=list data-inset=true>";
$html .=   "<li data-role=list-divider>List retrieved by Ajax</li>";
$html .=   "<li data-icon=delete>";
$html .=      "<a href=#>Element 1</a>";
$html .=   "</li>";
$html .=   "<li data-icon=delete>";
$html .=      "<a href=#>Element 2</a>";
$html .=   "</li>";
$html .=   "<li data-icon=delete>";
$html .=      "<a href=#>Element 3</a>";
$html .=   "</li>";
$html .= "</ol>";
  
echo utf8_encode ($html);
?>



자바스크립트 코드 안에 있는 $("#list").listview () statement를 보세요. 여기서 서버로부터 HTML 코드를 받아 이것을 jQuery Mobile 의 list 로 display 하는 겁니다. 이게 없으면 이 리스트는 jQuery Mobile 의 list를 보여주지 않고 그냥 단순히 HTML list 를 보여주게 됩니다.


이 예제의 결과는 아래 화면과 같을 겁니다.




action419.php


tistory419_01.html



Window에 list 를 생성하기 위해 create event 를 사용하실 수도 있습니다.


Create the list using listview ()


$("#list").listview ();


위 코드 부분 아래에 아래 코드를 추가하세요.


Create the list using the create event


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


만약 create event를 사용하신다면 이 리스트는 서버로부터 반드시 data-role="listview" attribute 를 retrieve 할 겁니다. 그렇지 않으면 jQuery Mobile은 이 HTML element를 jQuery Mobile 리스트로 전환해야 된다는 것을 알지 못합니다.  listview () method 를 사용하시면 이 attribute는 필요가 없게 되는 거죠. 이 메소드가 call 되면 jQuery Mobile list로 transform 해야 된 다는 것을 알려 주는 겁니다. (여기서는 #list1 element 임)




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

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

리스트 다루기 예제  (0) 2012.10.29
리스트 Customization 하기  (0) 2012.10.26
리스트에서 이벤트 관리하기  (0) 2012.10.25
리스트에서 아이템 지우기  (0) 2012.10.25
리스트에 아이템 insert 하기  (0) 2012.10.24
HTML element 를 jQuery Mobile list 로 바꾸기  (0) 2012.10.23
다이나믹하게 리스트 생성하기  (0) 2012.10.22
window를 생성하는 예제들...  (0) 2012.10.21
content 부분 customize 하기  (0) 2012.10.21
window (화면) 들의 event 들 관리하기  (0) 2012.10.20
jQuery Mobile/JQM Tutorial

HTML element 를 jQuery Mobile list 로 바꾸기

2012. 10. 23. 08:18 | Posted by 솔웅


반응형





Turning a HTML element into a jQuery Mobile list



이번에 할 작업은 일반적인 HTML에서의 리스트 표시 방법인 <ul> or <ol>를 jQuery Mobile 식으로 display 하도록 바꾸는 작업입니다. <ul> or <ol> element 가 data-role="listview" attribute 를 사용해서 리스트를 표시할 수 있는 것은 이미 알고 계시죠? 우리는 이 attribute를 어떻게 <ul> or <ol> element 에 이 attribute를 적용하는지에 대해 알아 볼겁니다.


아래 예제를 보실텐데요 일단 고전적인 attribute들인 data-role, data-icon, etc 을 모두 제거한 코드를 먼저 보시겠습니다.


A HTML list with no jQuery Mobile conventions


<!DOCTYPE html>

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <meta name="apple-mobile-web-app-capable" content="yes" />

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

    <ol id=list1>

      <li>Element 1.1</li>

      <li>Element 1.2</li>

      <li>Element 1.3</li>

    </ol>

  </div>

</div>


</body>

</html>


<script>


</script>



이 리스트는 전형적인 jQuery Mobile window를 포함하고 있습니다. 그런데 <ol> element 가 data-role="listview" attribute를 가지고 있지 않습니다.  이 리스트는 아주 기본적인 형식만 갖췄습니다.




tistory418_01.html


이제 자바스크립트로 jQuery Mobile convention을 따라서 display 하도록 무너가 작업을 해야될 것 같군요. 이를 위해서 listview jQuery Mobile component 에 있는 listview () method를 사용해서 HTML 리스트를 jQuery Mobile 리스트로 표시할 겁니다.

Add this statement in our JavaScript code:


Call to the listview () method on the list


<!DOCTYPE html>

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <meta name="apple-mobile-web-app-capable" content="yes" />

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

    <ol id=list1>

      <li>Element 1.1</li>

      <li>Element 1.2</li>

      <li>Element 1.3</li>

    </ol>

  </div>

</div>


</body>

</html>


<script>


$("#list1").listview ();


</script>





tistory418_02.html



그런데 기대했던 모습은 아니네요. 우리는 이 window 가 생성될 때 그냥 거기서 jQuery Mobile component (list) 를 display 하라고 시켰습니다. 이러지 말고 이 window 가 그 transformation을 수행하기 위한 과정에서 create 될 때 까지 좀 더 기다려 줘야 할 것 같습니다.


그 윈도우의 pagecreate event 에서 listview () instruction을 집어 넣어 보겠습니다. 그러면 이 윈도우가 create 되는 것을 끝마칠 때까지 기다릴 겁니다.


Call to the listview () method in the treatment of the pagecreate event


<!DOCTYPE html>

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <meta name="apple-mobile-web-app-capable" content="yes" />

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

    <ol id=list1>

      <li>Element 1.1</li>

      <li>Element 1.2</li>

      <li>Element 1.3</li>

    </ol>

  </div>

</div>


</body>

</html>


<script>


$("#home").bind ("pagecreate", function ()

{

  $("#list1").listview ();

});


</script>





tistory418_03.html



이제 기대했던 대로 나왔네요.....





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

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

리스트 Customization 하기  (0) 2012.10.26
리스트에서 이벤트 관리하기  (0) 2012.10.25
리스트에서 아이템 지우기  (0) 2012.10.25
리스트에 아이템 insert 하기  (0) 2012.10.24
Ajax 로 리스트 Retrieve 하기  (0) 2012.10.23
다이나믹하게 리스트 생성하기  (0) 2012.10.22
window를 생성하는 예제들...  (0) 2012.10.21
content 부분 customize 하기  (0) 2012.10.21
window (화면) 들의 event 들 관리하기  (0) 2012.10.20
다른 메소드들과 프로퍼티들 보기  (0) 2012.10.19
jQuery Mobile/JQM Tutorial

다이나믹하게 리스트 생성하기

2012. 10. 22. 21:22 | Posted by 솔웅


반응형

jQuery Mobile에 의해서 display 되는 리스트 만들기는 jQuery 에 그 기본을 둡니다. jQuery Mobile 은 그것을 사용하기 위해 listview () method를 implement합니다. 이 리스트들은 listview standard component와 연계가 있습니다.



Dynamically create a list



리스트는 HTML 코드 안에서 생성할 수 있습니다. jQuery Mobile 은 이 리스트 아이템들을 좀 더 예쁘게 보이도록 새로운 CSS 클래스를 적용해서 HTML을 convert 할 수 있습니다.


그리고 새로운 리스트를 jQuery 의 메소드를 사용해서  dynamic 하게 생성하는 것도 가능합니다.


List without images


아래 예제에서는 페이지에 HTML 코드로 list 를 만들고 두번쨰로는 JavaScript code로 dynamic 하게 list를 생성했습니다. 마지막으로 이 두 리스트의 view를 일관되게 표현했습니다.


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

    <ol id=list1 data-role=listview data-inset=true>

      <li data-role=list-divider>Static list</li>

      <li data-icon=delete>

        <a href=#>Element 1.1</a>

      </li>

      <li data-icon=delete>

        <a href=#>Element 1.2</a>

      </li>

      <li data-icon=delete>

        <a href=#>Element 1.3</a>

      </li>

    </ol>

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<ol id=list2 data-role=listview data-inset=true>";

html +=   "<li data-role=list-divider>Dynamic list</li>";

html +=   "<li data-icon=delete>";

html +=      "<a href=#>Element 2.1</a>";

html +=   "</li>";

html +=   "<li data-icon=delete>";

html +=      "<a href=#>Element 2.2</a>";

html +=   "</li>";

html +=   "<li data-icon=delete>";

html +=      "<a href=#>Element 2.3</a>";

html +=   "</li>";

html += "</ol>";


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


</script>



첫번째 리스트는 전통적인 방법으로 HTML을 사용해서 생성했고 (static list) 두번째는 JavaScript 로 자동으로 생성해서 append (html) instruction을 사용해서 DOM tree에 insert 했습니다(dynamic list).




tistory417_01.html


List with images


이번에는 위와 같은 예제인데요 다른 점은 리스트 아이템 안에 이미지가 들어가는 겁니다. static list 는 두개의 리스트 아이템이 있고 dynamic list에는 한개의 아이템이 있습니다.


Dynamic creation of a list with images


<!DOCTYPE html>

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <meta name="apple-mobile-web-app-capable" content="yes" />

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

    <ul id=list1 data-role=listview data-inset=true>

      <li data-role=list-divider>Static list</li>

      <li>

        <img src=images/html.jpg />

        <h1> HTML & CSS</h1>

        <p> Eric Sarrion</p>

      </li>

      <li>

        <img src="images/j2ee.jpg" />

        <h3>J2EE</h3>

        <p> Eric Sarrion</p>

      </li>

    </ul>

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<ul id=list2 data-role=listview data-inset=true>";

html +=   "<li data-role=list-divider>Dynamic list</li>";

html +=   "<li>";

html +=     "<img src=images/jquery.jpg />";

html +=     "<h3>JQuery & jQuery UI</h3>";

html +=     "<p> Eric Sarrion</p>";

html +=   "</li>";

html += "</ul>";


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


</script>





tistory417_02.zip




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

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

리스트에서 이벤트 관리하기  (0) 2012.10.25
리스트에서 아이템 지우기  (0) 2012.10.25
리스트에 아이템 insert 하기  (0) 2012.10.24
Ajax 로 리스트 Retrieve 하기  (0) 2012.10.23
HTML element 를 jQuery Mobile list 로 바꾸기  (0) 2012.10.23
window를 생성하는 예제들...  (0) 2012.10.21
content 부분 customize 하기  (0) 2012.10.21
window (화면) 들의 event 들 관리하기  (0) 2012.10.20
다른 메소드들과 프로퍼티들 보기  (0) 2012.10.19
Dialog windows 사용하기  (0) 2012.10.17

티스토리툴바