JQuery: Logo (Copyright: www.jquery.com)

Bei JavaScript-Libraries haben viele Programmierer unterschiedliche Vorlieben.
Ich persönlich habe bisher meist mit JQuery gearbeitet, da dieses Framework mir meiner Meinung nach am meisten Funktionen mit recht einfacher Funktionsweise und Ansprache im Gegensatz zu anderen Libraries bietet.

Ich möchte nun einige Beispiele zeigen, wie JQuery für einige Aktionen angesprochen wird.

Libraries in HTML einbinden

HTML:

Das Einbinden funktioniert über einen JavaScript-Include im Head der HTML-Datei.

Toggle

HTML:

  
öffne Fenster
  
text text [Bild]

CSS:

  #show { display:  none; } // show wird anfangs nicht angezeigt

Script:

  $("#click").click(function () {
      $("#show").toggle();
    });

über diese Funktion wird das Div mit der Klasse show beim ersten Klick gezeigt beim zweiten wieder versteckt usw.

Ajax

Mit der Funktion load() wird jeweils Inhalt in das Div mit der ID nachladen geladen. Das Ganze passiert asynkron, also ohne ein Neuladen der Seite. Allerdings ist diese Methode zur Suchmaschinenoptimierung eher schlecht geeignet, da die Seite, die nachgeladen wird, von Google & Co. nicht indiziert wird.
Als Lösung dieses Problems lässt sich hier das noscript-Tag verwenden, in dem man die per Ajax-Befehl ausgelesenen Seiten verlinken kann.
Ein weiterer Nachteil ist, dass die Vor- und Zurück-Buttons des Browsers nicht so funktionieren, wie der Benutzer es erwartet.

Das Einbinden eines Ajax-Befehls kann zum Beispiel so aussehen:

HTML:

index.php

  
Ich will neuen Inhalt
  

ajax.php

  
Das ist neuer Inhalt, der per Ajax nachgeladen wurde.

Script:

  $("#title").click( function () {
      $("#nachladen").load("ajax.php");
    });

Das noscript-Tag könnte so aussehen:

Möchte man eine Loader-Grafik für die Zeit des Ladens von neuem Inhalt einblenden, muss das Script wie folgt aussehen:

  $("#title").click( function () {
      $("#nachladen").html("
");
      $("#nachladen").load("ajax.php");
    });

Die Klasse grafik bekommt nun folgende CSS-Styles zugewiesen:

  .grafik {
    height: 500px;
    width: 100%;
    background: url(loader.gif) no-repeat center center;
  }

Sobald JQuery die Datei ajax.php geladen hat, wird die Loader-Grafik mit dem Inhalt der ajax.php-Datei überschrieben. (Das Div mit der Klasse grafik wird gelöscht.)

Datepicker

Es gibt natürlich noch massig andere Funktionen, für die man das Framework nutzen kann. Allerdings möchte ich diese Funktionen jetzt nicht alle erläutern. Das würde zu lange dauern.
Ein tolles Feature, welches ich in letzter Zeit genutzt habe, ist der Datepicker der JQuery-UI.

Hier ein kleines Beispiel:

HTML:

Der Datepicker läd sich automatisch in das Div #datepicker. Das aktuell gewählte Datum wird in das Input-Feld geschrieben und kann somit über einen PHP-Request ausgelesen werden.

Script:

  $("#datepicker").datepicker({
      altField: "getDate"
    });

Will man ein anderes "Theme" - also Erscheinungsbild - des Datepickers aktivieren, muss man ein Theme von der Webseite laden oder einfach ein CSS schreiben, welches sich am default-Theme orientiert.
Um den Datepicker nutzen zu können, muss man die JQuery-UI mitladen, sowie das entsprechende Stylesheet.

Nähere Infos zum Datepicker und allen anderen Funktionen gibt's in den Docs zur JQuery.

Bei Anmerkungen oder Fragen emailt gerne oder hinterlasst einen Kommentar.