altezza pagina jQuery mobile

Question

Per il giorno passato ho cercato di capire come modificare lo stile minimo altezza su una pagina mobile jQuery durante la visualizzazione in Safari mobile. Ho provato, stili in linea, scavalcando gli stili delle pagine ui e non ho ancora trovato un modo per sovrascrivere l'altezza di data-role = "page". Idealmente se la pagina "contenuto" è inferiore all'altezza della "pagina", vorrei che l'altezza della "pagina" si adattasse automaticamente al "contenuto". Ho allegato un'illustrazione per spiegare meglio il problema.

<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

La min-height dell'elemento data-role="page" è impostata tramite JavaScript in un gestore resize eventi per l'oggetto window. È possibile creare il proprio JavaScript che ridimensiona la pagina in modo diverso:

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

Ecco una demo: http://jsfiddle.net/sAs5z/1/

Avviso il setTimeout utilizzata per impostare il fixed-position-footer; la durata del timeout può probabilmente essere ridotta. Questo è usato perché jQuery Mobile Framework stava riposizionando lo fixed-position-footer nella parte inferiore della pagina. Un esempio di questo può essere visto qui: http://jsfiddle.net/sAs5z/

Un'altra nota, si consiglia di solo ri-posizionare l'elemento fixed-position-footer e lasciare delle proprietà della pagina min-height lo stesso; questo renderà il gradiente di pagina coprire l'intero schermo ma il piè di pagina non avrà alcuno spazio tra esso e il contenuto. Ecco una demo di questo metodo: http://jsfiddle.net/sAs5z/2/

Answer 2

Vecchio biglietto ma ho una soluzione che preferisco di più. Separa in modo specifico l'evento di ridimensionamento attraverso alcuni hacking di jQuery internals. Non mi piace la soluzione di Jasper perché dipende da un evento che si attiva per bloccare un altro, e gli eventi in teoria non dovrebbero mai sapere l'uno dell'altro/non si dovrebbe mai dipendere dall'ordine in cui gli eventi si attivano.

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

Ero di fronte allo stesso problema quando mostra un popup con una sovrapposizione $ .mobile.resetActivePageHeight(); ha fatto il trucco per me. Grazie!