쿼리 모바일 헤더를 동일하게 유지

Question

여러 페이지에 동일한 헤더가있는 작은 응용 프로그램을 작성하므로 동일한 코드 비트를 반복 작성하지 않고 'include (' header.php ')'in php.

는 내가 현재했을 : 다음 페이지에

//Set header for each page 
    var fund_header = '<div data-role="header" data-theme="z" data-position="inline"><a href="javascript:void(0)" onclick="javascript: reset(); $.mobile.changePage("#fund_1");" data-icon="delete" class="restart">Restart</a><h1>Funding</h1><a href="index.html" data-icon="home" class="ui-btn-right" data-iconpos="notext" rel="external" data-ajax="false">Home</a></div>'; 

추가 :

<div data-role="page" id="fund_2" data-theme="z"> 
    <script type="text/javascript">document.write(fund_header);</script> 

이것이 가장 좋은 방법인가요? 아니면 더 좋은 방법이 있습니까?

Answer 1

변수에 헤더를 저장하는 대신 별도의 헤더 HTML 파일을 만들고 Ajax를 사용하여로드 할 수 있습니다.

직접 시도하지는 않았지만 jQuery Mobile의 API를 살펴보면 직접 ajax 요청을 작성하는 대신 $.mobile.loadPage을 사용할 수있는 것으로 보입니다.

아마 같을 것이다 요청 : $.mobile.loadPage('header.html', { pageContainer: $('header') });

참조 : 문제가 해결되지 않은 경우 http://code.jquery.com/mobile/latest/demos/docs/api/methods.html

, 당신은 또한 사용할 수있는 jQuery의 .ajax (http://api.jquery.com/jQuery .ajax /).

JQM이 제공하는 더 나은 솔루션이 있다면 듣고 싶습니다.