Ich versuche gerade, eine neue Website zu erstellen, nichts besonderes, nett und klein, aber ich stecke ganz am Anfang. Meine Probleme sind saubere URLs und Seitennavigation. Ich möchte es "richtig machen".
Was ich gerne hätte:
Es sollte möglich sein, ohne eine Seitenaktualisierung hin und her zu gehen, aber die Seite wird immer noch den richtigen Inhalt entsprechend der aktuellen URL anzeigen.
Es sollte auch möglich sein, eine Seite neu zu laden, ohne einen 404-Fehler zu bekommen. Die Website sollte dank CodeIgniter existieren. (es gibt einen Controller und eine Ansicht)
Beispiel:
Eine sehr einfache Webseite. Zwei Links, "Foo" und "Bar" genannt, und eine leere Div-Box unter ihnen.
Die grundlegende URL ist example.com
Wenn Sie auf "foo" klicken, ändert sich die URL in "example.com/foo" ohne erneutes Laden und die Div-Box erhält neuen Inhalt mit jQuery .load (). Dasselbe gilt für den anderen Link, natürlich nur für den Inhalt und die URL.
Nach dem Klicken auf "foo" und dann "bar" bringt mich die Zurück-Schaltfläche zurück zu "example.com/foo" mit dem entsprechenden Inhalt. Wenn ich diesen Link direkt lade oder die Seite aktualisiere, sieht es genauso aus. Kein 404 Fehler oder so.
Denk einfach an diese Seite und sag mir, wie du das machen würdest. Ich würde wirklich gerne diese Art von Navigation haben und so habe ich mehrere Dinge ausprobiert.
Bis jetzt ...
Ich weiß, wie man CodeIgniter verwendet, um die URLs so zu bekommen. Ich weiß, wie man jQuery benutzt, um zusätzliche Inhalte zu laden, und obwohl ich das HTML5-Pushstate-Zeug nicht vollständig verstehe, habe ich es wenigstens irgendwie zum Laufen gebracht.
Aber ich kann nicht alles zusammen arbeiten.
Mein Code ist momentan ein Durcheinander, das ist der Grund, warum ich ihn hier nicht wirklich veröffentlichen möchte. Ich schaute mir verschiedene Tutorials an und kopierte etwas Code zusammen. Wäre besser, meinen CI-Ordner hochzuladen, denke ich.
Einige der Tutorials, die ich angeschaut habe:
(max. Anzahl der erreichten Links: /)
Ich denke, mein Hauptproblem ist, dass jeder versucht, es mit allen Browsern und verschiedenen Versionen kompatibel zu machen, fügt Skripte / jQuery-Plugins und so weiter hinzu und ich werde durch den zusätzlichen Code verwirrt. Es gibt mehr Code zwischen meinen Skript-Tags als der tatsächliche HTML-Inhalt. Könnte jemand die grundlegendste Methode zur Verwendung von HTML5 für meine Beispielseite veröffentlichen?
Mein gescheiterter Versuch:
Wenn ich auf meine Testseite zurückgehe, ändert sich die URL, aber die Div-Box zeigt immer noch denselben Inhalt, nicht den alten. Ich weiß auch nicht, wie man die URL im Skript entsprechend dem href-Attribut von der Verbindung ändert. Gibt es etwas wie $ (this) .attr ('href'), das sich je nachdem, auf welchen Link ich klicke, ändert? Im Moment müsste ich für jeden Link ein Skript verwenden, was natürlich schlecht ist.
Wenn ich die Seite aktualisiere, tritt CodeIgniter ein und lädt die Ansicht, aber wirklich nur die Ansicht selbst, die, die ich mit Ajax geladen habe, nicht die ganze Seite. Aber ich denke, das sollte mit einem Layout und den richtigen Controller-Einstellungen einfach zu beheben sein. Habe dem noch nicht viel Aufmerksamkeit geschenkt.
Vielen Dank im Voraus für jede Hilfe. Wenn Sie Anregungen, Ideen oder einfach nur etwas erwähnen möchten, lassen Sie es mich wissen.
Grüße DiLer
Ich habe hier ein erfolgreiches minimales Beispiel für den HTML5-Verlauf erstellt: Ссылка
Der einfachste Weg, um in HTML5-Pushstate zu kommen, ist meiner Meinung nach, den Rahmen für eine Weile zu ignorieren und den einfachsten vereinfachten Statusübergang zu verwenden: einen umfassenden Ersatz der Elemente <body> und <title> . Außerhalb dieser Elemente ist der Rest des Markups wahrscheinlich nur ein Muster, wenn es jedoch variiert (z. B. wenn Sie die Klasse für HTML im Backend ändern), können Sie das anpassen.
Was ein dynamisches Backend wie CI tut, ist im Wesentlichen die Existenz von Daten an bestimmten Orten (identifiziert durch die URL) zu fälschen, indem es dynamisch dynamisch erzeugt wird. Wir können von der Wirkung des Frameworks abstrahieren, indem wir die Ressourcen buchstäblich erstellen und sie an Orten platzieren, an denen Ihr Webserver (Apache, wahrscheinlich) sie einfach identifizieren und weiterleiten wird. Wir haben eine sehr einfache Dateisystemstruktur relativ zum Domänenstamm:
%Vor%Das sind die einzigen drei Dateien, mit denen wir arbeiten.
Hier ist der Code für die zwei HTML-Dateien. Wenn Sie mit HTML5-Funktionen auf der Ebene sind, sollten Sie in der Lage sein, das Markup zu verstehen, aber wenn ich nichts klarstellen wollte, hinterlassen Sie einfach einen Kommentar und ich werde Sie durchgehen:
Sie werden feststellen, dass Sie, wenn Sie one.html über Ihren Browser laden, auf den Link zu two.html klicken können, der eine neue Seite lädt und anzeigt. Und von two.html , kannst du dasselbe zu one.html machen. Cool.
Nun zum Geschichtsteil:
Ich definiere replacePage innerhalb des jQuery-ready-Callbacks, um ein einfaches Laden der URL im Argument durchzuführen und den Inhalt der Elemente title und .container durch entfernte Elemente zu ersetzen.
Der Aufruf live bedeutet, dass jeder Link, der auf die Seite geklickt wird, den Rückruf auslöst, und der Callback den Status auf den href in der Verbindung setzt und replacePage aufruft. Es verwendet auch e.preventDefault , um zu verhindern, dass die Verbindung normal verarbeitet wird.
Schließlich gibt es ein popstate -Ereignis, das ausgelöst wird, wenn ein Benutzer die browserbasierte Seitennavigation (zurück, vorwärts) verwendet. Wir binden einen einfachen Rückruf an dieses Ereignis. Bemerkenswert ist, dass ich die Version auf der Dive Into HTML-Seite aus irgendeinem Grund nicht in FF für Mac verwenden konnte. Keine Ahnung warum.
Dieses extrem einfache Beispiel kann mehr oder weniger auf jede Seite verpflanzt werden, da es einen sehr unkreativen Übergang darstellt: HTML-Ersatz. Ich schlage vor, Sie können dies als Grundlage und Übergang in kreativere Übergänge verwenden. Ein Beispiel dafür, was Sie tun könnten, wäre zu emulieren, was Github mit der Verzeichnisnavigation in seinen Repositories macht. Es ist ein intermediate manoever, das Schwimmer und Überlaufmanagement erfordert. Sie könnten mit einem einfacheren Übergang beginnen, indem Sie .container auf der geladenen Seite an das DOM anhängen und dann den alten Container auf {height: 0} animieren.
Sie sind auf dem richtigen Weg, den HTML5-Verlauf zu verwenden, aber Sie müssen Ihre Vorstellung klarstellen, was genau /foo und /bar enthalten. Grundsätzlich haben Sie drei Seiten: / , /foo und /bar . / hat einen leeren Container div. /foo ist identisch mit / , außer dass der Container div etwas foo-Inhalt enthält. /bar ist identisch mit /foo , außer dass das Container-div über einen Balkeninhalt verfügt. Jetzt kommt die Frage, wie Sie den Inhalt des Containers durch Javascript extrahieren würden. Angenommen, Ihr /foo body -Tag sah ungefähr so aus:
Dann würden Sie es aus der Antwort data bis var html = $(data).filter('.container').html() extrahieren und dann über $('.container').html(html) wieder in die übergeordnete Seite einfügen. Sie verwenden filter anstelle des viel sinnvolleren find , weil der DOM-Parser von jQuery aus irgendeinem verrückten Grund ein jQuery-Objekt erzeugt, das jedes Kind des head und jedes Kind des body -Elements statt nur eines jQuery-Objekts enthält Wrapping des Elements html . Ich weiß nicht warum.
Der Rest passt es einfach wieder in die "Vanille" -Version oben an. Wenn Sie in einer bestimmten Phase feststecken, lassen Sie es mich wissen, und ich kann Sie besser führen, obwohl es.
Tags und Links jquery html5 url codeigniter pushstate