한 페이지를 여러 파일로 나누기

페이지 내용을 여러 파일로 나누어서 모든 코드가 하나의 파일에 없도록하는 표준 방법은 무엇입니까? 아래 코드 단편은 하나의 파일에 포함되어 있습니다. 각 div id 페이지를 별도의 파일로 참조하면 안됩니다. 표준 연습이 있습니까?한 페이지를 여러 파일로 나누기

<div id="page-1" data-role="page"> 
    <div data-role="header"> 
     <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a> 
     <h1>Page 1</h1> 
    </div> 
    <div data-role="content"> 
     <p>Page 1 content</p> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#page-1" data-role="tab" data-icon="grid" class="ui-btn-active">Page 1</a></li> 
       <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li> 
       <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div id="page-2" data-role="page"> 
    <div data-role="header"> 
     <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a> 
     <h1>Page 2</h1> 
    </div> 
    <div data-role="content"> 
     <p>Page 2 content</p> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li> 
       <li><a href="#page-2" data-role="tab" data-icon="grid" class="ui-btn-active">Page 2</a></li> 
       <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div id="page-3" data-role="page"> 
    <div data-role="header"> 
     <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a> 
     <h1>Page 3</h1> 
    </div> 
    <div data-role="content"> 
     <p>Page 3 content</p> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li> 
       <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li> 
       <li><a href="#page-3" data-role="tab" data-icon="grid" class="ui-btn-active">Page 3</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

출처

2012-03-13 blue-sky

jQuery 모바일에는 색인 페이지의 모든 페이지가 있다고 생각합니다. – Sethen

jQuery 모바일을 사용하여 서버의 다른 페이지에서 다른 페이지를 아약스 할 수 있습니다. 문서를 살펴보면 실제로 그것에 대해 자세하게 설명하지 않습니다. – Sethen

@SethenMaleno 다음은 AJAX를 통해 원격 페이지를 DOM에 가져 오는 방법을 나타내는 jQuery Mobile 설명서의 특정 페이지입니다. http://jquerymobile.com/demos/1.1.0-rc.1/docs/page/page -navmodel.html – Jasper

는 다음과 같은 파일에 각 data-role="page 및 data-role="dialog" 요소를 가지고 붙여 넣습니다

<!doctype html> 
<html> 

    <head> 
     <meta charset="utf-8"> 
     <title>My Page's Title</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
     <link rel="stylesheet" href="/css/custom.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
     <script src="/js/custom.js"></script> 
    </head> 
    <body> 
     [Your data-role="page" tag goes here] 
    </body> 

</html>

당신은 자신에 생각을 할 수있다, really? why duplicate so much in every file?. 그 이유는 사용자가 사이트를 입력하는 위치에 상관없이 페이지를로드하는 데 필요한 모든 자산을 갖게되기 때문입니다. jQuery Mobile은 AJAX를 사용하여 후속 페이지를 DOM으로 가져오고 모든 코드를 항상 사용할 수있는 경우로드 된 각 페이지가 올바르게 작동하므로 이는 유용합니다.

알림 jQuery Mobile이 포함 된 후에 /js/custom.js 및 /css/custom.css 파일을 추가했습니다. 이것은 전체 사이트에 대한 모든 사용자 정의 JS/CSS를위한 것입니다.

<a href="/hotel/room/special.html">My Link</a>

당신은 항상 올바른 URL을 가리키는되고 페이지가 이미 DOM에로드 된 경우이 이미 그 버전을 확인하는 데 도움이 방법 : 당신은 페이지 사이를 연결할 때

는 절대 URL을 사용 DOM은 다른 버전을 가져 오는 대신 사용됩니다 (DOM에 동일한 페이지가 2 개있는 경우 사이트가 중단 될 수 있음).

출처

2012-03-13 23:10:01 Jasper

한 페이지를 여러 파일로 나누기

답변

관련 문제