jQuery Mobile: измените DOM при полной загрузке, чтобы сделать страницу 100% высоты - PullRequest
Новая
       12

jQuery Mobile: измените DOM при полной загрузке, чтобы сделать страницу 100% высоты

4 голосов
/ 28 марта 2012

Я хочу, чтобы область содержимого на странице jQuery Mobile растягивалась, чтобы страница заполняла 100% области просмотра (верхний колонтитул + контент + нижний колонтитул = 100%). Я бы предположил, что я должен выполнить выравнивание по высоте, когда DOM полностью загружен, поэтому у меня есть высоты всех div, и тогда я могу сделать что-то подобное, например this .

jQuery Mobile утверждает, что использует pageInit, а не $ (document) .ready . Unforunatelaty DOM, кажется, не полностью загружен, когда pageInit называется 

var header = $("div[data-role='header']")
console.log(header.height());

говорит мне, что высота равна 0. Когда я использую тот же код в $ (document) .ready (), он говорит, что это 79px.

Так, какова лучшая практика для выравнивания?

Edit:

Здесь - это jsFiddle, который показывает базовую структуру моей страницы. Я хочу, чтобы холст заполнил все пространство между верхним и нижним колонтитулом.

Ответы [ 4 ]

0 голосов
/ 09 декабря 2012

Сначала создайте событие "pageshow" для своей страницы: (это должно быть событие "pageshow", а не "pagebeforeshow", поскольку во втором случае вы не получите высоту - страница скрыта) 

// bind "pageshow" event to your page
$("#PageID").live("pageshow", function (event, data) {
    // do something...       
});

Внутри этого события проверьте размеры верхнего и нижнего колонтитулов и размера страницы (с отступами и полями): Что-то вроде: 

var header_height = $("div[data-role=header]").height();
var footer_height = $("div[data-role=footer]").height();
var page_height = $("div[data-role=page]").height();

Затем рассчитайте и установите новый размер холста: 

$("#MyCanvas").css({"height":page_height - (header_height + footer_height )});

Весь пример кода: 

    // bind "pageshow" event to your page
    $("#PageID").live("pageshow", function (event, data) {
       var header_height = $("div[data-role=header]").height();
       var footer_height = $("div[data-role=footer]").height();
       var page_height = $("div[data-role=page]").height();

       $("#MyCanvas").css({"height":page_height - (header_height + footer_height )});       
    });
0 голосов
/ 28 марта 2012

Если вы ожидаете загрузки изображений (или других внешних ресурсов), вам нужно либо привязать обработчик события load непосредственно к элементам / активам, либо дождаться события window.load, чтобы размеры активов были будет правильно.

В качестве альтернативы вы можете задать активам указанные размеры, например, если это изображение и вы знаете, что оно будет 300px на 200px, установить эти значения в качестве атрибутов или с помощью CSS. Таким образом, правильное измерение может быть получено до того, как сработает событие window.load, и это лучше работает с событиями страницы jQuery Mobile, так как вы не можете ждать, пока не запустится window.load, когда страница доставляется в DOM через AJAX.

Если вы используете более старую версию, чем 1.1.0 RC1, тогда я советую вам проверить, есть ли в ней фиксированные нижние колонтитулы CSS, которые выглядят / чувствуются хорошо и заставляют вашу страницу выглядеть на 100% все время. http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/#download

0 голосов
/ 30 марта 2012

Если ваша цель состоит в том, чтобы заполнить пространство между верхним и нижним колонтитулами, рассматривали ли вы получение высоты data-role="content"?

0 голосов
/ 28 марта 2012

Я думаю, что заголовок = [] в вашем случае. Но либо я не понимаю проблему, либо я не понимаю, зачем нужен javascript. Разве вы не можете сделать это простым CSS? 

.header{height:20%}
.content{height:60%}
.footer{height:20%}

или что-то похожее

...