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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

jQuery Mobile/JQM Tutorial

GPS 와 구글 맵 사용하기

2012. 12. 29. 10:18 | Posted by 솔웅


반응형
GPS and Google Maps



최신 브라우저에는 location-based 기능들이 다 있습니다. 전화기나 태블릿의 GPS 를 사용하는 기능이죠. 이것은 HTML5 의 기본 기능입니다. 그러니까 jQuery Mobile 과는 별도의 기능인거죠. 하지만 jQuery Mobile 과 함께 사용하면 아주 유용하죠. 이전 글의 데이터베이스 같이요.


geolocation 기능을 사용해서 Google Map  기능을 이용할 수도 있습니다. Google은 이를 위한 API 를 제공하고 있습니다. 개발자들은 자바스크립트를 이용해서 지구상의 어떤 곳이든 지도로 display 할 수 있습니다.


It is these two aspects we study in this chapter, in conjunction with jQuery Mobile.

이 두가지 기능에 대해 jQuery Mobile 에서는 어떻게 다루는지 오늘 다뤄 보겠습니다.


Using GPS with jQuery Mobile


GPS는 navigator.geolocation object를 통해서 구현 가능합니다. 이 object는 getCurrentPosition (ok, error) method 를 제공합니다.


  • ok (position) is a callback function called when the GPS position could be calculated. The position parameter is an object with a coords property defined by {latitude, longitude, heading, speed, altitude} containing the GPS position. This parameter is required otherwise the GPS position can not be recovered.

  • error () is a callback function called only if GPS position has not been found. This parameter is optional.


현재의 GPS 위치를 표시하기 위해 이 메소드를 사용하시면 됩니다. (예를 들어 현재의 위도와 경도를 표시하실 수 있습니다.)


Display current GPS coordinates


<!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> Latitude : </span> <span id=lat></span> <br />

    <span> Longitude : </span> <span id=lng></span> <br />

  </div>

</div>


</body>

</html>


<script>


navigator.geolocation.getCurrentPosition (function (pos)

{

  var lat = pos.coords.latitude;

  var lng = pos.coords.longitude;

  $("#lat").text (lat);

  $("#lng").text (lng);

});


</script>


tistory574_01.html







Integrating Google Maps in our application


구글 맵은 Google에서 제공하는 구글 맵 API 를 통해서 구현 가능합니다. 이 API에 접근하려면 HTML 페이지에 자바스크립트를 include 시키시면 됩니다.


Inclusion of the JavaScript file of Google Maps


<script src=http://maps.googleapis.com/maps/api/js?sensor=true></script>



이전 프로그램을 변형시켜서 GPS 위치에 의해 파악된 위치를 지도에 표시하는 새로운 화면을 display 시키겠습니다. 첫번째 화면을 우리가 정하는 GPS 코드를 entering 하도록 약간 변형시키겠습니다.


View the map of the position provided by GPS


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

  <script src=http://maps.googleapis.com/maps/api/js?sensor=true></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <span> Latitude : </span> <input type=text id=lat />

    <span> Longitude : </span> <input type=text id=lng />

    <a data-role=button id=btn>Display map</a>

  </div>

</div>


<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

  </div>

</div>


</body>

</html>


<script>


navigator.geolocation.getCurrentPosition (function (pos)

{

  var lat = pos.coords.latitude;

  var lng = pos.coords.longitude;

  $("#lat").val (lat);

  $("#lng").val (lng);

});


$("#btn").bind ("click", function (event)

{

  var lat = $("#lat").val ();

  var lng = $("#lng").val ();

  var latlng = new google.maps.LatLng (lat, lng);

  var options = { 

    zoom : 15, 

    center : latlng, 

    mapTypeId : google.maps.MapTypeId.ROADMAP 

  };

  var $content = $("#win2 div:jqmData(role=content)");

  $content.height (screen.height - 50);

  var map = new google.maps.Map ($content[0], options);

  $.mobile.changePage ($("#win2"));

  

  new google.maps.Marker ( 

  { 

    map : map, 

    animation : google.maps.Animation.DROP,

    position : latlng  

  });  

});


</script>

tistory574_02.html


