1. Inicio
  2. Pregunta y respuesta
  3. Encabezado persistente en jQuery Mobile

Encabezado persistente en jQuery Mobile

2011-06-06 20 views
10

No se pudo encontrar una manera de ponerle una recompensa a mi pregunta anterior, así que la vuelvo a publicar porque tal vez era un error.Encabezado persistente en jQuery Mobile

Versión corta: quiero un encabezado persistente en una aplicación PhoneGap + JQM que se mantiene en el lugar (nunca se mueve) entre las transiciones de página como se puede diseñar para el pie de página.

Versión larga: En primer lugar, soy totalmente nuevo en jQuery y JQM, así que por favor señale cualquier error nuevo que haya cometido.

Estoy tratando de obtener un encabezado que persista entre las diferentes páginas de la aplicación. Tendría que ser como el pie de página persistente que se mantiene en su lugar cada vez que el usuario está pasando de una página a otra. El pie de página persistente se logró usando data-role = "footer" data-id = "(alguna identificación consistente)" data-position = "fixed". Funcionó bastante bien (fallas aleatorias que se extraviaron y luego se arreglaron automáticamente después de unos segundos). Para obtener más información sobre lo que estoy buscando, consulte "Pie de página persistente" aquí: http://jquerymobile.com/test/docs/#/test/docs/toolbars/docs-footers.html

Y vea el ejemplo del pie de página persistente en el siguiente enlace. Ver cómo seleccionar un elemento en las transiciones de pie de página a una página completamente nueva, sin embargo, el pie de página no se mueve: http://jquerymobile.com/test/docs/#/test/docs/toolbars/footer-persist-a.html

Ahora estoy tratando de hacer lo mismo, pero quiero que sea en la parte superior de la aplicación en lugar de la parte inferior. He tratado de las siguientes cosas:

  • desplazando el pie de página en la parte superior de la página (no sé qué etiqueta para ponerse en jQuery div Probado (clase jQuery) utilizando varias clases de jQuery, pero ninguno trabaja.. . he utilizado para determinar FireBug es el atributo CSS "superior" que necesita ser cambiado

el HTML en cada página:.

<div data-role="footer" data-position="fixed" data-id="header"> 
<img src="images/bgheader.png" /> 
</div>

la JavaScript:

$('div.ui-footer').css('top', '0px'); 
$('div.ui-footer-fixed').css('top', '0px'); 
$('div.fade').css('top', '0px'); 
$('div.ui-fixed-overlay').css('top', '0px'); 
$('div.ui-bar-a').css('top', '0px');
  • Usando data-role = "header" (no persiste como lo hace el pie de página). Este método creará el encabezado que quiero (porque sobreescribí parte del CSS), pero cuando paso de una página a otra, no mantendrá el encabezado en la parte superior. documentación JQM y tampoco afirma que apoyan cabeceras persistentes aunque no del estado que apoya pies de página persistentes:

El HTML en cada página:

<div data-role="header" data-position="fixed" data-id="header" id="header" data-backbtn="false"> 
<img src="images/bgheader.png" /> 
</div>

Fuente

2011-06-06 Jon

Respuesta

-1

Comprobar this ejemplo, bajo Haciendo pies de página y encabezados persistente .

Fuente

2011-06-14 11:20:33 CristiC

+0

Desafortunadamente, eso no funciona porque el encabezado no logrará esta función si hago lo que dice en el ejemplo: 'permanece en el lugar (nunca se mueve) entre las transiciones de la página al igual que el pie de página se puede diseñar para hacer ' – Jon

1

Añadir el siguiente CSS a la página o al final del archivo css

Tenga en cuenta que no he probado este código en los dispositivos móviles ..

<style type="text/css"> 
    .ui-header { 
     position: fixed !important; 
     top: 0 !important; 
     z-index: 99; 
    } 
    .ui-content { 
     margin-top: 35px; 
    } 
</style>

Fuente

2011-06-16 13:29:40 Blowsie

+0

Esto no parece funcionar tampoco. Creo que el problema del OP es que el encabezado no permanece fijo durante la transición de página. También estoy teniendo el mismo problema ... publicaré si descubro una solución alternativa. – dojosto

2

Un poco de jQuery hará el truco

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#lpage1:first').addClass('ui-btn-active'); //set the first tab as active 
     firstContent=$('#content1'); //defining selectors 
     secondContent=$('#content2'); 
     secondContent.hide(); //hide the second content division 
    }); 

    // show only the first content div 
    function showContent1() { 
     firstContent.show(); 
     secondContent.hide(); 
    } 
    function showContent2() { 
     firstContent.hide(); 
     secondContent.show(); 
    } 

    //clicking on tab 2 
    $('#lpage2').live('tap',function(event){ 
     //alert("click"); 
     showContent2(); 
    }); 
</script> 
<body> 
<!-- Start of first page --> 
<div data-role="page" id="page1"> 

    <div data-role="header" data-position="fixed"> 
     <h1>Foo</h1> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#" id="lpage1" data-transition="pop">Home<br/>&nbsp;</a></li> 
       <li><a href="#" id="lpage2" data-transition="pop">My<br/>Profile</a></li> 
      </ul> 
     </div><!-- /navbar --> 
    </div><!-- /header --> 

    <!-- page1 --> 
    <div data-role="content" id="content1"> 
     <p>I'm first in the source order so I'm shown as the page.</p>  
     <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content --> 

    <!-- page2 --> 
    <div data-role="content" id="content2"> 
     <p>I'm second in the source order so I'm shown as the page.</p>  
     <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page -->

Fuente

2011-08-25 02:26:38

