jquery 모바일 응답 목록 디자인

Question

jquery 모바일 1.4.0을 사용하여 작은 webapp를 만들고 반응 형 목록을 만드는 데 어려움이 있습니다. 나는 다음 코드 (! 나는이과의 관련이없는 것처럼 PHP를 삭제했습니다) 한

<div class='bespoke-bp'> 
     <ul data-role='listview' data-inset='true' data-divider-theme='a'> 
      <li data-role='list-divider'> 
       <div class='container_12'> 
        <div class='grid_15'> 
         <div class='ui-grid-b'> 
          <div class='ui-block-a'><div class='ui-bar ui-bar-a' style='height:15px'>Type</div></div> 
          <div class='ui-block-b'><div class='ui-bar ui-bar-a' style='height:15px'>Number</div></div> 
          <div class='ui-block-c'><div class='ui-bar ui-bar-a' style='height:15px'>Primary</div></div> 
         </div> 
        </div> 
       </div> 
      </li>  
      <li> 
       <div class='container_12'> 
        <div class='grid_15'> 
         <a href='#phoneOrEmail' data-rel='popup' data-position-to='window' data-transition='pop' > 
          <div class='ui-grid-b'> 
           <div class='ui-block-a'><div id='contactDesc' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['description'] . "</div></div> 
           <div class='ui-block-b'><div id='contactNo' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['number'] . "</div></div> 
           <div class='ui-block-c'><div id='contactPri' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['thePriNo'] . "</div></div> 
          </div> 
         </a> 
        </div> 
        <div class='grid_120'> 
         <a href='#editContact' data-rel='popup' data-position-to='window' data-transition='pop' style='padding:0px; margin:0px; border:0px; float: right;' class='ui-btn ui-btn-inline ui-icon-edit ui-btn-icon-notext'>Edit</a> 
        </div> 
       </div> 
      </li>     
     </ul> 
    </div> <!-- BESPOKE-BP end --> 

난이 매우 기본적인 반응 CSS를 가지고 :

/* stack all grids below 40em (640px) */ 
@media all and (max-width: 35em) { 
.bespoke-bp .ui-block-a, 
.bespoke-bp .ui-block-b, 
.bespoke-bp .ui-block-c, 
.bespoke-bp .ui-block-d, 
.bespoke-bp .ui-block-e { 
    width: 100%; 
    float: none; 
} 

}

/* Position the title next to the rank, pad to the left */ 
.bespoke-bp .list-divider .ui-block-a, 
.bespoke-bp .list-divider .ui-block-b, 
.bespoke-bp .list-divider .ui-block-c, 
.bespoke-bp .list-divider .ui-block-d, 
.bespoke-bp .list-divider .ui-block-e { 
    margin-top: -2.1em; 
    padding-left: 2.2em; 
    border-bottom: 1px solid rgba(0,0,0,.15); 
} 

을

나는 머리 글자가 서로 쌓여서 각 줄에 쌓이게되는 대신에 다음과 같이 더 멋지게 만들고 싶습니다.

개에 대한 유형

thetype

수

thenumber

차

theprimary

채널 행.

어디서부터 시작해야할지 모르겠으므로 아무에게도 올바른 방향을 제시 할 수 있습니까?

감사

Answer 1

당신은 와이드 스크린의 좁은 화면 각 LI에서 모두 하나 개의 목록 분할에 열 제목을 포함 할 수 있습니다. 그런 다음 CSS 쇼/미디어 쿼리 적절한 제목을 숨길 다음 CSS에서

<div class='bespoke-bp'> 
    <ul data-role="listview" data-split-icon="edit" data-inset='true'> 
     <li data-role='list-divider' class="titleRowDivider"> 
      <div class='ui-grid-b'> 
       <div class='ui-block-a'><div class='ui-bar ui-bar-a' style='height:15px'>Type</div></div> 
       <div class='ui-block-b'><div class='ui-bar ui-bar-a' style='height:15px'>Type</div></div> 
       <div class='ui-block-c'><div class='ui-bar ui-bar-a' style='height:15px'>Type</div></div>       
      </div> 
     </li> 
     <li> 
      <a href='#phoneOrEmail' data-rel='popup' data-position-to='window' data-transition='pop'> 
       <div class='ui-grid-b'> 
        <div class='ui-block-a'> 
         <div class='ui-bar ui-bar-a titleRow' style='height:15px'>Type</div> 
         <div id='contactDesc' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['description'] . "</div> 
        </div> 
        <div class='ui-block-b'> 
         <div class='ui-bar ui-bar-a titleRow' style='height:15px'>Number</div> 
         <div id='contactNo' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['number'] . "</div> 
        </div> 
        <div class='ui-block-c'> 
         <div class='ui-bar ui-bar-a titleRow' style='height:15px'>Primary</div> 
         <div id='contactPri' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['thePriNo'] . "</div> 
        </div> 
       </div> 
      </a> 
      <a href='#editContact' data-rel='popup' data-position-to='window' data-transition='pop'>Purchase album</a>     
     </li>     
     <li> 
      <a href='#phoneOrEmail' data-rel='popup' data-position-to='window' data-transition='pop'> 
       <div class='ui-grid-b'> 
        <div class='ui-block-a'> 
         <div class='ui-bar ui-bar-a titleRow' style='height:15px'>Type</div> 
         <div id='contactDesc' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['description'] . "</div> 
        </div> 
        <div class='ui-block-b'> 
         <div class='ui-bar ui-bar-a titleRow' style='height:15px'>Number</div> 
         <div id='contactNo' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['number'] . "</div> 
        </div> 
        <div class='ui-block-c'> 
         <div class='ui-bar ui-bar-a titleRow' style='height:15px'>Primary</div> 
         <div id='contactPri' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['thePriNo'] . "</div> 
        </div> 
       </div> 
      </a> 
      <a href='#editContact' data-rel='popup' data-position-to='window' data-transition='pop'>Purchase album</a>     
     </li>     
    </ul> 
</div> 

, 디바이더가 표시되고 화면 크기가이 상태가 반전되는 시점에 35em 이하가 될 때까지 반복 제목은 숨겨져 있습니다 : http://jsfiddle.net/ez :

여기

.bespoke-bp .titleRow { 
    display: none; 
} 
.bespoke-bp .titleRowDivider{ 
    display: block; 
} 
/* stack all grids below 40em (640px) */ 
@media all and (max-width: 35em) { 
    .bespoke-bp .ui-block-a, 
    .bespoke-bp .ui-block-b, 
    .bespoke-bp .ui-block-c, 
    .bespoke-bp .ui-block-d, 
    .bespoke-bp .ui-block-e { 
     width: 100%; 
     float: none; 
    } 
    .bespoke-bp .titleRow { 
     display: block; 
    }  
    .bespoke-bp .titleRowDivider{ 
     display: none !important; 
    } 
} 

이 같은 DEMO