동일한 HTML 파일 내에서 여러 페이지에 동일한 헤더를 사용하는 방법

iPad HTML5/CSS3 기반 앱을 만들고 JQuery Mobile에 대해 알아보고 사용하려고했습니다. 여기 어떻게 생겼는지 :동일한 HTML 파일 내에서 여러 페이지에 동일한 헤더를 사용하는 방법

Screenshot from my mobile app

이 요약 페이지입니다, 사용자가 적절한 상세 페이지로 이동합니다 그리드 요소 중 하나를 클릭합니다. (그리드 "a"는 id가 "blockA"인 내부 페이지 등으로 가야합니다.).

몇 가지 문제가 발생하여 그물에 명확한 단서를 찾을 수 없습니다.

내 머리글 + 사진 및 요약 + "정보"표시 줄을 수정하고 싶습니다. 내가 찾은 유일한 해결책은 헤더 div를 "blockA"페이지와 5 개의 다른 페이지로 복사하여 붙여 넣는 것입니다. 기본적으로 내 상단 화면을 고정시키고 하단 탐색 화면을 링크 탐색에서 변경하고 싶습니다. 나는 jquery를 사용하여 메소드를 추가 할 것을 생각했지만 그렇게하는 "원시"방법이 있습니까?
내 머리글은 사진에서 볼 수있는 것처럼 가져 오기가 정말 어려웠습니다. CSS를 약간 변경해야했습니다. 더 쉬운 방법이 있습니까? JQuery 구조 CSS에서 놓친 클래스가 있습니까? JQM에 대한 철저한 클래스 목록을 찾을 수 없습니다.
CSS를 수정하지 않고 다른 구성 요소의 높이를 설정하는 방법. 여기

은 내 HTML 코드의 일부 :

<body> 
    <div data-role="page" id="page_main" style="min-height: 496px; "> 
     <div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection"> 
      <h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1> 
      <ul data-role="listview"> 
       <li class="pta-file-content" data-icon="custom" data-theme="c"> 
        <img class="pta-img-collab" src="img/collab/Pic-S.jpg"/> 
        <div class="ui-grid-a"> 
         <div class="ui-block-a"> 
          <p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p> 
         </div> 
         <div class="ui-block-b"> 
          <p><span class='ptaGetUser' attribute-value='mail'>[email protected]</span></p> 
         </div> 
         <div class="ui-block-a"> 
          <p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p> 
         </div> 
         <div class="ui-block-b"> 
          <p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p> 
         </div> 
         <div class="ui-block-a"> 
          <p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p> 
         </div> 
         <div class="ui-block-b"> 
          <p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p> 
         </div> 
         <div class="ui-block-a"> 
          <p><span class='ptaGetUser' attribute-value='status'>Status</span></p> 
         </div> 
         <div class="ui-block-b"> 
          <p><span class='ptaGetUser' attribute-value='building'>Company</span></p> 
         </div> 
         <div class="ui-block-a"> 
          <p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p> 
         </div> 
        </div> 
       </li> 
      </ul> 
      <h1 class="ui-title">Informations</h1> 
     </div> 

      <div class="ui-grid-b"> 
       <div class="ui-block-a"> 
        <a href="#blockA"><span id='ptaGetUserBlockA'>a</span></a> 
       </div> 
       <div class="ui-block-b"> 
        <a href="#blockB"><span id='ptaGetUserBlockB'>b</span></a> 
       </div> 
       <div class="ui-block-c"> 
        <a href="#blockC"><span id='ptaGetUserBlockC'>c</span></a> 
       </div> 
       <div class="ui-block-a"> 
        <a href="#blockD"><span id='ptaGetUserBlockD'>d</span></a> 
       </div> 
       <div class="ui-block-b"> 
        <a href="#blockE"><span id='ptaGetUserBlockE'>e</span></a> 
       </div> 
       <div class="ui-block-c"> 
        <a href="#blockF"><span id='ptaGetUserBlockF'>f</span></a> 
       </div> 
      </div> 

    </div> 
    <div data-role="page" data-title="Page Foo" id="blockA"> 
     <div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection"> 
      <h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1> 
      <ul data-role="listview"> 
       <li class="pta-file-content" data-icon="custom" data-theme="c"> 
        <img class="pta-img-collab" src="img/collab/Pic-S.jpg"/> 
        <div class="ui-grid-a"> 
         <div class="ui-block-a"> 
          <p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p> 
         </div> 
         <div class="ui-block-b"> 
          <p><span class='ptaGetUser' attribute-value='mail'>[email protected]</span></p> 
         </div> 
         <div class="ui-block-a"> 
          <p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p> 
         </div> 
         <div class="ui-block-b"> 
          <p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p> 
         </div> 
         <div class="ui-block-a"> 
          <p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p> 
         </div> 
         <div class="ui-block-b"> 
          <p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p> 
         </div> 
         <div class="ui-block-a"> 
          <p><span class='ptaGetUser' attribute-value='status'>Status</span></p> 
         </div> 
         <div class="ui-block-b"> 
          <p><span class='ptaGetUser' attribute-value='building'>Company</span></p> 
         </div> 
         <div class="ui-block-a"> 
          <p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p> 
         </div> 
        </div> 
       </li> 
      </ul> 
      <h1 class="ui-title">Informations</h1> 
     </div> 
     mon bloc A 
    </div> 
