jQuery移動響應列表設計

Question

我正在使用jquery mobile 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);
}

我想使它更“花哨”，例如，而不是將標頭全部堆疊在一起，然后將它們放在每一行上，例如：

類型

方式

數

號碼

主

首要的

每行。

有誰能為此指出正確的方向，因為我真的不知道從哪里開始！

謝謝

Answer 1

您可以在一個列表分隔符（用於寬屏）和每個LI（用於窄屏）中包括列標題。 然后在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>

在CSS中，顯示了分隔符，並且隱藏了重復的標題，直到屏幕大小小於35em為止，此時此狀態被反轉：

.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;
    }
}

這是一個演示