jQuery mobile page height

Question

На прошлый день я пытался выяснить, как изменить стиль мини-высоты на мобильной странице 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 --> 

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. Мне не нравится решение Джаспера, потому что оно зависит от одного события, которое блокирует другого, а теоретические события никогда не должны знать друг о друге/вы никогда не должны зависеть от порядка, в котором происходят события.

$(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(); сделал трюк для меня. Thanx!