Analyse des problèmes courants dans jquery mobile development

Analyse des problèmes courants dans jquery mobile development_jquery

WBOY

Libérer： 2016-05-16 15:18:53

original

1214 Les gens l'ont consulté

Cet article analyse les problèmes courants dans le développement mobile jquery avec des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

jquery mobile est très puissant. Avec lui, vous n'avez pas besoin d'écrire de méthodes dans le programme pour déterminer de quel type de téléphone mobile il s'agit. Vous pouvez utiliser js pour obtenir la compatibilité avec différents téléphones intelligents. C'est aussi à cause de ses fonctions puissantes que le plug-in mobile jquery a plus de 200 K et le min a plus de 140 K.

1. jquery mobile effectue des requêtes de pages via ajax. Comme tout le monde le sait, ajax ne vide pas les nouvelles pages. En d’autres termes, les modifications apportées à la barre d’adresse ne constituent pas de véritables mises à jour. Il y a un problème. JS ne sera exécuté et ne fonctionnera que lorsque la page sera actualisée. Le code JS dans la page fonctionnera lorsque la page sera actualisée. Cependant, si vous cliquez sur le saut dans la page, il ne fonctionnera pas lorsque vous basculerez. dos.

Code d'erreur :

<script type="text/javascript">
$(function(){
  $('#search01').bind("click",function(){
    $('.searchPanel').show();
  });
});
</script>

Copier après la connexion

Code correct :

<script type="text/javascript">
$(function(){
  $('#search01').live("click",function(){ //jquery 1.7系列
    $('.searchPanel').show();
  });
});
</script>

Copier après la connexion

S'il s'agit de la série jquery 1.9

<script type="text/javascript">
$(document).on('click', '#search01', function () { //jquery 1.9系列
  $('.searchPanel').show();
});
</script>

Copier après la connexion

2. Toutes les pages sont sur une seule page. Pour le moment, veillez à ne pas utiliser le même identifiant, sinon seule la première sera lue. S'il y a plusieurs pages sur une seule page, de nombreux problèmes surgiront. Par exemple, le calcul de la distance entre l’étiquette et le haut de la fenêtre sera inexact.

Mauvaise orthographe :

$('html,body').animate({
   scrollTop: $('.content').offset().top
}, 100);

Copier après la connexion

Le problème avec l'écriture de cette façon est qu'il peut y avoir plusieurs pages devant la page actuelle, donc la valeur supérieure sera incorrecte si vous actualisez la page, la valeur sera correcte

Écriture correcte :

$('html,body').animate({
   scrollTop: $('.ui-page-active .content').offset().top
}, 100);

Copier après la connexion

.ui-page-active indique la page actuellement active, donc la hauteur calculée est correcte.

3. L'attribution de variables PHP aux variables JS fonctionne parfois, parfois non.

Copier le code Le code est le suivant :

color = '
La cause de ce problème n'a pas été trouvée. Cependant, ce problème peut être résolu par d’autres moyens.

<input type="hidden" id='color' value='<&#63;php echo $color;&#63;>'>
<script type="text/javascript">
  color = $('.ui-page-active #color').val();
</script>

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui programment jQuery.