Analyse häufiger Probleme in jquery mobile development

Analyse häufiger Probleme in jquery mobile development_jquery

WBOY

Freigeben： 2016-05-16 15:18:53

Original

1168 Leute haben es durchsucht

In diesem Artikel werden häufige Probleme bei der mobilen JQuery-Entwicklung anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

jquery mobile ist sehr leistungsfähig. Sie müssen keine Methoden in das Programm schreiben, um zu bestimmen, um welche Art von Mobiltelefon es sich handelt. Sie können js verwenden, um Kompatibilität mit verschiedenen Smartphones zu erreichen. Das liegt auch an seinen leistungsstarken Funktionen. Das jQuery-Mobile-Plug-in verfügt über mehr als 200 K und das Min. über 140 K.

1. jquery mobile führt Seitenanfragen über Ajax durch. Wie jeder weiß, leert Ajax keine neuen Seiten. Mit anderen Worten: Änderungen in der Adressleiste sind keine echten Updates. Es liegt ein Problem vor. JS wird nur ausgeführt und funktioniert, wenn die Seite aktualisiert wird. Wenn Sie jedoch auf den Sprung auf der Seite klicken, funktioniert er nicht zurück.

Fehlercode:

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

Nach dem Login kopieren

Korrekter Code:

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

Nach dem Login kopieren

Wenn es sich um eine JQuery 1.9-Serie handelt

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

Nach dem Login kopieren

2. Alle Seiten befinden sich auf einer Seite. Achten Sie zu diesem Zeitpunkt darauf, nicht dieselbe ID zu verwenden, da sonst nur die erste gelesen wird. Wenn eine Seite mehrere Seiten enthält, treten viele Probleme auf. Beispielsweise ist die Berechnung des Abstands vom Etikett zum oberen Rand des Fensters ungenau.

Falsche Schreibweise:

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

Nach dem Login kopieren

Das Problem beim Schreiben auf diese Weise besteht darin, dass möglicherweise viele Seiten vor der aktuellen Seite stehen, sodass der oberste Wert falsch ist. Wenn Sie die Seite aktualisieren, ist der Wert korrekt

Richtiges Schreiben:

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

Nach dem Login kopieren

.ui-page-active gibt die aktuell aktive Seite an, sodass die berechnete Höhe korrekt ist.

3. Das Zuweisen von PHP-Variablen zu JS-Variablen funktioniert manchmal, manchmal nicht.

Code kopieren Der Code lautet wie folgt:

color = '
Die Ursache dieses Problems wurde nicht gefunden. Es kann jedoch auf andere Weise gelöst werden.

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

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.