텍스트 필드에 위도 경도 좌표를 넣으면 그 값을 받아올 겁니다. (디폴트로는 GPS 에서 얻은 값이 표시 됩니다. 파라미터에서 google.maps.Map object 를 생성하면 해당 위치의 지도가 display 될 겁니다. 지도를 표시할 <div> element 의 높이를 지정하는 부분을 잘 봐 두세요. (여기서는 두번째 화면의 content 입니다.)


여기에 해당 위치에 Marker 를 표시하기 위해 google.maps.Marker object를 생성했습니다. 이것은 옵션이지만 지도에서 해당 위치를 찾는데 아주 유용한 기능입니다.



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

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

Client side 데이터 베이스 이용하기  (0) 2012.12.28
툴바 만드는 예제들  (0) 2012.12.28
툴바 customize 하기  (0) 2012.12.27
툴바에서 이벤트 다루기  (2) 2012.12.27
Ajax 로 navigation bar 삽입하기  (0) 2012.12.26
Ajax로 툴바 insert 하기  (0) 2012.12.25
jQuery Mobile 툴바로 HTML element 변환하기  (0) 2012.12.25
다이나믹하게 툴바 생성하기  (0) 2012.12.25
accordion menu 생성 예제들  (0) 2012.12.23
accordion menu Customizing 하기  (0) 2012.12.22
jQuery Mobile/JQM Tutorial

Client side 데이터 베이스 이용하기

2012. 12. 28. 05:48 | Posted by 솔웅


반응형

Databases on the client side


이번에 다루는 챕터는 jQuery Mobile 에서 제공하는 기능은 아닙니다. HTML5에서 제공하는 기능을 jQuery Mobile 이 활용하는 겁니다. HTML5는 요즘 브라우저에서 대부분 지원하고 있습니다. 특해 대부분의 스마트 폰이나 tablet 들의 브라우저에서도 지원하구 있습니다.


이 기능은 jQuery Mobile 의 기능과 같이 사용되면 아주 유용합니다. 원격 서버가 아닌 local database 에 저장된 데이터에 접근하기 위해 jQuery Mobile 과 함께 사용하는 자바스크립트 프로그램으로 그 기능을 구현할 수 있습니다.


HTML5 offers two types of data storage on the client:


  •  SQL로 만들어진 브라우저 내의 데이터베이스. 저장할 데이터가 많을 경우 이 저장방법을 사용할 수 있습니다.

  • localStorage and sessionStorage objects를 통한 저장공간. string 으로 만들어진 정보를 저장합니다. 데이터베이스보다 제한사항들이 적습니다. 그리고 구현하기가 간단합니다. 적은 양의 정보를 저장하는데 사용합니다.


Permanent storage and session storage


permanent storage 와 session storage의 다른 점은 저장기간에 있습니다.

permanent storage에서는 정보를 유저가 지울 때까지 저장합니다. 즉 그 application이 close 되도 phone 을 껐다가 켜도 그 데이터는 유지가 됩니다.


session storage는 정보가 그 세션의 context 내에서만 저장됩니다. 즉 세션에 저장된 정보는 우리가 만든 사이트의 모든 페이지에서 접근할 수 있지만 그 기간은 application 이 run 하고 있을 때 만입니다. 이 application 이 닫히거나 다른데로 넘어가 버리면 즉 세션이 끝나버리면 그 정보는 없어집니다.


이 두 기능을 구현하기 위해서는 다음 두개의 JavaScript 객체들을 사용하시면 됩니다. : localStorage and sessionStorage:


  • localStorage allows permanent storage,

  • sessionStorage allows storage in the session.


예를 들어 성과 이름을 저장하려면 아래와 같이 하시면 됩니다.


Permanent storage


localStorage.lname = "Sarrion";

localStorage.fname = "Eric";


Session storage


sessionStorage.lname = "Sarrion";

sessionStorage.fname = "Eric";


Using a database


위에서 본 Permanent storage 와 temporary storage 는 SQL 을 사용하는 데이터베이스에서 제공하는 많은 기능들을 제공하지는 않습니다.

이런 데이터베이스를 이용하려면 HTML5 에서 제공하는 SQL 데이터베이스를 자바스크립트를 사용해서 활용하시면 됩니다.


Creating the database



첫번째로 데이터베이스에 대한 access 를 생성합니다. 이게 첫번째로 실행될 경우 그 데이터베이스는 빈 DB 가 되겠죠.


Create access to the database


var db = openDatabase ("Test", "1.0", "Test", 65535);



위 소스에서는 string size 를 65,535 bytes 로 지정했습니다.


Using the database


일단 데이터베이스가 생성됐으면 이제 사용하시기만 하면 됩니다.


  • Creating tables,

  • Inserting data into tables,

  • Retrieving data from the tables,

  • Deleting data,

  • Eventually deleting tables.


데이터 관리하는 방법은 간단합니다. db object 가 recover 됐다면 이제 SQL 명령문을 사용하시면 됩니다.


Using the database


var db = openDatabase ("Test", "1.0", "Test", 65535);

db.transaction (function (transaction) 

{

  var sql = SQL query;

  transaction.executeSql (sql, [parameters] / undefined, 

  function ()

  { 

    // JavaScript code to execute if the query was successful

    // ...

  }, 

  function ()

  { 

    // JavaScript code to execute if the query failed

    // ...

  } );

});



parameters들은 배열 형태이고 SQL query 안에서 "?" 로 replace 됩니다. 이 파라미터들은 "?" 가 없으면 사용할 필요가 없습니다.


이어지는 두 함수들도 옵션인데요 둘 중 하나가 indicated 되지 않았다면 undefined 로 replace 되어야 합니다. 첫번째 함수는 트랜잭션이 성공했을 때 실행되고 두번째 함수는 실패 했을 때 실행됩니다.


두번째 함수의 return 은 중요한 의미가 있죠. request 가 실패했다는 의미이니까요. 이렇게 request 가 실패 했을 때 그 트랜잭션의 request 들을 rollback 하는 부분을 구현해야 합니다. 실패 했을 때 제대로 rollback 하기 위해 해당 함수의 마지막에 true 를 return 하면 됩니다. 그렇지 않다면 성공했다고 간주하게 됩니다.


Example of using a database


customers table로 데이터베이스를 관리할 겁니다. 그러려면 테이블을 생성하고 그 안에 내용을 넣고 지우고 보여주고 하는 기능들을 구현해야죠.


Managing a database of clients locally


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

    <a href=# data-role=button id=create> Create customers table </a>

    <a href=# data-role=button id=remove> Delete customers table </a>

    <span> Last name </span>

    <input type=text id=lname>

    <span> First name </span>

    <input type=text id=fname>

    <a href=# data-role=button id=insert> Insert the customer </a>

    <a href=# data-role=button id=list> List customers </a>

  </div>

</div>


<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>List of customers</h1>

  </div>


  <div data-role=content>

  </div>

</div>


</body>

</html>


<script>


var db = openDatabase ("Test", "1.0", "Test", 65535);


$("#create").bind ("click", function (event)

{

  db.transaction (function (transaction) 

  {

    var sql = "CREATE TABLE customers " +

        " (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, " +

        "lname VARCHAR(100) NOT NULL, " + 

        "fname VARCHAR(100) NOT NULL)"

    transaction.executeSql (sql, undefined, function ()

    { 

      alert ("Table created");

    }, error);

  });

});


$("#remove").bind ("click", function (event)

{

  if (!confirm ("Delete table?", "")) return;;

  db.transaction (function (transaction) 

  {

    var sql = "DROP TABLE customers";

    transaction.executeSql (sql, undefined, ok, error);

  });

});


$("#insert").bind ("click", function (event)

{

  var lname = $("#lname").val ();

  var fname = $("#fname").val ();

  

  db.transaction (function (transaction) 

  {

    var sql = "INSERT INTO customers (lname, fname) VALUES (?, ?)";

    transaction.executeSql (sql, [lname, fname], function ()

    { 

      alert ("Customer inserted");

    }, error);

  });

});


$("#list").bind ("click", function (event)

{

  db.transaction (function (transaction) 

  {

    var sql = "SELECT * FROM customers";

    transaction.executeSql (sql, undefined, 

    function (transaction, result)

    {

      var html = "<ul>";

      if (result.rows.length)

      {

        for (var i = 0; i < result.rows.length; i++) 

        {

          var row = result.rows.item (i);

          var lname = row.lname;

          var fname = row.fname;

          html += "<li>" + lname + "&nbsp;" + fname + "</li>";

        }

      }

      else

      {

        html += "<li> No customer </li>";

      }

      

      html += "</ul>";

      

      $("#win2").unbind ().bind ("pagebeforeshow", function ()

      {

        var $content = $("#win2 div:jqmData(role=content)");

        $content.html (html);

        var $ul = $content.find ("ul");

        $ul.listview ();

      });

      

      $.mobile.changePage ($("#win2"));

      

    }, error);

  });

});


function ok ()

{

}


function error (transaction, err) 

{

  alert ("DB error : " + err.message);

  return false;

}


</script>

tistory573_01.html


쿼리가 데이터베이스에서 기록들을 return 할 경우 자바스크립트 함수는 ResultSet object 에 해당하는 result parameter를 성공적으로 수행했을 때 실행됩니다. 이 쿼리에 의해 생성된 자료들을 담고 있는 rows property 가 생기게 됩니다.


Access to the records returned by a SELECT


for (var i = 0; i < result.rows.length; i++) 

{

  var row = result.rows.item (i);

  var lname = row.lname;

  var fname = row.fname;

  html += "<li>" + lname + "&nbsp;" + fname + "</li>";

}


이 프로그램에서 흥미로운 부분은 리스트를 display 하는 부분 입니다. 화면의 content 로 insert 하기 위해 <ul> list HTML 코드를 사용했습니다. 리스트를 listview () method를 사용해서 listview component 로 변환하는 것은 화면에 들어갈 리스트가 이미 생성돼 있을 때에만 가능합니다.
pagebeforeshow event 가 그 당시 화면이 생성돼 있는지 여부를 체크할 수 있도록 해 줍니다.


unbind () method가 bind () method 이 전에 사용된 점을 유념하세요. bind () method를 성공적으로 call 하면 perform 해야할 일들이 쌓이게 됩니다. (만약 리스트가 여러번 display 되야 하는 경우에요.) unbind ()
method를 call 하면 이전에 add 됐던 모든 이벤트 핸들러들을 remove 합니다.  그러니까 마지막에 우리가 bind ()로 추가한 것만 남게 되죠.


이 소스를 실행시키면 아래와 같은 화면을 보실 수가 있을 겁니다.





customers table 생성의 다른 action 들은 이 테이블이 아직 생성되지 않았을 경우 에러 메세지를 보여줄 겁니다.  일단 생성되면 다른 action들을 취할 수 있습니다. 두개의 클라이언트를 생성하고 list 해 보죠. 해당 버튼을 잘 눌러서요.



Improving the program (continued)


위의 프로그램을 조금 더 개선 시키겠습니다. 리스트에서 한개의 client 를 remove 할 수 있도록요. 이것을 하려면 리스트 아이템에 swipe movement (right)을 감지할 수 있도록 해야 할 겁니다. 오른쪽으로 문지르면 그 아이템이 리스트에서 지워질겁니다. 더불어서 데이터베이스에서도 그 정보가 지워질 거구요.


아래에 이를 위한 구문이 있습니다.


Allow the removal of an item in the list


$("#list").bind ("click", function (event)

{

  db.transaction (function (transaction) 

  {

    var sql = "SELECT * FROM customers";

    transaction.executeSql (sql, undefined, 

    function (transaction, result)

    {

      var html = "<ul>";

      if (result.rows.length)

      {

        for (var i = 0; i < result.rows.length; i++) 

        {

          var row = result.rows.item (i);

          var lname = row.lname;

          var fname = row.fname;

          var id = row.id;

          html += "<li data-icon=false " + "id=" + id + ">";

          html +=   "<a href=#>";

          html +=      lname + "&nbsp;" + fname; 

          html +=   "</a>"; 

          html += "</li>";

        }

      }

      else

      {

        html += "<li> No customer </li>";

      }

      

      html += "</ul>";

      

      $("#win2").unbind ().bind ("pagebeforeshow", function ()

      {

        var $content = $("#win2 div:jqmData(role=content)");

        $content.html (html);

        var $ul = $content.find ("ul");

        $ul.listview ();

        

        $("li").bind ("swiperight", function (event)

        {

          var id = $(this).attr ("id");

          if (!id) return;

          

          $(this).remove ();

          

          db.transaction (function (transaction) 

          {

            var sql = "DELETE FROM customers WHERE id=?";

            transaction.executeSql (sql, [id], function ()

            { 

              alert ("Customer deleted");

            }, error);

          });

        });        

      });

      

      $.mobile.changePage ($("#win2"));

      

    }, error);

  });

});


각 <li> list item 은 리스트 아이템에 <a> element 가 삽입되면서 높이가 더 커질 겁니다. 리스트 아이템의 id attribute 는 데이터베이스 안에 있는 client 의 identifier 입니다. 이것으로 해당 client 가 어느 리스트 아이템과 연관된 건지 알수 있습니다. 그래서 해당 리스트 아이템을 지울 때 데이터베이스의 해당 데이터도 지울 수 있는 거죠.


그리고 이제 각 리스트 아이템별로 swiperight event handler 를 연결 시킵니다. 이 이벤트가 발생하면 display 된 해당 리스트 아이템이 remove 될 겁니다. 그리고 나서 데이터베이스의 해당 id 를 가지고 있는 데이터가 지워질 겁니다.



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

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

GPS 와 구글 맵 사용하기  (0) 2012.12.29
툴바 만드는 예제들  (0) 2012.12.28
툴바 customize 하기  (0) 2012.12.27
툴바에서 이벤트 다루기  (2) 2012.12.27
Ajax 로 navigation bar 삽입하기  (0) 2012.12.26
Ajax로 툴바 insert 하기  (0) 2012.12.25
jQuery Mobile 툴바로 HTML element 변환하기  (0) 2012.12.25
다이나믹하게 툴바 생성하기  (0) 2012.12.25
accordion menu 생성 예제들  (0) 2012.12.23
accordion menu Customizing 하기  (0) 2012.12.22
jQuery Mobile/JQM Tutorial

툴바 만드는 예제들

2012. 12. 28. 05:33 | Posted by 솔웅


반응형
Examples of manipulation of toolbars



Manage a tab system in a navigation bar


navigation bar의 버튼을 클릭할 때마다 다른 content 를 보여주려고 합니다. 물론 page 이동 없이 각 버튼이 선택될 따마다 해당 page 에서 content 만 바꿔서 display 할 겁니다.


Manage tabs in the navigation bar


<!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 data-position=fixed>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content </p>

  </div>

  

  <div data-role=footer data-position=fixed>

    <div data-role=navbar>

      <ul>

        <li id=menu1><a href=#>Menu 1</a></li>

        <li id=menu2><a href=#>Menu 2</a></li>

        <li id=menu3><a href=#>Menu 3</a></li>

      </ul>

    </div>

  </div>

</div>


</body>

</html>


<script>


$("li").bind ("vclick", function (event)

{

  var id = this.id;

  if (id == "menu1") $("#home div:jqmData(role=content)")

                        .html ("<p> Content menu 1 </p>");

  else if (id == "menu2") $("#home div:jqmData(role=content)")

                        .html ("<p> Content menu 2 </p>");

  else if (id == "menu3") $("#home div:jqmData(role=content)")

                        .html ("<p> Content menu 3 </p>");

});


</script>

tistory570_01.html



navigation bar에 있는 버튼을 클릭할 때마다 화면의 contents 가 바뀝니다. 그리고 처음 화면이 뜰 때는 아무 버튼도 selected 돼 있지 않은 상태죠. 화면이 뜬 후 버튼을 클릭할 때마다 content를 바꾸는 로직이 실행 됩니다.


Simulate a click on the first button


$("div:jqmData(role=navbar)").bind ("navbarcreate", function (event)

{

  $("li#menu1 a.ui-btn").trigger ("vclick");

});


이 코드는 navigation bar 가 생성될 때  (navbarcreate event) 실행됩니다. 그 이전에는 ui-btn class의 <a> link는 존재하지가 않습니다. 왜냐하면 아직 jQuery Mobile 에 의해서 HTML 코드가 변환되지 않았으니까요.


Manage the content of the tabs by Ajax


HTML 에 있는 자바스크립트 코드로 tab들의 contents들을 수정하는 대신 Ajax를 통해서 서버로부터 HTML 코드를 받아 오는 것을 구현하겠습니다.


Retrieve the contents of the tabs 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 data-position=fixed>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content </p>

  </div>

  

  <div data-role=footer data-position=fixed>

    <div data-role=navbar>

      <ul>

        <li id=menu1><a href=#>Menu 1</a></li>

        <li id=menu2><a href=#>Menu 2</a></li>

        <li id=menu3><a href=#>Menu 3</a></li>

      </ul>

    </div>

  </div>

</div>


</body>

</html>


<script>


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

{

  $("li#menu1 a.ui-btn").trigger ("vclick");

});


