2012-01-25 2 views
6

PhoneGap 및 jQuery Mobile을 사용하여 기본 Android 애플리케이션을 만들고 있습니다.jQuery와 PhoneGap - HTML 또는 JS와 함께 HTML 파일 clientside 포함?

다중 페이지를 만들 때 항상 동일한 탐색 모음을 포함하지 마십시오. 그래서 (들) html을 포함 시키려고했습니다. 그러나 그것은 효과가 없습니다. 이 내가 여기까지 시도한 것입니다 :

<!--#include file="navigation.inc.html" --> 
<!--#include virtual="navigation.inc.html" --> 
<!--#include file="navigation.inc.shtml" --> 
<!--#include virtual="navigation.inc.shtml" --> 

이 페이지는 (웹) 서버에 배치되지 않습니다. navigation.inc.shtml이 서버가 아닌 경우 html 또는 javascript로 파일을 포함 할 수 있습니까?

답변

4

동일한 문제가 있습니다. 내가 알 수있는 한 Android는 Server Side Includes를 무시합니다.

나는이 answer에 따라 load과 대답에 가까운지고있어하지만 난 약간 다른 접근 방식 복용 해요 : 다음

<div data-include="footer"></div> 

: 외부 파일을 포함 할 필요가 어디

을 , 끝까지 (다중 페이지) index.html

$('div[data-include]').each(function() { 
    $(this).load($(this).attr('data-include') + '.html').trigger('create'); 
}); 

문제는 초기 페이지보기에는 작동하지 않는다는 것입니다. 이후의 모든 페이지가 멋지게 보입니다.

+0

참조 : http://stackoverflow.com/questions/7974630/jquery-mobile-include-footer-from-external-file – tomo7

+0

당신은 정말 위대한 작품입니다. –

1

필자는 data-role = "footer"에 대해 한 번 쓰기 접근 방식을 찾고 있었고 아래에 표시된 것처럼 작동하게했습니다. 내가 맘에 안 들는 점은 1.) include 파일에서 나온 것이 아니기 때문에 2.) navbar 코드는 읽기와 유지가 약간 어렵다. (이 코드는 document.ready에서 이동하지 않습니다.)

var myFooter = '<div data-role="navbar"><ul><li><a href="#myPageName" >Send</a></li><li><a href="#myPageTwo" >Set Up</a></li><li><a href="#myPageThree" >Help</a></li></ul></div>'; 

// use this code pointing to each data-role="footer" where you want this navbar 
$('div#myPageName').live("pagebeforecreate", function(){ 
     $('div#myFooterName').html(myFooter) 
}) 

pagecreate 이벤트도 작동합니다.

1

Jhof에서 제안한대로 클라이언트 측 JavaScript 코드를 사용했습니다. 탐색 헤더

템플릿 예 :

<body onLoad="initialization()"> 
.... 
    <div template-include="nav-header"> 
    </div> 
    <script type="text/javascript"> 
    function loadTemplates() 
    { 
    $('div[template-include]').each(function() { 
     $(this).load('tpl/' + $(this).attr('template-include') + '.html').trigger('create'); 
}); 
    } 
    function initialization() { 
     .... 
     loadTemplates(); 
     .... 
    } 
    </script> 

<body> 

나는 body.onLoad 이벤트에서 호출 loadTemplates()

initializationFunction 모든 내 초기화 함수를 호출 초기화 기능을 만들었습니다. onLoad html 구문 분석이 끝날 때 이벤트가 발생합니다.

그래서 초기 페이지보기에서도 작동합니다.