Question

在过去的一天里，我一直试图弄清楚如何在移动游戏中查看时更改jQuery移动页面上的最小高度样式。我试过，内联样式，覆盖ui页面样式，还没有找到一种方法来覆盖data-role =“page”的高度。理想情况下，如果页面“内容”小于“页面”高度，我希望“页面”高度自动调整为“内容”。我附上了一个插图，以便更好地解释这个问题。

jQuery Webpage Diagram

<div data-role="page">
     <div data-role="header">
             Header Elements
     </div>
     <div data-role="content" class="homeNav">
            <ul data-role="listview" data-inset="false" data-filter="false">
                <li><a href="expertise.html">Expertise</a></li>
                <li><a href="greatesthits.html">Greatest Hits</a></li>
                <li><a href="profile.html">Profile</a></li>
                <li><a href="mindset.html">Mindset</a></li>
                <li><a href="connect.html">Connect</a></li>
             </ul>  
     </div><!-- /content -->

     <div data-role="footer" data-position="fixed">
             Footer elements
     </div><!-- /footer -->
</div><!-- /page -->

Answer 1

min-height元素的data-role="page"是通过JavaScript在resize对象的window事件处理程序中设置的。您可以创建自己的JavaScript，以不同的方式调整页面大小：

$(function () {
    $(window).bind('resize', function (event) {
        var content_height = $.mobile.activePage.children('[data-role="content"]').height(),
            header_height  = $.mobile.activePage.children('[data-role="header"]').height(),
            footer_height  = $.mobile.activePage.children('[data-role="footer"]').height(),
            window_height  = $(this).height();

        if (content_height < (window_height - header_height - footer_height)) {
            $.mobile.activePage.css('min-height', (content_height + header_height + footer_height));
            setTimeout(function () {
                $.mobile.activePage.children('[data-role="footer"]').css('top', 0);
            }, 500);
        }
        event.stopImmediatePropagation();
    }).trigger('resize');
});

以下是演示：http://jsfiddle.net/sAs5z/1/

请注意setTimeout用于设置fixed-position-footer;超时持续时间可能会变小。这是因为jQuery Mobile Framework将fixed-position-footer重新定位到页面底部。这方面的一个例子可以在这里看到：http://jsfiddle.net/sAs5z/

另外请注意，您可能只想重新定位fixed-position-footer元素并使页面的min-height属性保持不变;这将使页面渐变覆盖整个屏幕，但页脚与内容之间不会有任何空间。以下是此方法的演示：http://jsfiddle.net/sAs5z/2/

Answer 2

旧票但我有一个我更喜欢的解决方案。它通过一些jQuery内部黑客攻击专门解除resize事件的绑定。我不喜欢Jasper的解决方案，因为它依赖于一个事件来阻止另一个事件，理论上的事件永远不会知道彼此/你永远不应该依赖于事件触发的顺序。

$(function() {
    // WARNING: Extremely hacky code ahead. jQuery mobile automatically
    // sets the current "page" height on page resize. We need to unbind the
    // resize function ONLY and reset all pages back to auto min-height.
    // This is specific to jquery 1.8

    // First reset all pages to normal
    $('[data-role="page"]').css('min-height', 'auto');

    // Is this the function we want to unbind?
    var check = function(func) {
        var f = func.toLocaleString ? func.toLocaleString() : func.toString();
        // func.name will catch unminified jquery mobile. otherwise see if
        // the function body contains two very suspect strings
        if(func.name === 'resetActivePageHeight' || (f.indexOf('padding-top') > -1 && f.indexOf('min-height'))) {
            return true;
        }
    };

    // First try to unbind the document pageshow event
    try {
        // This is a hack in jquery 1.8 to get events bound to a specific node
        var dHandlers = $._data(document).events.pageshow;

        for(x = 0; x < dHandlers.length; x++) {
            if(check(dHandlers[x].handler)) {
                $(document).unbind('pageshow', dHandlers[x]);
                break;
            }
        }
    } catch(e) {}

    // Then try to unbind the window handler
    try {
        var wHandlers = $._data(window).events.throttledresize;

        for(x = 0; x < wHandlers.length; x++) {
            if(check(wHandlers[x].handler)) {
                $(window).unbind('throttledresize', wHandlers[x]);
                break;
            }
        }
    } catch(e) {}
});

Answer 3

在显示带有重叠$ .mobile.resetActivePageHeight（）的弹出窗口时，我遇到了同样的问题。为我做了诀窍。感谢名单！

jQuery移动页面高度

3 个答案: