Share
In diesem Lernprogramm nehmen wir Ihre durchschnittliche Website für den Alltag mit jQuery auf. Wir werden eine Ajax-Funktionalität hinzufügen, damit der Inhalt in den entsprechenden Container geladen wird, anstatt dass der Benutzer zu einer anderen Seite navigieren muss. Wir werden auch einige tolle Animationseffekte integrieren.
Ich habe also zunächst ein sehr einfaches Layout für dieses Beispiel zusammengestellt. Hier ist ein Screenshot und der HTML-Code, den wir verwenden werden.
mmm… Ajax! Ajax… Nüsse
- herzlich willkommen
- Über
- Portfolio
- Kontakt
- Begriffe
Herzlich willkommen!
Text
Tutorial von James für NETTUTS
Als Erstes laden Sie sich die neueste stabile Version von jQuery herunter und verknüpfen Sie sie in Ihrem Dokument:
JQuery ist meiner Meinung nach die Einfachheit. Wir können die oben beschriebene Funktionalität mit atemberaubenden Effekten in nur wenigen Codezeilen erreichen.
Lassen Sie uns zunächst die jQuery-Bibliothek laden und eine Funktion initiieren, wenn das Dokument bereit ist (wenn das DOM geladen ist)..
$ (document) .ready (function () // Stuff here);
Wir möchten also, dass der Browser beim Klicken auf einen Link innerhalb des Navigationsmenüs unserer Seite nicht zur entsprechenden Seite navigiert, sondern den Inhalt dieser Seite in die aktuelle Seite lädt.
Wir möchten die Links innerhalb des Navigationsmenüs anvisieren und eine Funktion ausführen, wenn sie angeklickt werden:
Accentsconagua
$ ('# nav li a'). click (function () // function here); Lassen Sie uns zusammenfassen, was diese Funktion in der Ereignisreihenfolge tun soll:
Wir müssen festlegen, von welcher Seite die Daten abgerufen werden, wenn auf einen Link geklickt wird. Alles, was wir hier tun müssen, ist das Attribut 'href' des angeklickten Links zu erhalten und das als die Seite zu definieren, von der aus die Daten aufgerufen werden sollen. Außerdem müssen wir den Aufenthaltsort auf der angeforderten Seite definieren, um die Daten abzurufen will ALLE Daten ziehen, nur die Daten im 'content' div, also:
var toLoad = $ (this) .attr ('href') + '#content'; Um zu veranschaulichen, was der obige Code tut, stellen wir uns vor, der Benutzer klickt auf den "about" -Link, der auf "about.html" verweist. In dieser Situation würde diese Variable lauten: "about.html #content" - dies ist die Variable, die wir " Alle Anfragen im Ajax-Aufruf. Zunächst müssen wir jedoch einen schönen Effekt für den aktuellen Seiteninhalt erstellen. Anstatt es einfach nur verschwinden zu lassen, verwenden wir die "Hide" -Funktion von jQuery wie folgt:
$ ('# content'). hide ('fast', loadContent); Die obige Funktion "versteckt" den #content div schnell, und wenn dieser Effekt beendet ist, initiiert er die Funktion "loadContent" (den neuen Inhalt laden [über Ajax]) - eine Funktion, die wir später definieren werden (in Schritt 4) ).
Sobald der alte Inhalt mit einem unglaublichen Effekt verschwindet, möchten wir den Benutzer nicht einfach fragen, bevor der neue Inhalt eintrifft (vor allem, wenn er eine langsame Internetverbindung hat), sodass wir eine kleine "Ladegrafik" erstellen, damit sie es wissen im Hintergrund passiert etwas:
$ ('# wrapper'). anhängen ('WIRD GELADEN… '); $ ('# load'). fadeIn ('normal'); Hier ist das CSS für das neu erstellte #load div:
#load display: none; Position: absolut; rechts: 10px; oben: 10px; Hintergrund: URL (images / ajax-loader.gif); Breite: 43px; Höhe: 11px; Gedankenstrich: -9999em;
Standardmäßig ist dieser Ladebereich so eingestellt: none, aber wenn die Funktion fadeIn (im obigen Code) gestartet wird, wird sie in die obere rechte Ecke der Website eingeblendet und zeigt unsere animierte GIF an, bis sie angezeigt wird wieder ausgeblendet.
Wenn ein Benutzer auf einen der Links klickt, geschieht Folgendes:
Nun schreiben wir die loadContent-Funktion, die wir zuvor aufgerufen haben:
Funktion loadContent () $ ('# content'). load (toLoad, ", showNewContent) Die loadContent-Funktion ruft die angeforderte Seite auf und ruft dann die Funktion 'showNewContent' auf:
function showNewContent () $ ('# content'). show ('normal', hideLoader); Diese showNewContent-Funktion verwendet die show-Funktion von jQuery (eigentlich ein sehr langweiliger Name für einen sehr coolen Effekt), damit der neue (angeforderte) Inhalt im '#content' div angezeigt wird. Nachdem der Inhalt aufgerufen wurde, wird die Funktion 'hideLoader' initiiert:
function hideLoader () $ ('# load'). fadeOut ('normal'); Wir müssen daran denken, am Ende unserer Klick-Funktion "false" zurückzugeben - der Browser navigiert also nicht zur Seite
Es sollte jetzt perfekt funktionieren. Sie können hier ein Beispiel sehen: [LINK]
Hier ist der Code bisher:
$ (document) .ready (function () $ ('# nav li a')). click (function () var toLoad = $ (this) .attr ('href') + '#content'; $ (' #content '). hide (' fast ', loadContent); $ (' # load '). remove (); $ (' # wrapper '). append ('WIRD GELADEN… '); $ ('# load'). fadeIn ('normal'); Funktion loadContent () $ ('# content'). load (toLoad, ", showNewContent ()) Funktion showNewContent () $ ('# content'). show ('normal', hideLoader ()); Funktion hideLoader () $ ('# load'). fadeOut ('normal'); return false;);); Sie könnten dort aufhören, aber wenn Sie sich um die Benutzerfreundlichkeit sorgen (was Sie sollten), ist es wichtig, etwas mehr Arbeit zu erledigen. Das Problem bei unserer aktuellen Lösung ist, dass die URL vernachlässigt wird. Was wäre, wenn ein Benutzer auf eine der "Seiten" verlinken wollte? - Es gibt keine Möglichkeit für sie, weil die URL immer gleich ist.
Ein besserer Weg, dies zu tun, wäre die Verwendung des Hash-Werts in der URL, um anzugeben, was der Benutzer gerade sieht. Wenn der Benutzer also den "About" -Inhalt anzeigt, könnte die URL lauten: "www.website.com/#about". Wir müssen nur eine Codezeile zur Click-Funktion hinzufügen, damit der Hash der URL hinzugefügt wird, wenn der Benutzer auf einen Navigationslink klickt:
window.location.hash = $ (this) .attr ('href'). substr (0, $ (this) .attr ('href'). length-5); Der obige Code ändert den URL-Hashwert im Wesentlichen in den Wert des Attributs 'href' des angeklickten Links (minus der Erweiterung '.html'. Wenn also ein Benutzer auf den Link 'home' (href = index.html) klickt, wird der Hashwert verwendet Wert wird "#index" lesen.
Außerdem möchten wir es dem Benutzer ermöglichen, die URL einzugeben und die richtige Seite zu erhalten. Dazu prüfen wir den Hashwert beim Laden der Seite und ändern den Inhalt entsprechend:
var hash = window.location.hash.substr (1); var href = $ ('# nav li a'). each (function () var href = $ (this) .attr ('href'); if (hash == href.substr (0, href.length-5 )) var toLoad = hash + '. html #content'; $ ('# content'). load (toLoad)); Hierin enthalten ist der gesamte Javascript-Code: (plus die jQuery-Bibliothek)
$ (document) .ready (function () // Auf Hashwert in URL überprüfen var hash = window.location.hash.substr (1); var href = $ ('# nav li a'). each (function ( ) var href = $ (this) .attr ('href'); if (hash == href.substr (0, href.length-5)) var toLoad = hash + '. html #content'; $ (' #content '). load (toLoad)); $ (' # nav li a '). click (function () var toLoad = $ (this) .attr (' href ') +' #content '; $ ('#content'). hide ('fast', loadContent); $ ('# load'). remove (); $ ('# wrapper'). append ('WIRD GELADEN… '); $ ('# load'). fadeIn ('normal'); window.location.hash = $ (this) .attr ('href'). substr (0, $ (this) .attr ('href'). length-5); Funktion loadContent () $ ('# content'). load (toLoad, ", showNewContent ()) Funktion showNewContent () $ ('# content'). show ('normal', hideLoader ()); Funktion hideLoader () $ ('# load'). fadeOut ('normal'); return false;);); Das Tolle an dieser Methode ist, dass sie anpassungsfähig ist und innerhalb weniger Minuten auf eine Website angewendet werden kann. Es ist völlig unauffällig und die Website funktioniert normal, wenn JS deaktiviert ist.
Sehen Sie sich das letzte Arbeitsbeispiel an
Laden Sie HTML, JS, CSS & Images herunter