$("li").bind ("vclick", function (event)

{

  var id = this.id;

  $.ajax (

  { 

    url : "action.php", 

    data : { menu : id },

    complete : function (xhr, result)

    {

      if (result != "success") return;

      var response = xhr.responseText;

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

    }

  });  

});


</script>


action.php file


<?
$menu = $_REQUEST["menu"];

$html = "";
if ($menu == "menu1")
  $html .=   "<p> Content menu 1 </p>";
else if ($menu == "menu2")
  $html .=   "<p> Content menu 2 </p>";
else if ($menu == "menu3")
  $html .=   "<p> Content menu 3 </p>";
  
echo utf8_encode ($html);
?>

action30.php

tistory570_02.html



Methods managing fixed toolbars



data-position="fixed" attribute를 사용한 fixed type 의 toolbar 들을 관리하기 위해 jQuery Mobile은 아래 메소드들을 제공합니다.


Methods managing fixed toolbars


Method

Signification

$(selector)
.fixHeaderFooter ();

Search toolbars with the data-position = "fixed" attribute in the descendants of the elements represented by the specified selector, and transforms them into fixed toolbars. This allows to dynamically create these toolbars (see an earlier example in this chapter)

$.mobile
.fixedToolbars
.setTouchToggleEnabled (enable)

