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

최근에 받은 트랙백

글 보관함

Ajax 로 navigation bar 삽입하기

2012. 12. 25. 19: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 에 의해 변환되지 않게 됩니다. 그러면 아래와 같이 되죠.





반응형

Comment