web-dev-qa-db-fra.com

Comment réparer le pied de page fixe jQuery Mobile?

Avec jQueryMobile, j'ai inclus data-role="footer" data-position="fixed" dans le balisage, mais deux bogues persistent:

  • Le pied de page bascule sur un événement de clic nul.
  • Le pied de page n'est pas corrigé et masque une partie du contenu de la page.

Je teste avec l'iPhone 3g. Des idées?

Merci d'avance.

UPDATE: Il semble que l'événement click modifie le pied de page de la page en cours et modifie ui-fixed-overlay en ui-fixed-inline, qui porte bien sûr le style display:none pour empêcher l'affichage du pied de page des autres pages.

Comment puis-je empêcher cette modification?

javascriptiphonejquerymobilefooter
18
Tomer Lichtash

Si vous utilisez 1.1 ou version ultérieure , ajoutez data-tap-toggle="false" à votre en-tête et à votre pied de page, comme documenté ici .

Si vous utilisez une version de jQuery Mobile antérieure à 1.1 , placez les éléments suivants avant de charger jQuery Mobile:

$(document).bind("mobileinit", function(){
  $.mobile.touchOverflowEnabled = true;
}); // remove
25
Roi

Ceci est corrigé dans jQueryMobile 1.1 rc1. Voir ici . 

Utilisez data-tap-toggle = "false" sur votre pied de page.

14
Simon Vane

Avec jquery.mobile-1.0a4, ajouter data-position = "fixed" à la section de pied de page fonctionne comme vous le souhaitez dans Iphone, Android et Chrome.

2
neavilag

La "réponse" actuelle est peut-être un peu erronée. L'utilisation de touchOverflow peut vous aider à court terme, mais cela va bientôt disparaître. Si quelqu'un lisait le jQuery mobile blog , il remarquerait le texte de présentation publié le 10 janvier:

Attention: touchOverflow à être déconseillé dans 1.1 - Lorsque nous avons introduit la fonctionnalité touchOverflow pour la première fois, nous l'avons considérée comme un bon moyen de Tirer parti du support de débordement natif dans iOS pour apporter de véritables corrections . .] barres d’outils et transitions plus douces, même s’il s’agissait d’un ensemble de périphériques assez étroit à l’époque. Maintenant, avec les modifications importantes apportées aux en-têtes Fixes et à la transition prévue pour la version 1.1, ceux-ci amélioreront l'expérience de D'une manière presque identique à celle de touchOverflow, sauf que Fonctionnera beaucoup plus. plates-formes et avec moins de complexité, nous avons décidé de retirer cette fonctionnalité. Il sera obsolète à 1.1 et supprimé à 1.2. Nous avons des plans futurs pour adresser les régions de débordement avec le défilement interne, donc une grande partie du travail que nous avons effectué sur touchOverflow Sera réorientée.

Toutes mes excuses pour avoir posté ceci comme réponse, mais je suis incapable de commenter pour le moment.

2
MGG

Nous avions ce problème et utilisions une combinaison de iScroll (v3) et d’un wrapper mobile jquery de Nice pour iScroll. Ça fonctionne parfaitement. Voir tous les détails ici:

http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

1
greencustard

J'ai fait quelque chose de très simple.La solution trouvée avec CSS vient de définir le "minimum-hauteur" approprié pour le contenu.

1
Nikhil Patil

Re: Le pied de page n'est pas corrigé et masque une partie du contenu de la page.

J'ai aussi lutté avec ce problème. Il s’est avéré que je devais déplacer la balise div content content pour qu'elle soit AVANT le début du pied de page. Si le pied de page se trouve à l'intérieur de la balise content div et que vous activez >>> data-position = "fixed" <<<, mon pied de page n'est pas corrigé. 

Je ne connais pas votre autre problème, "Le pied de page bascule sur un événement de clic nul", car je ne sais pas comment le recréer dans mon application.

EN UTILISANT... 

  • JQuery Mobile 1.3.2
  • Cordoue
  • Le pied de page contient une barre de navigation et une bannière publicitaire. 
0
Sandi Laufenberg-Deku

j'utilise jquery mobile 1.3.1, et tout ce que vous avez dit plus tôt ne fonctionne pas sur mon application. mais j'ai une solution pour ce bug. vérifier mon autre message JQueryMobile - pied de page fixe non fixé après le focus d'entrée

$('div:jqmData(role="page")').on('pageinit',function(){
    $(document)
        .on('focus','input, select, textarea', function(){
            $('[data-role="footer"][data-position="fixed"]').hide();
        })
        .on('blur','input, select, textarea',function(){
            $('[data-role="footer"][data-position="fixed"]').show();
        });
});
0
Ary Wibowo

J'ai eu un problème similaire avec le pied de page non fixé sur le défilement. Ma suggestion? Sencha et pas jQueryMobile, son chargé de bugs et pas prêt pour la production.

Le pied de page met également en surbrillance la page sélectionnée à partir de l'URL/# page l'URL de la page affecte le menu du pied de page dans mon cas.

0
Alon Carmel