Enables (if enable is true) or disables (if enable is false) the ability to display and hide fixed toolbars by clicking in the window. By default, clicking in the window displays or hides fixed toolbars present in it. To disable this default, use $.mobile
.fixedToolbars
.setTouchToggleEnabled (false).

$.mobile
.fixedToolbars
.show (immediately)

Allows you to reposition the fixed toolbars in the window, if the modification of the contents of the window has changed their position. The immediately parameter indicates whether repositioning occurs immediately (if true) or if it is done by a fade effect (if false, the default).

$.mobile
.fixedToolbars
.hide ()

Allows to hide the fixed toolbars in the window. They are redisplayed at the next click in the window (unless this function has been disabled by $.mobile
.fixedToolbars
.setTouchToggleEnabled (false).


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

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

GPS 와 구글 맵 사용하기  (0) 2012.12.29
Client side 데이터 베이스 이용하기  (0) 2012.12.28
툴바 customize 하기  (0) 2012.12.27
툴바에서 이벤트 다루기  (2) 2012.12.27
Ajax 로 navigation bar 삽입하기  (0) 2012.12.26
Ajax로 툴바 insert 하기  (0) 2012.12.25
jQuery Mobile 툴바로 HTML element 변환하기  (0) 2012.12.25
다이나믹하게 툴바 생성하기  (0) 2012.12.25
accordion menu 생성 예제들  (0) 2012.12.23
accordion menu Customizing 하기  (0) 2012.12.22
jQuery Mobile/JQM Tutorial

툴바 customize 하기

2012. 12. 27. 22:19 | Posted by 솔웅


반응형
Customize toolbars



이전 글에 있던 navigation bar 를 보죠. 우리는 단지 세개의 <li> elements만 사용해서 그 navigation bar 를 display 했었습니다. 그러면 jQuery Mobile 에 의해서 생성된 HTML 코드는 어떤지 Firebug를 통해서 볼까요?





각 <li> element이 정의된 테이블 안에 ui-navbar class가 생겼습니다.

각 <li> item에는 버튼에 해당하는 ui-btn class 를 가지고 있는 <a> link가 있구요. 이 링크는 클릭이 일어났을 때 ui-btn-active CSS class 를 갖게 될 겁니다. 그리고 다른 링크가 클릭되면 그 클래스는 없어집니다.


이 navigation bar를 우리 마음대로 꾸미기 위해서 이 CSS 클래스들을 이용할 수 있습니다.


Styling navigation bars


<!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-navbar a.ui-btn{

      font-size : 16px;

    }

    .ui-navbar a.ui-btn.ui-btn-active{

      font-style : italic;

      background : red;

    }

  </style>

</head> 

  

<body> 


<div data-role=page id=home>

  <div data-role=header data-position=fixed>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content </p>

  </div>

  

  <div data-role=footer data-position=fixed>

    <div data-role=navbar>

      <ul>

        <li><a href=#>Menu 1</a></li>

        <li><a href=#>Menu 2</a></li>

        <li><a href=#>Menu 3</a></li>

      </ul>

    </div>

  </div>

</div>


</body>

</html>

tistory569_01.html


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

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

GPS 와 구글 맵 사용하기  (0) 2012.12.29
Client side 데이터 베이스 이용하기  (0) 2012.12.28
툴바 만드는 예제들  (0) 2012.12.28
툴바에서 이벤트 다루기  (2) 2012.12.27
Ajax 로 navigation bar 삽입하기  (0) 2012.12.26
Ajax로 툴바 insert 하기  (0) 2012.12.25
jQuery Mobile 툴바로 HTML element 변환하기  (0) 2012.12.25
다이나믹하게 툴바 생성하기  (0) 2012.12.25
accordion menu 생성 예제들  (0) 2012.12.23
accordion menu Customizing 하기  (0) 2012.12.22
jQuery Mobile/JQM Tutorial

툴바에서 이벤트 다루기

2012. 12. 27. 18:36 | Posted by 솔웅


반응형
Manage events on toolbars



툴바는 일반적으로 어떤 action 을 취하기 위해 버튼 역할을 합니다. navigation bar navbar인 경우 <li> elements로 이뤄 집니다. 아이템을 클릭 했을 경우 이 클릭을 handle 하기 위해 click event (or the associated vclick virtual event)를 사용할 수 있습니다.


Use the click event in a navigation bar


<!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 data-position=fixed>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content </p>

  </div>

  

  <div data-role=footer data-position=fixed>

    <div data-role=navbar>

      <ul>

        <li><a href=#>Menu 1</a></li>

        <li><a href=#>Menu 2</a></li>

        <li><a href=#>Menu 3</a></li>

        <li><a href=#>Menu 4</a></li>

        <li><a href=#>Menu 5</a></li>

        <li><a href=#>Menu 6</a></li>

      </ul>

    </div>

  </div>

</div>


</body>

</html>


<script>


$("li").bind ("click", function (event)

{

  alert ($(this).find ("a").text ());

});

    

</script>

tistory568_01.html


navigation bar에서 두번째 버튼을 클릭하면 아래와 같이 될 겁니다.

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

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

GPS 와 구글 맵 사용하기  (0) 2012.12.29
Client side 데이터 베이스 이용하기  (0) 2012.12.28
툴바 만드는 예제들  (0) 2012.12.28
툴바 customize 하기  (0) 2012.12.27
Ajax 로 navigation bar 삽입하기  (0) 2012.12.26
Ajax로 툴바 insert 하기  (0) 2012.12.25
jQuery Mobile 툴바로 HTML element 변환하기  (0) 2012.12.25
다이나믹하게 툴바 생성하기  (0) 2012.12.25
accordion menu 생성 예제들  (0) 2012.12.23
accordion menu Customizing 하기  (0) 2012.12.22
jQuery Mobile/JQM Tutorial

Ajax 로 navigation bar 삽입하기

2012. 12. 26. 12:45 | Posted by 솔웅


반응형
Insert navigation bars by Ajax



footer toolbar 를 바꿔서 navigation bar (navbar) 를 넣어 보겠습니다.


Insert a navigation bar in the footer toolbar 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>

   <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").append (response);

    

    $("#home").fixHeaderFooter ();

    $("#navbar").navbar ();

  }

}); 