</body>

ptaGetUser 보지 말라 걸쳐, 내가 같은 HTML 페이지에 원활한 지속성을 추가 임해야 내 나중에 지속성 프레임 워크입니다 . 당분간 이것은 단지 여기에 있습니다. 또한이 예제의 첫 번째 블록 만 추가했습니다.

내 CSS는이 권리 차원을 만들려면 :

.ui-title,.ui-title 
{ 
    height:24px; 
} 

.banner 
{ 
    height:45px; 
    padding: 0px 15px !important; 
} 

.ui-li-thumb, .ui-li-icon { 
    max-width:165px; 
    max-height:165px; 
} 

.pta-file-content 
{ 
    height:148px; 
} 

.ui-li-has-thumb 
{ 
    padding-left: 165px !important; 
} 
.ui-grid-a 
{ 
    padding-top: 5px; 
} 
.ui-grid-b 
{ 
    height:543px; 
    width: 1022px; 
} 

.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b,.ui-grid-b .ui-block-c 
{ 
    height:50%; 
    width:32%; 
    border: 1px solid black; 
}

나는 페이지를 표시하는 최초의 격자 요소를 클릭 전체 화면 슬라이드. 보시다시피, 전체 헤더를 두 번째 페이지 div에 복사했는데 코드 가독성에 좋지 않습니다. 아래쪽 테두리가 보이지 않기 때문에 그리드 테두리에 CSS 문제가 있습니다. 어떻게 CSS를 수정하지 않고 테두리에 테두리를 추가 할 수 있습니까?

출처

2012-02-01 TecHunter

1) jQuery Mobile은 현재 영구 머리글과 바닥 글을 제공하지 않지만 향후 버전 1.1이 제공됩니다. 전환 중 페이지에 머물러 있는지 여부는 아직 답변되지 않은 것입니다. 최선의 방법은 페이지에 서버 측 언어를 사용하고 헤더를 포함으로 설정하는 것입니다. 이렇게하면 여러 페이지에 걸쳐 복사하여 붙여 넣을 필요가 없습니다.

2) jQuery Mobile은 앱을 만드는 데 적합하지만 실제로 맞춤 설정을 받으려면 직접 작성해야합니다. 그 CSS 또는 HTML 또는 둘 다.

3) 사용자 정의 CSS를 작성하는 것이 요소의 맞춤 높이를 얻는 유일한 방법입니다.

출처

2012-02-03 21:04:06 commadelimited

CSS를 수정하지 않고도 많은 일을하려는 것처럼 보입니다. 왜 이것이 프로젝트의 요구 사항입니까?

영구 헤더를 찾는 것처럼 들립니다. Start here에 JQM Footers 문서가 있습니다. 그것들은 지속성을 커버하며 헤더에 대해서도 동일해야합니다. JQM 문서가이 문제를 해결하지 못하면 other Stackoverflow post을 확인하십시오.
사용자 지정 구성을 찾으려면이 의 맨 아래를 확인하십시오. 그래도 문제가 해결되지 않으면 the JQM layout grids을 사용해보세요. 그렇지 않으면 인라인 또는 기타 방식으로 CSS가 필요합니다.
여기에있는 문제를 완전히 이해할 수 있는지 확신 할 수 없지만 CSS/HTML을 사용하여 레이아웃 너비는 제어해야하지만 높이는 제어해야한다고 들었습니다. 죄송합니다. 문제를 해결하는 데 도움이되는 기사를 찾으면 해당 디자인 철학을 고려해 볼 수 있습니다. 마찬가지로,이 게시물은 균등하게하는 방법을 알려줍니다 balance height with CSS.

마지막으로 테두리에 대한 질문은 CSS를 사용하여 제어해야합니다. 인라인 또는 JQM Themeroller으로 만든 스타일 시트와 같은 스타일 시트를 사용하는지 여부에 관계없이 CSS가 아닌 다른 스타일의 경계선을 인식하지 못합니다.

희망이 도움이됩니다.

출처

2012-02-01 21:47:34 shanabus

Nah, JQuery Mobile이 처음 인 이유는 특정 데이터 역할을 사용하는 것과 같이 CSS 수정을 줄이는 것이 더 좋을 것이라고 생각했습니다. 이 일을 할 수있는 깨끗한 방법이없는 것처럼 보입니다. 내 코드에서 볼 수 있듯이 헤더와 레이아웃 격자에 대해 알고 있습니다. – TecHunter

내 게시물이 귀하의 질문에 답변하지 않으십니까? 나는 당신이 찾을 수있는 더 나은 대답을 잘 모르겠지만 나는 대답으로 표시되거나 더 나은 해결책으로 보여 주시면 감사하겠습니다. 멍청이! – shanabus

미안하지만 머리말이나 머리말이나 레이아웃 격자를 지적했기 때문에 그럴 수는 없지만 이미 사용하고 있습니다. – TecHunter

동일한 HTML 파일 내에서 여러 페이지에 동일한 헤더를 사용하는 방법

답변

관련 문제