jQuery – 1 – Einführung und Tooltip

jQuery ist eine freie, ziemlich umfangreiche JavaScript Bibliothek. jQuery bietet Funktionen zur DOM-Navigation und -Manipulation. Es unterstützt große Teile von XPath und CSS-Selektoren. Es bietet Programmierhilfen für Ajax wie Event-Handling und animierte Effekte.

jQuery wurde von John Resig entwickelt und im Januar 2006 auf dem BarCamp in New York veröffentlicht. Es lässt sich außerdem durch zahlreiche Plugins erweitern.

Hier findet ihr die jQuery Website

Ein Beispiel für jQuery Anwendungen sind z.B. Lightbox, Greybox, und Thickbox die ich schonmal angesprochen habe.

Warum jQuery?

Man kann das ganze doch auch in JavaScript direkt machen ..

  • jQuery trennt HTML und JS .. der Code bleibt “rein”
  • jQuery ist klein .. es hat nur 15 KB
  • Aufrufe und Logik sind simpler als in JS
  • In allen gängigen Browser (auch dem IE6) funktioniert jQuery
  • es spart einfach Zeit bei der Entwicklung

Bildervorschau mit jQuery – einfaches Beispiel

Hier mein Beispiel zum ausprobieren: Bildervorschau mit jQuery

Schaut euch den Quelltext an den ich nun etwas erleutere.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
     // Dein Code 
   });
</script>

In der ersten Zeile wird das jQuery eingebunden. Am besten lädst du dir es von der jQuery Website herunter.
Mit $(document).ready(function() {}); wird sichergestellt daß das Dokument soweit geladen ist das es ohne Fehler manipuliert werden kann.

Da man nicht wissen kann wie schnell das Dokument beim User geladen wird ist dies eine der wichtigsten Funktionen in jQuery. Sie garantiert das die gewünschten Manipulationen erst dann durchgeführt werden können wenn der komplette Quelltext zur Verfügung steht.

Los gehts:

$("a.snapshot").append("<img src='exa.png' border='0' />");

Hier suchen wir nach allen A Tags mit der Klasse snapshot im Body bereich. Mit .append erweitern wir den A Tag um img src=‘exa.png’ border=‘0’ was dann nachher als kleines Icon (Lupe) hinter dem Text dargestellt wird.

Die Funktion – Auslesen:

$("a.snapshot").hover(function(pic) {
  trgt = $("a.snapshot");

Wenn nun die Maus über einen A Tag bewegt wird, der die Klasse snapshot hat, wird die Funktion (pic) aufgerufen. Der Variablen trgt wird der Inhalt des A Elements mit der Klasse Snapshot zugewiesen.

Die Funktion – Neues Element:

html = "<div id='viewpic' class='viewpic_style'><img src='" 
  + trgt.attr("href")
  + "' border='0' /><br /><b>"
  + trgt.attr("title")
  + "</b></div>";
   $(html).appendTo("body");

Der Variablen html wird nun ein neues DIV Element zugewiesen. Wir kleben hier quasi unser neues Element mit vorhandenen aus dem BODY Bereich ausgelesenen Inhalten zusammen. Mit trgt.attr(“href”) holen wir uns die URL des Bildes und mit trgt.attr(“title”) den Inhalt des TITLE Tags.

Mit * $(html).appendTo(“body”);* hängen wir den Inhalt der Variablen html in den BODY des Quelltextes.

Die Funktion – Mausoffset:

$('#viewpic').css ({
   left: (pic.pageX + 15) + 'px', 
   top: (pic.pageY + 18) + 'px'});

Damit das Bild beim Hover nicht am Mauszeiger klebt verrücken wir es um 15 Pixel nach rechts und um 18 Pixel nach unten.

Die Funktion – Anzeigen/Verbergen:

$('#viewpic').show();}
   ,function(pic) {$('#viewpic').remove();

Mit $(’#viewpic’).show();} wird das Bild angezeigt sobald es zum Mouseover kommt.
,function(pic) {$(’#viewpic’).remove(); ist die Angabe für den Mouseout. Fehlt diese würde das Bild nachdem man den Link mit dem Mauszeiger verlassen hat nicht ausgeblendet.

Hier nochmal das Beispiel: Tooltip mit jQuery
Hier der Quelltext im TXT Format

So das war mein erstes kleines HandsOn jQuery. Ich lerne auch gerade noch .. hoffe es folgen noch ein paar.

Leave a Reply

Your email address will not be published. Required fields are marked *