jquery - 如何创建一个超过五列的网格 jQuery Mobile？

Question

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

谢谢。

Answer 1

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

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

无论如何，使用此 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 列网格)

这些网格中的新 block 是: .ui-block-f(第 6 个 block ) .ui-block-g(第七 block )

因此，创建 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>