如何創建一個超過五列jQuery Mobile的網格？

Question

jQuery Mobile文檔只解釋了五格結構。如果我想創建一個7列的網格，我該怎麼做？ （列在手機上運行不佳）。請幫幫我。

謝謝。

Answer 1

您可以使用第三方jQuery Mobile的網格插件：http://jeromeetienne.github.com/jquery-mobile-960/

這只是一個CSS文件，但它工作得很好。它可以支持多於12列。

例子：http://jsfiddle.net/Gajotres/GGasc/

<fieldset class="container_12"> 
    <div class="grid_2"><button type="submit">Button 1</button></div> 
    <div class="grid_2"><button type="submit">Button 2</button></div>  
    <div class="grid_2"><button type="submit">Button 3</button></div>  
    <div class="grid_2"><button type="submit">Button 4</button></div> 
    <div class="grid_2"><button type="submit">Button 5</button></div>  
    <div class="grid_2"><button type="submit">Button 6</button></div>  
</fieldset> 

編輯：

這裏也是一個很好的例子，這是什麼格可以做到：http://jeromeetienne.github.com/jquery-mobile-960/demoFluid.html

Answer 2

我需要一個jQuery Mobile 7的柱網，以及（對於日曆項目）

我擴展了CSS來處理額外的網格和根據CSS如何處理2-5列，爲6列和7列分塊樣式。唯一的區別是創建的寬度和附加塊。

反正用這個CSS擴展現有jQuery Mobile的CSS

/* ADD 6(e) and 7(f) column grid */ 
.ui-grid-e, .ui-grid-f { overflow: hidden; } 

/* grid e: 16/16/16/16/16/16 */ 
.ui-grid-e .ui-block-a, .ui-grid-e .ui-block-b, .ui-grid-e .ui-block-c, .ui-grid-e .ui-block-d, .ui-grid-e .ui-block-e, .ui-grid-e .ui-block-f { width: 16.59166666666667%; } 
.ui-grid-e > :nth-child(n) { width: 16.66666666666667%; } 
.ui-grid-e .ui-block-a { clear: left; } 

/* grid f: 14/14/14/14/14 */ 
.ui-grid-f .ui-block-a, .ui-grid-f .ui-block-b, .ui-grid-f .ui-block-c, .ui-grid-f .ui-block-d, .ui-grid-f .ui-block-e, .ui-grid-f .ui-block-f, .ui-grid-f .ui-block-g { width: 14.21071428571429%; } 
.ui-grid-f > :nth-child(n) { width: 14.28571428571429%; } 
.ui-grid-f .ui-block-a { clear: left; } 

/* ADD 6th (f) and 7th (g) blocks in grid */ 
.ui-header .ui-navbar .ui-grid-e li.ui-block-f .ui-btn, 
.ui-footer .ui-navbar .ui-grid-e li.ui-block-f .ui-btn { margin-right: -3px; }/* NOT TESTED */ 

.ui-header .ui-navbar .ui-grid-f li.ui-block-g .ui-btn, 
.ui-footer .ui-navbar .ui-grid-f li.ui-block-g .ui-btn { margin-right: -2px; }/* NOT TESTED */ 

.ui-grid-e .ui-btn, .ui-grid-f .ui-btn { margin-right: 5px; margin-left: 5px; } 

.ui-block-f, .ui-block-g { margin: 0; padding: 0; border: 0; float: left; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } 

.ui-header .ui-navbar .ui-grid-e li.ui-block-f .ui-btn-icon-right .ui-icon, 
.ui-footer .ui-navbar .ui-grid-f li.ui-block-g .ui-btn-icon-right .ui-icon { right: 8px; } 

注意到你正在創建樣式： 的.ui網-E（6列格） 的.ui網-F（ 7列柵格）

，並在這些網格新塊是： 的.ui - 嵌段 - F（第六塊） 的.ui - 嵌段 - 克（第七塊）

所以，基HTML創建一個7列網格窩可能是：

<div class="ui-grid-f"> 
    <div class="ui-block-a"><div class="ui-body ui-body-d">1</div></div> 
    <div class="ui-block-b"><div class="ui-body ui-body-d">2</div></div> 
    <div class="ui-block-c"><div class="ui-body ui-body-d">3</div></div> 
    <div class="ui-block-d"><div class="ui-body ui-body-d">4</div></div> 
    <div class="ui-block-e"><div class="ui-body ui-body-d">5</div></div> 
    <div class="ui-block-f"><div class="ui-body ui-body-d">6</div></div> 
    <div class="ui-block-g"><div class="ui-body ui-body-d">7</div></div> 
</div>