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

최근에 받은 트랙백

글 보관함

툴바 만드는 예제들

2012.12.27 15: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).