</script>


이 소스코드는 이전 글의 소스 코드와 거의 같습니다. 단지 element 를 navigation bar 로 변환하기 위해 navbar () method 를 사용한 것만 다릅니다.


action.php file


<?
$html = "";
$html .= "<div id=footer class='ui-bar-a ui-footer' data-position=fixed>";
$html .=   "<h1 class=ui-title>Footer part</h1>";
$html .=   "<div id=navbar>";
$html .=     "<ul>";
$html .=       "<li><a href=# data-icon=refresh>Refresh</a></li>";
$html .=       "<li><a href=# data-icon=info>Help</a></li>";
$html .=       "<li><a href=# data-icon=delete>Close</a></li>";
$html .=     "</ul>";
$html .=   "</div>";
$html .= "</div>";
echo utf8_encode ($html);
?>

action29.php

tistory567_01.html


이 navigation bar 는 서버에 의해 return 된 HTML 에 전통적인 방법으로 간단하게 describe 돼 있습니다.





만약 여기서 navbar () method 를 없애면 HTML 은 jQuery Mobile 에 의해 변환되지 않게 됩니다. 그러면 아래와 같이 되죠.





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

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

GPS 와 구글 맵 사용하기  (0) 2012.12.29
Client side 데이터 베이스 이용하기  (0) 2012.12.28
툴바 만드는 예제들  (0) 2012.12.28
툴바 customize 하기  (0) 2012.12.27
툴바에서 이벤트 다루기  (2) 2012.12.27
Ajax로 툴바 insert 하기  (0) 2012.12.25
jQuery Mobile 툴바로 HTML element 변환하기  (0) 2012.12.25
다이나믹하게 툴바 생성하기  (0) 2012.12.25
accordion menu 생성 예제들  (0) 2012.12.23
accordion menu Customizing 하기  (0) 2012.12.22
jQuery Mobile/JQM Tutorial

