Question

jQuery Mobile文档仅解释了五个网格结构。如果我想创建一个7列网格，我该怎么办？（列在手机上运行不佳）。请帮帮我。

谢谢。

Answer 1

我还需要一个jquery mobile 7列网格（用于日历项目）

我扩展了CSS，根据CSS处理2-5列的方式处理6列和7列的额外网格和块样式。唯一的区别是创建的宽度和附加块。

无论如何，使用这个CSS来扩展现有的jquery移动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-grid-e（6列网格） .ui-grid-f（7列网格）

这些网格中的新块是： .ui-block-f（第6街区） .ui-block-g（第7街区）

因此，创建7列网格的基本HTML将是：

<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>

Answer 2

您可以使用第三方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

如何使用jQuery Mobile创建一个包含五列以上列的网格？

2 个答案: