Jquery Mobile ui-grid

Question

只是一个快速的jQuery Mobile问题。

我正在使用ui-grid-a(对于50/50分割的基本情况)，我可以毫无问题地填充和渲染网格。然而，在某些情况下，项目比内容大小少，我很好奇是否有可能让网格不包裹内容，而是填充div中的可用空间。

我已经尝试了几种不同的方法。

1)基本配置没有修改- ui-grid似乎包裹内容检查显示data-role=content上的高度比页面小得多。因此，网格正在"填充"内容。

2)因此，我接着努力扩展内容。使用一些JS代码(下面)，我能够设置内容的高度(检查证实了这一点)，但是网格仍然只是内容区域的一小部分

jQuery代码在.ready()中调整内容大小以填充页面

var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);

3)我尝试将此绑定到页面加载，认为可能网格是在Javascript就绪之前计算的。但运气不好。

欢迎提出任何建议。我不局限于jQuery，我已经尝试了许多CSS选项，但这些样式似乎没有帮助，当使用自定义jQuery移动UI(内容/页面)

提前谢谢你

作为请求的样例标记镜像我自己的(我有一些额外的div在这是弹出，但这代表主要内容)

<div data-role="page" id="home" data-theme="b">
    <div data-role="header">
        <h1>Home</h1>
    </div>
    <div data-role="content">
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <a href="#" data-role="button">Test</a>
            </div>
            <div class="ui-block-b">
                <a href="#" data-role="button">Test</a>
            </div>
            <div class="ui-block-a">
                <a href="#" data-role="button">Test</a>
            </div>
            <div class="ui-block-b">
                <a href="#" data-role="button">Test</a>
            </div>
            <div class="ui-block-a">
                <a href="#" data-role="button">Test</a>
            </div>
            <div class="ui-block-b">
                <a href="#" data-role="button">Test</a>
            </div>
        </div>
</div>
</div>

Answer 1

首先我要非常感谢@Omar帮助我创建了这个解决方案。

有几个因素导致了这个问题。首先是页面加载顺序，即何时计算页眉、页脚和内容的元素高度。为了解决这个问题，您可以绑定到创建事件之前的页面:

$(document).bind("pagebeforecreate", function (e, data) {
    $(document).on("pagecontainertransition", contentHeight);
    $(window).on("throttledresize orientationchange", contentHeight);
});

---

现在我将讨论如何动态调整网格的大小

接下来，您必须考虑设备的屏幕大小，并使用代码

计算每个行元素的适当大小

var screen = $.mobile.getScreenHeight();

然后必须计算内容的大小和该内容的可用大小

var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;

从这里你可以计算网格大小

var numRows = 3;
$(".ui-content .ui-block-a .ui-btn,.ui-content .ui-block-b .ui-btn").height((content / numRows) - 32);

}

---

下一个，你可能有多个网格

在这种情况下，你可以添加一个降序选择器来指定你想要调整的网格

$("#GridID.ui-content .ui-block-a .ui-btn, #GridID.ui-content .ui-block-b .ui-btn").height((content / numRows) - 32);

---

最后，由于此事件绑定到页面只有一次，你必须同时调整所有网格的大小，然而，网格可能在不同的页面上，你必须选择这些大小，因为每个页面可能有不同大小的内容

var header = $("#pageID .ui-header").hasClass("ui-header-fixed") ? $("#pageID .ui-header").outerHeight() - 1 : $("#pageID .ui-header").outerHeight();
var footer = $("#pageID .ui-footer").hasClass("ui-footer-fixed") ? $("#pageID .ui-footer").outerHeight() - 1 : $("#pageID .ui-footer").outerHeight();
var contentCurrent = $("#pageID .ui-content").outerHeight() - $("#pageID .ui-content").height();
var content = screen - header - footer - contentCurrent;

---

下面是一个小提琴来演示完整的功能http://jsfiddle.net/m6bbbpg1/

希望这将帮助其他人，因为这似乎是一个相当常见的任务时，创建通用的移动网页