Ajax로 툴바 insert 하기

2012. 12. 25. 19:40 | Posted by 솔웅


반응형
Insert toolbars by Ajax




자바스크립트로 footer toolbar를 다이나믹하게 생성하는 대신 Ajax로 서버로부터 HTML 코드를 다운받아서 insert 해 보겠습니다.


Insert a footer toolbar 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>

   <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").append (response);

    

    $("#home").fixHeaderFooter ();

  }

}); 


</script>


<div>에 사용한 fixHeaderFooter () method call 을 잘 보세요. 이렇게 함으로서 data-position="fixed" attribute를 search 하고 거기에 따라 포지션을 정하도록 하는 겁니다. (여기서는 화면의 bottom 부분에 위치하게 되죠)


action.php file


<?
$html = "";
$html .= "<div id=footer class='ui-bar-e ui-footer' data-position=fixed>";
$html .=   "<h1 class=ui-title>Footer part</h1>";
$html .= "</div>";
echo utf8_encode ($html);
?>

action28.php

tistory565_01.html


툴바는 ui-bar-e and ui-footer CSS classes들에서 꾸며줍니다. 그리고 자바스크립트 코드내에서 fixHeaderFooter () method에 의해
data-position="fixed" attribute가 사용되게 될 거구요. 또한 내용을 중앙으로 맞추기 위해 <h1> element를 사용해 ui-title class를 사용하도록 합니다.
반응형
저작자표시 비영리 동일조건

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

Client side 데이터 베이스 이용하기  (0) 2012.12.28
툴바 만드는 예제들  (0) 2012.12.28
툴바 customize 하기  (0) 2012.12.27
툴바에서 이벤트 다루기  (2) 2012.12.27
Ajax 로 navigation bar 삽입하기  (0) 2012.12.26
jQuery Mobile 툴바로 HTML element 변환하기  (0) 2012.12.25
다이나믹하게 툴바 생성하기  (0) 2012.12.25
accordion menu 생성 예제들  (0) 2012.12.23
accordion menu Customizing 하기  (0) 2012.12.22
accordion menu 가 열려 있는지 닫혀 있는지 알아내기  (0) 2012.12.20
jQuery Mobile/JQM Tutorial

jQuery Mobile 툴바로 HTML element 변환하기

2012. 12. 25. 19:22 | Posted by 솔웅


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



jQuery Mobile 에 의해 변환된 이전 글 예제의 HTML 코드입니다.


header toolbar 에는 ui-bar-a and ui-header CSS classes 들이 있습니다. 그리고  footer toolbar에는 ui-bar-a and ui-footer classes 들이 있습니다.
<h1> element는 각 아이템들 마다 들어있고 text를 가운데로 보내는 ui-title class 가 있습니다. ui-bar-a class는 디폴트 theme 과 연결 돼 있습니다.(여기서는 a theme)

이 툴바들 중 하나에 data-theme attribute를 설정한다면 ui-bar-a class는 해당되는 클래스로 replace 될 겁니다.(eg ui-bar-e for the "e" theme)


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

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

툴바 만드는 예제들  (0) 2012.12.28
툴바 customize 하기  (0) 2012.12.27
툴바에서 이벤트 다루기  (2) 2012.12.27
Ajax 로 navigation bar 삽입하기  (0) 2012.12.26
Ajax로 툴바 insert 하기  (0) 2012.12.25
다이나믹하게 툴바 생성하기  (0) 2012.12.25
accordion menu 생성 예제들  (0) 2012.12.23
accordion menu Customizing 하기  (0) 2012.12.22
accordion menu 가 열려 있는지 닫혀 있는지 알아내기  (0) 2012.12.20
accordion menu 열고 닫는 것 구현하기  (0) 2012.12.20
jQuery Mobile/JQM Tutorial

다이나믹하게 툴바 생성하기

2012. 12. 25. 10:50 | Posted by 솔웅


반응형

툴바를 생성하는 것은 jQuery method들을 사용합니다. 그리고 별도의 utility method들도 jQuery Mobile에 의해 추가 됐습니다. 예를 들어 네비게이션 바의 관리를 좀 더 용이하게 하기 위해 navbar () method를 추가했죠. Navigation bars 들은 표준 navbar component와 연계 돼 있습니다.



Dynamically create a toolbar


툴바에는 두가지 타입이 있습니다. 바로 header (top of the window) and footer (bottom of the window) 가 있죠. toolbar를 dynamic  하게 생성하는 footer type과 header toolbars 들은 HTML 안에 포함이 되게 되는데요 header toolbars 에는 이전 페이지로 돌아가도록 하는 Back button 이 있을 수 있습니다.


Dynamic creation of a footer toolbar


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

   <p> Window content </p>

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<div data-role=footer data-position=fixed>";

html +=   "<h1> Footer part </h1>";

html += "</div>";


$("#home").append (html);


</script>

tistory563_01.html






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

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

툴바 customize 하기  (0) 2012.12.27
툴바에서 이벤트 다루기  (2) 2012.12.27
Ajax 로 navigation bar 삽입하기  (0) 2012.12.26
Ajax로 툴바 insert 하기  (0) 2012.12.25
jQuery Mobile 툴바로 HTML element 변환하기  (0) 2012.12.25
accordion menu 생성 예제들  (0) 2012.12.23
accordion menu Customizing 하기  (0) 2012.12.22
accordion menu 가 열려 있는지 닫혀 있는지 알아내기  (0) 2012.12.20
accordion menu 열고 닫는 것 구현하기  (0) 2012.12.20
Ajax 로 accordion menu 삽입하기  (0) 2012.12.20
jQuery Mobile/JQM Tutorial

accordion menu 생성 예제들

2012. 12. 23. 22:20 | Posted by 솔웅


반응형
Examples of manipulation of accordion menus



Load the contents of an accordion menu by Ajax


메뉴를 오픈할 때 Ajax에 의해 각 accordion menu 의 내용을 retrieve 하는 예제를 만들겠습니다. 만약 현재 content 가 empty 일 경우 retrieve 됩니다. 그러니까 매번 메뉴가 open 될 때마다 이 로직이 동작하는 건 아니죠.


Get the contents of the accordion menus 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>

    <div id=id1 data-role=collapsible data-collapsed=true>

      <h1>Menu 1 : Click to open / close</h1>

    </div>

    <div id=id2 data-role=collapsible data-collapsed=true>

      <h1>Menu 2 : Click to open / close</h1>

    </div>

  </div>

</div>


</body>

</html>


<script>


$("#id1, #id2").bind ("collapsiblecreate", function ()

{

  $("a.ui-collapsible-heading-toggle", this).bind ("click", function (event)

  {

    var h1 = $(this).closest ("h1");

    var content = h1.siblings (".ui-collapsible-content");

    var div = $(this).closest (".ui-collapsible");

    if (content.is (".ui-collapsible-content-collapsed") && 

        $.trim (content.html ()) == "")

    {

      $.ajax (

      { 

        url : "action.php", 

        data : { menu : div.attr ("id") },

        complete : function (xhr, result)

        {

          if (result != "success") return;

          var response = xhr.responseText;

          $(content).append (response);

        }

      });     

    }

  });

});


</script>


