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

Question

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

谢谢.

Answer 1

我也需要一个jquery mobile 7列网格(用于日历项目)

我根据CSS处理2-5列的方式扩展了CSS以处理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>