jQuery Mobile의 메뉴 격자

Question

이 레이아웃을 jQuery Mobile (이 예제에서 메뉴 격자, 6 개의 버튼)으로 구현하는 가장 좋은 방법은 무엇입니까?

jQuery Mobile Grid를 사용해 보았지만 전폭과 전체 높이를 만들고 색상을 원하는대로 변경하는 등 많은 문제가있었습니다.

Answer 1

당신은 해당 페이지에 대한 자신의 스타일에 그것을 만들 수 있습니다. 플로트 아이콘과 그들에게 50 % 너비 (또는 당신이 상자 모델로 테두리를 사용하는 경우 덜)

Answer 2

여기에 몸을 필요로하는 일이 많지 않으므로 나는 헤더 네비게이션의 길을 가고 있다고 느낍니다. 제일 쉬운. 페이지의 헤더 바로 뒤에 다음 코드를 삽입하면됩니다. 예를 들어 : 여기 여섯 개 항목을 가지고 있기 때문에 당신의 모형에 표시되는

<div data-role='header' data-position='inline' role='banner' data-theme='f' > 

    <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">App Name</h1> 

    <div data-role="navbar" data-theme='c'> 
     <ul> 
      <li><a href="" > 
       Camera 
      </a></li> 

      <li><a href="" > 
       Wave 
      </a></li> 

      <li><a href="" > 
       Lock 
      </a></li> 


      <li><a href="" > 
       Pencil 
      </a></li> 


      <li><a href="" > 
       Star 
      </a></li> 


      <li><a href="" > 
       Friends 
      </a></li> 

     </ul> 
    </div><!-- /navbar --> 
</div><!-- header --> 

이, JQuery와 모바일이 자동적으로 2x3이다 그리드의 형성으로 정렬 할 것이다 (이상이어야 폭의 처리됩니다). 이것 이외의, 높이에 대한 최선의 방법은 CSS에서 일부 산술 연산을하는 것일 수 있습니다. 예 : 헤더 막대가 12 픽셀 인 경우 각 블록의 높이를 설정합니다 (예 : 33 % -4px;

색상 설정 등의 경우 jquery mobile theme roller은 손으로 만든 CSS보다 효과적입니다.

Answer 3

를 사용하여 데이터 그리드 "A"

를 사용하여 아래 하나

<div data-role="navbar" data-grid="a">