각 메뉴는 HTML 안에 내용이 비어져 있는 상태로 생성됩니다. 그리고  ui-collapsible-heading-toggle class 의 <a> element 가 있어서 menu 타이틀을 클릭 할 수 있습니다. 이 element 에서 content (of ui-collapsible-content class) 에 해당하는 <div> element retrieve 하기 위해 DOM 을 살펴 보게 되죠. 그리고 나서 <div>는 메뉴 타이틀과 content 를 포함하게 됩니다. 이 때 menu 의 id 로 접근을 하게 됩니다.


또한 메뉴가 close 된 상태인지 그리고 content 가 empty 인지 아닌지도 알아낼 수 있습니다. Ajax call 은 메뉴가 close 상태 이면서 empty인 상태에서만 만들어 지거든요. ui-collapsible-content-collapsed CSS class 가 있으면 content 가 close 인 상태라는 것을 기억해 두세요. 그 클래스가 없으면 open 인 상태 입니다.


action.php file


<?
$menu = $_REQUEST["menu"];

$html = "";
if ($menu == "id1")
{
  $html .=   "<p> Paragraph 1.1 </p>";
  $html .=   "<p> Paragraph 1.2 </p>";
  $html .=   "<p> Paragraph 1.3 </p>";
}
else
{
  $html .=   "<p> Paragraph 2.1 </p>";
  $html .=   "<p> Paragraph 2.2 </p>";
  $html .=   "<p> Paragraph 2.3 </p>";
}
echo utf8_encode ($html);
?>

action27.php

tistory561_01.html


Dynamically change the accordion menu title


The accordion menu title is currently fixed. It is possible to dynamically change, eg change the title as the menu is open or closed.


Change the menu title as the menu is open or closed


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

    <div id=id1 data-role=collapsible>

      <h1>Menu: closed</h1>

      <p> Paragraph 1.1 </p>

      <p> Paragraph 1.2 </p>

      <p> Paragraph 1.3 </p>

    </div>

    <div id=id2 data-role=collapsible>

      <h1>Menu: closed</h1>

      <p> Paragraph 2.1 </p>

      <p> Paragraph 2.2 </p>

      <p> Paragraph 2.3 </p>

    </div>

  </div>

</div>


</body>

</html>


<script>


$("#id1, #id2").bind ("collapsiblecreate", function ()

{

  $("a.ui-collapsible-heading-toggle").bind ("vclick", function (event)

  {

    var h1 = $(this).closest ("h1");

    if (h1.is (".ui-collapsible-heading-collapsed")) 

      $("span.ui-btn-text", h1).first ().text ("Menu: open");

    else 

      $("span.ui-btn-text", h1).first ().text ("Menu: closed");

  });

});


</script>

tistory561_02.html


menu title은 ui-btn-text class의 <span> element 에 insert 됩니다. 이것은  title (here <h1>). element 안에 위치하게 되죠. title 안에 여러개의 <span> elements (class ui-btn-text의)가 있을 수 있습니다.이 content 는 jQuery 의 text () method에 의해 modify 됩니다.


Producing an effect at the opening and closing the accordion menu


jQuery 를 사용해서 open/closed 에 대해 visual effect를 줄 수 있습니다.  예를 들어 open 할 떄 show (1000)효과를 주고 close 할 때 hide (1000)효과를 줄 수 있습니다.


Effect at the opening and closing accordion menus


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

    <div id=id1 data-role=collapsible data-collapsed=true>

      <h1>Menu 1: Click to open / close</h1>

      <p> Paragraph 1.1 </p>

      <p> Paragraph 1.2 </p>

      <p> Paragraph 1.3 </p>

    </div>

    <div id=id2 data-role=collapsible data-collapsed=true>

      <h1>Menu 2: Click to open / close</h1>

      <p> Paragraph 2.1 </p>

      <p> Paragraph 2.2 </p>

      <p> Paragraph 2.3 </p>

    </div>

  </div>

</div>


</body>

</html>


<script>


$("#id1, #id2").bind ("collapsiblecreate", function ()

{

  $("a.ui-collapsible-heading-toggle").bind ("vclick", function (event)

  {

    var h1 = $(this).closest ("h1");

    var content = h1.siblings (".ui-collapsible-content");

    if (content.is (".ui-collapsible-content-collapsed")) content.show (1000);

    else content.hide (1000);

  });

});


</script>

tistory561_03.html


각 accordion menu 의 title 부분을 클릭할 때 이것을 handle 할 수 있습니다. 특히 title 안에 <a> link 가 있을 때요. 이 <a> link를 통해서 우리는 ui-collapsible-content class의 <div> element 와 연관된 메뉴의 content를 얻기 위해 DOM 을 navigate 할 수 있습니다.

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

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

툴바에서 이벤트 다루기  (2) 2012.12.27
Ajax 로 navigation bar 삽입하기  (0) 2012.12.26
Ajax로 툴바 insert 하기  (0) 2012.12.25
jQuery Mobile 툴바로 HTML element 변환하기  (0) 2012.12.25
다이나믹하게 툴바 생성하기  (0) 2012.12.25
accordion menu Customizing 하기  (0) 2012.12.22
accordion menu 가 열려 있는지 닫혀 있는지 알아내기  (0) 2012.12.20
accordion menu 열고 닫는 것 구현하기  (0) 2012.12.20
Ajax 로 accordion menu 삽입하기  (0) 2012.12.20
HTML을 jQuery Mobile 의 accordion menu 로 변환하기  (1) 2012.12.18

티스토리툴바