Warum funktioniert jQTouch nicht für mein HTML?

Ich bin neu in - es ist ziemlich genial - aber ich finde, dass ich nicht in der Lage bin, es aus der Box für meine HTML zu arbeiten, auch wenn ich die getting started Anleitung auch folgen wie die markup guidelines.Warum funktioniert jQTouch nicht für mein HTML?

Insbesondere ist jeder meiner Bildschirme ein <section> Element (direkt Kind von <body>) mit einer eindeutigen ID, und ich habe Links zu diesen IDs, z. <a href="#screen-a">. Dies scheint der Konvention des Demo-Codes zu folgen, aber der Demo-Code funktioniert und mein Code nicht.

Hier ist der HTML-Struktur meiner <body> ist:

<section id="main-menu"> 
    <header class="toolbar"><!-- ... --></header> 
    <nav> 
     <ul> 
      <li class="arrow"><a href="#screen-a">Screen A</a></li> 
      <li class="arrow"><a href="#screen-b">Screen B</a></li> 
      <li class="arrow"><a href="#screen-c">Screen C</a></li> 
     </ul> 
    </nav> 
    <footer><!-- ... --></footer> 
</section> 

<section id="screen-a"><!-- ... --></section> 
<section id="screen-b"><!-- ... --></section> 
<section id="screen-c"><!-- ... --></section> 

<script src="jquery.min.js"></script> 
<script src="jqtouch.min.js"></script> 

<script src="init.js"></script>

Und mein init.js initialisiert einfach jQTouch (keine benutzerdefinierten Optionen):

var jQT = new $.jQTouch({});

Wenn ich meine Seite laden, die Benutzeroberfläche erscheint in Ordnung, und ich kann bestätigen, dass jQTouch initialisiert wurde, weil meine jQT Variable existiert.

Wenn ich jedoch auf einen Link klicke, ändert sich die Adressleiste in den neuen Hash (z. B. "# screen-a"), aber die Benutzeroberfläche ändert sich nicht. Und die JavaScript-Konsole beginnt zu werfen mehrfache Keine Seiten in der Geschichte Fehler.

(Wenn ich die unminified jQTouch.js verwenden, kommen diese Fehler aus dem Inneren der jQTouch goBack() Funktion, die aus dem dumbLoopStart() Timer aufgerufen wird.)

Beachten Sie, dass dies für mich geschieht sowohl in Desktop-Safari und in Mobile Safari auf dem iPhone. Aber das ist sehr seltsam, weil ihre demo für mich auf beiden gut funktioniert.

Ich habe meinen Kopf gegen diese stundenlang ohne Erfolg geknallt. Hat jemand Ideen oder Vorschläge oder Tipps für das, was ich falsch machen könnte? Vielen Dank!

Quelle

2010-12-28 Aseem Kishore

Warum verwendet Ihr Code Abschnittselemente, wenn das Beispiel divs verwendet? –

Im Geiste von HTML5 dachte ich, Abschnitt wäre ein semantischeres Element als div. –

Ich erstellte einen Test von Ihrem bereitgestellten Beispiel (mit der Zugabe der Stil Importe). Das Entfernen der <nav> Elemente löste das Problem für mich.

Quelle

2010-12-29 17:40:24

Ja, du hast Recht! Es scheint, dass der Standard-Selektor für die Handhabung von Listen etwas überaggressiv ist und nach "body> *> ul li a" anstatt nach z. nur "ul li a". Vielen Dank! –

Ich glaube, dass Ihre wichtigsten Elemente div sein müssen. Zusätzlich benötigen Sie eine Klasse von "current" für das div, das zuerst angezeigt werden soll. Ich weiß nicht, ob die Version, die Sie verwenden, dies erfordert, aber was ich über Git vor einer Weile zurück gezogen erfordert, dass alle Ihre Hauptelemente in einem Div mit einer ID von "jqt" enthalten sind.

<div id="jqt"> 
    <div id="main-menu" class="current"> 
     <ul> 
      <li class="arrow"><a href="#screen-a">Screen A</a></li> 
      <li class="arrow"><a href="#screen-b">Screen B</a></li> 
      <li class="arrow"><a href="#screen-c">Screen C</a></li> 
     </ul> 
    </div> 

    <div id="screen-a"><!-- ... --></div> 
    <div id="screen-b"><!-- ... --></div> 
    <div id="screen-c"><!-- ... --></div> 
</div> 

<script src="jquery.min.js"></script> 
<script src="jqtouch.min.js"></script>

Quelle

2010-12-28 19:47:07

Danke für den Tipp, aber ich kann bestätigen, keine von beiden sind das Problem, wenn ich die Demo ändern, um auch Abschnitt zu verwenden und entfernen Sie die explizite Klasse = "aktuelle" - es funktioniert immer noch. (EDIT: soll Zeilenumbrüche einfügen, nicht submit.) Die jqtouch.js hat auch keine Instanz des Wortes "div", und es hat eine explizite Überprüfung, dass, wenn kein Bildschirm class = "current" hat, es zum ersten hinzufügt Bildschirm. –

Und das Container-Div (#jqt in Ihrem Beispiel) ist nicht mehr das Muster. Die Demo hat keine, und die Markup-Richtlinien sagen "jQTouch nimmt jeden direkten Nachfolger unter dem' 'und konvertiert es in ein Vollbild-Panel". –

Sie sind richtig, ein schneller Scan durch die JS-Datei zeigt keine Anforderung des "div" -Tags. Ich denke, die Demo basiert auf Version 1b2, die an diesem Punkt ziemlich alt ist.Wir hatten mehrere Probleme damit und haben die neueste Version von github (https://github.com/senchalabs/jQTouch/blob/master/jqtouch/jqtouch.js) heruntergeladen und bei Bedarf Änderungen vorgenommen. Sie werden in der aktuellen Version in GitHub finden, dass die "jqt" ID das Muster ist. Könnten Sie ein vollständigeres Beispiel veröffentlichen, das das Verhalten zeigt? –

Warum funktioniert jQTouch nicht für mein HTML?

Antwort

Verwandte Themen