jQuery Einzeiler

von

Hello again,
js

Heute möchte ich euch gern drei jQuery Knodeschnippsel zeigen, die ich fast bei jedem Projekt benutze oder die zumindest hier und da mal nützlich sein könnten. Alles, was man dafür braucht, ist die aktuelle jQuery Version in seine Seiten einzubinden. Die drei Einzeiler lauten wie folgt:

  1. Intelligente Suchleiste
  2. Table Zebrastreifen
  3. Nach Oben Scrollen

Im folgenden Beispiel ist der jQuery Code direkt in ein input-Tag geschrieben.

1
2
3

<input type="text" id="searchstring" value="Search"
onfocus="if(this.value=='Search') this.value='';" 
onblur="if(this.value=='') this.value='Search';"/>

Was die Suchbar macht:

  1. Das Suchfeld wird über das value-Attribut mit dem Begriff “Search” befüllt.
  2. Klickt man in das Feld, wird “Search” entfernt und man kann seinen eigenen Suchbegriff eingeben.
  3. Wenn etwas anderes als “Search” im Feld steht und man klickt hinein, wird der Cursor hinter das aktuelle Wort gesetzt.
  4. Verlässt man das Suchfeld und es befindet sich kein Suchbegriff darin, wird es wieder mit “Search” befüllt.

Table Zebrastreifen

Oftmals will man Tabellenzeilen in sich abwechselnden Farben darstellen. Dazu müsste man den geraden/ungeraden tr-Tags immer eine Klasse geben. Das Problem ist, was macht man, wenn die Tabellen generiert werden? Hier hilft uns jQuery weiter, indem wir sagen: Suche in jeder Tabelle nach allen geraden/ungeraden tr-Tags und gebe ihnen eine CSS Klasse. Folgender Code bewirkt genau das:

1

$("tr:nth-child(odd)").addClass("odd");

Per CSS kann man dann den den Zellen eine andere Hintergrundfarbe geben (hier ein helles grau):

1
2
3

tr.odd td {
    background-color:#e9e9e9;
}

Anmerkung: Das Beispiel durchsucht wirklich alle Tables. Um die Suche einzugrenzen, sollte man vor dem Selektor noch ein weiteres Element schreiben, z.B. “#content” ($(“#content tr:nth-child(odd)”)). Dann werden nur Tables innerhalb des Content-Divs durchsucht und entsprechend angepasst. Weiterhin vergibt der obige Code die Klasse “odd” an alle ungeraden tr-Tags, beginnend also mit dem ersten.

Nach Oben Scrollen

Manchmal gibt es am unteren Ende von Webseiten einen kleinen Link, der einen schnell wieder nach oben bringt. Das ist besonders nützlich, wenn die Seiten sehr lang sind und es eine Zumutung für jeden User wäre, den ganzen Weg mit dem Mausrad zu scrollen (es sei denn, man hat so ein tolles Mausrad von Logitech ;) ). Diese Links heißen meistens “back to top”, “top” oder “nach oben” und mit einem Klick wird man buchstäblich nach oben katapultiert. Um die “Fahrt” etwas angenehmer zu gestalten, kann man jQuery benutzen. Dabei landet man dann nicht mehr sofort ganz oben sondern die Seite wird sehr flott nach oben gescrollt – ganz ohne Mausrad.

1
2
3
4

$('#toplink').click(function(){
$('html, body').animate({scrollTop: '0px'}, 500);
return false;
});

Der HTML-Code dazu:

1

<a href="#" id="toplink">Back to Top</a>

Anmerkung: Die Zahl weiter hinten gibt an, wie lange (in Millisekunden) die Animation – also das Scrollen – dauern soll.

Live Demo

So das wars auch schon wieder. Wer will, kann sich die drei Sachen auch in der Live-Demo mal anschauen und ausprobieren. Kopieren ist natürlich erlaubt und erwünscht ;)

Die hier könnten dich auch interessieren…

nach oben