+0

Pero todavía estoy descifrando cómo producir las animaciones en este tipo de transiciones –

1

1) Además de los jquery.js, jquerymobile.js y descargar archivos .css e incluir: jquery.easing.1.3.js, jQuery.mobile.scrollview.js y scrollview.js. (Google)

2) encabezado estándar, vista de lista, y el pie de página con estilo attribue a continuación:

<div id="home" data-role="page">...</div> 
<div data-role="content"><ul data-role="listview"><li>List item 1</li></ul></div> 
<div data-role="footer" style="position: fixed;bottom: 0px;">...</div>

Como described in detail here.

Fuente

2011-09-16 18:05:56

2

He estado golpeando mi cabeza contra este problema durante varios días, y por una vez Google no fue de ayuda. Finalmente se me ocurrió la siguiente solución. Copia el encabezado HTML en una nueva página antes de que comience la transición, luego elimina el código de la página anterior una vez que se completa la transición. El encabezado y el pie de página seguirán moviéndose con la transición de página, pero persistirán incluso mientras navegan por listas anidadas.

// dynamically move the header and footer between pages on load events 
$('div.ui-page').live('pagebeforeshow', function(event, ui) { 
    // avoid duplicating the header on the first page load 
    if (ui.prevPage.length == 0) return; 

    // remove the jQuery Mobile-generated header 
    $('.ui-header').addClass('to-remove-now'); 
    $('#header').removeClass('to-remove-now'); 
    $('.to-remove-now').remove(); 

    // grab the code from the current header and footer 
    header = $('#header')[0].outerHTML; 
    footer = $('#footer')[0].outerHTML; 

    // mark the existing header and footer for deletion 
    $('#header').addClass('to-remove'); 
    $('#footer').addClass('to-remove'); 

    // prepend the header and append the footer to the generated HTML 
    event.currentTarget.innerHTML = header + event.currentTarget.innerHTML + footer; 
}); 

// remove header from previous page 
$('div.ui-page').live('pagehide', function(event, ui) { 
    $('.to-remove').remove(); 
});

Entonces sólo tiene que añadir id="header" a la cabecera y div id="footer" al pie de página, y colocarlos como lo haría normalmente en su contenido.

Fuente

2011-10-19 18:58:19

0

Intento buscar en la fuente móvil jquery, la magia del pie de página persistente suceda aquí, creo.

$(document).delegate(".ui-page", "pagebeforeshow", function(event, ui) { 
      var page = $(event.target), 
       footer = page.find(":jqmData(role='footer')"), 
       id = footer.data("id"), 
       prevPage = ui.prevPage, 
       prevFooter = prevPage && prevPage.find(":jqmData(role='footer')"), 
       prevFooterMatches = prevFooter.length && prevFooter.jqmData("id") === id; 

      if (id && prevFooterMatches) { 
       stickyFooter = footer; 
       setTop(stickyFooter.removeClass("fade in out").appendTo($.mobile.pageContainer)); 
      } 
     }) 
     .delegate(".ui-page", "pageshow", function(event, ui) { 
      var $this = $(this); 

      if (stickyFooter && stickyFooter.length) { 
       setTimeout(function() { 
        setTop(stickyFooter.appendTo($this).addClass("fade")); 
        stickyFooter = null; 
       }, 500); 
      } 

      $.mobile.fixedToolbars.show(true, this); 
     });

estoy pensando en añadir

setTop(page.find(":jqmData(role='header')").removeClass("fade in out").appendTo($.mobile.pageContainer));

a ella. Deséenme suerte ...

Fuente

2012-02-03 07:49:09 wizztjh

1

Hola, podría ser tarde, pero esto funcionó para mí.

[data-role=page] 
{ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    overflow: scroll; 
    margin: 0 auto -40px; 
} 
.footerPlaceHolder 
{ 
    height: 40px; 
} 
[data-role=footer]{height:40px; bottom:0; position:fixed !important; top: auto !important; width:100%; z-index: 9999;}

su HTML

<div data-role="page"> 
    ....Your content.... 
    <div class="footerPlaceHolder"></div> 
    <div data-role="footer"> 
     <a href="#" data-icon="arrow-l" class="ui-btn-left">Back</a> 
     <a href="#" onclick="settingsClicked(this);" data-icon="gear" class="ui-btn-right">Settings</a> 
    </div> 
</div>

P. S. Tenga en cuenta que no soy bueno en esto especialmente css. Todos los comentarios serán muy apreciados.

Gracias.

Fuente

2012-05-21 21:55:33

0

Si puede llegar a funcionar con una cabecera compartida única, se puede suministrar el encabezado en su página principal: (nota: no jQuery involucrados, lo siento "sólo tiene que utilizar jQuery" chicos :-P)

<div class="header"> 
    <div class="logo"></div> 
    <div class="menu"></div> 
</div> 
<div data-role="page" class="page" id="loading"> 
    <div data-role="content"> 
     <h1>Your Page</h1> 
    </div> 
</div>

a continuación, utilice CSS para empujar la parte superior de cada página hacia abajo:

.ui-page{ 
    top:64px !important; 
}

no estoy feliz con eso importante allí, pero las reglas jQueryM está utilizando en CSS tienen la más alta especificidad w/o! usando una identificación. Si conoce todas sus identificaciones, probablemente pueda prescindir de ellas ... Siéntase libre de sugerir otras reglas que sean mejores ... Me he golpeado la cabeza contra esto por demasiado tiempo como para preocuparme más.

Fuente

2013-01-22 00:36:30

Cuestiones relacionadas

 Cuestiones relacionadas