Высота мобильной страницы jQuery

В прошлый день я пытался выяснить, как изменить стиль мини-высоты на мобильной странице jQuery при просмотре в мобильном сафари. Я пробовал встроенные стили, переопределяя стили ui-страницы и еще не нашел способ переопределить высоту data-role = "page". В идеале, если "контент" страницы меньше, чем высота "страницы", мне бы хотелось, чтобы высота "страницы" автоматически настраивалась на "контент". Я приложил иллюстрации, чтобы лучше объяснить проблему.

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

Ответ 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/

Ответ 2

Старый билет, но у меня есть решение, которое я предпочитаю больше. Он специально отбрасывает событие изменения размера через хакеры внутри jQuery. Мне не нравится решение Джаспера, потому что это зависит от одного события, которое блокирует другое, а теории в теории никогда не должны знать друг о друге/вы никогда не должны зависеть от порядка, в котором происходят события.

$(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) {}
});

Ответ 3

Я столкнулся с той же проблемой при показе всплывающего окна с наложением $.mobile.resetActivePageHeight(); помогло. Thanx!