Frontends mit jQuery - Nützliche Codeschnipsel

0 | 4 Kommentare | 7220 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Frontends mit jQuery - Nützliche Codeschnipsel" mit Ihrem Wissen!

Einige nützliche Codeschnipsel, die einem bei der Arbeit mit jQuery doch den einen oder anderen guten Dienst erweisen. Grundlage ist die jQuery Javascript Library

Inhaltsverzeichnis

Anzeige Hier werben

Funktionen aufrufen

Einige der nachfolgenden Schnipsel werden aufgerufen, sobald der DOM geladen ist. Dies hat gegenüber einer Initialisierung per onload den Vorteil, dass die Funktionen bereits ausgeführt werden, bevor externe Quellen, wie z.B. CSS-Dateien oder Bilder in den Browsercache geladen sind. Der folgende Code wird Euch also öfter begegnen …

jQuery Code  
JavaScript
1
2
3
$(function () {
    doSomething();
});

Grundsätzlich wird dieses über die ready() -Funktion gemacht, in den Beispielen findet sich aber meistens die kurze Schreibweise (jQuery(callback)), die das Gleiche tut, aber einfach bequemer zu schreiben ist.

Beschreibung

Gerade bei Dokumenttypen, bei denen eine externe Anwendung gestartet wird um die Inhalte wiederzugeben (z.B. *.pdf, *.mov, *mpg) macht es Sinn, den Benutzer visuell auf die Art der Datei hinzuweisen. Der Klassiker ist hier wohl ein kleines Icon vor dem Link. Wäre CSS 3 schon im Alltag benutzbar, könnte man bequem auf die Attribut-Selektoren zurückgreifen und so per CSS auf die Art der verlinkten Datei reagieren:

CSS Definition  
css
1
2
3
4
a[href=$pdf] {
    background: url(icons/pdf.gif) no-repeat 0 50%;
    padding-left: 18px;
}

Diese Definition würde jetzt jeden Link, dessen HREF-Attribut mit pdf endet mit dem gewünschten Icon versehen. Hört sich gut an, oder? Leider Leider ist CSS 3 ja nun noch kein Standard und eine Praxistauglichkeit der neuen Version möchte ich in den nächsten Jahren mal dahingestellt wissen. Aber: jQuery ist ja nun ziemlich ausgebufft und hat die CSS3-Selektoren implementiert.

Anwendung

Mit einem kleinen Schnipsel, der aufgerufen wird, sobald der DOM geladen ist, erzielen wir den gewünschten Effekt - browserübergreifend:

jQuery Code  
JavaScript
1
2
3
$(function () {
    $("a[href$='pdf']").addClass('pdf');
});

So bekommt nun jeder Link, der auf ein PDF-Dokument zielt, automatisch eine Klasse verpasst, mit der wir bequem im CSS weiterarbeiten können.

Styling HRs - jQuery-style

Beschreibung

Die semantische Gliederung eines HTML-Dokuments erfolgt vorgesehener Maßen über die Überschriften der Ordnung 1-6. Zusätzlich kennzeichnen Horizontale Linien - also eine <hr /> - sowohl visuell als auch logisch die Grenzen zwischen Abschnitten im Dokument. Verschiedene Formatierungen der HR per CSS sind problemlos und browserübergreifend möglich, einzig bei der Verwendung eines Hintergrundbildes stößt man auf das - im verlinkten Artikel beschriebene - Problem, dass der IE6 und verschiedene Opera-Versionen einen störenden Rahmen um die - nun eher als Grafik formatierte - Linie anzeigen. Der Lösungsansatz aus LanTastics Artikel, indem die HR in ein zusätzliches Div eingebettet wird, funktioniert natürlich wunderbar. Der Übersicht halber hier noch einmal das Konstrukt:

HTML-Code  
HTML
1
<div class="hr"><hr /></div>
CSS-Definition  
css
1
2
3
4
5
6
7
8
9
div.hr {
    width: 400px;
    height: 20px;
    background: url(bg-hr.gif) no-repeat;
}

div.hr hr {
    display: none;
}

Anwendung:

Nun ist das Ganze allerdings ein wenig unpraktisch, denn das HTML-Konstrukt muss ja in den Quelltext. Klar, serverseitig ausgeben geht, aber das bläht den Quelltext des Dokuments nur unnötig auf. Die kleine, aber feine Funktion wrap() erledigt das für uns - eben jQuery-style:

jQuery Code  
JavaScript
1
2
3
$(function () {
    $('hr').wrap("<div class='hr'></div>");
});

Was passiert jetzt? Ganz einfach: Der DOM wird nach dem Element HR abgesucht und ebensolches in das zusätzliche Div eingekuschelt, das wir zum erweiterten Styling brauchen. So bleibt der Quelltext sauber und ich denke, die eine Zeile im JS ist es allemal wert.

Beispiel

Beispielcode  
Dieses Beispiel ausprobieren
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>wmp-styling-hrs</title>
<style type="text/css" media="screen">
div.hr {
    height: 20px;
    margin: 2em;
    background: url(http://www.webmasterpro.de/portal/article/freunde-von-wmp.html/image/code_Coder.png) repeat-x;
}

div.hr hr {
    display: none;
}
</style>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('hr').wrap("<div class='hr'></div>");
});
</script>
</head>
<body>
<hr />
</body>
</html>

Beschreibung

Externe Links werden automatisch mit einem target="_blank" versehen. Dabei wird über einen Attribut-Selektor gefiltert, ob der Link mit dem http:// Prefix versehen ist. Zusätzlich wird über den :not - Selektor die eigene Domain von der Regel ausgenommen.

Anwendung

jQuery Code  
JavaScript
1
2
3
$(function () {
    $('a[href~="http://"]:not([href~="http://www.meinedomain.de/"])').attr({target: "_blank"});
});

Soweit so gut, die externen Links öffnen sich in einem neuen Fenster. Natürlich gibt es auch eine ziemlich simple Lösung dafür, diese auch als externe Links zu kennzeichnen, indem man über's CSS Einfluss auf die Gestaltung nimmt (Siehe auch Dokumentformate automatisch erkennen und Klassen für Links vergeben ). Das ganze können wir per addClass() simpel an unsere bestehende Funktion anhängen.

jQuery Code  
JavaScript
1
2
3
$(function () {
    $('a[href~="http://"]:not([href~="http://www.webmasterpro.de/"])').attr({target: "_blank"}).addClass("extern");
});

So bekommt jeder externe Link die Klasse .extern verpasst, die wir dann im CSS definieren können, z.B. so:

CSS Definiton  
css
1
2
3
4
a.extern {
    padding-right: 10px;
    background: url(linkout.gif) no-repeat 100% 50%;
}
Beispiel
Beispielcode  
Dieses Beispiel ausprobieren
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Externe Links im neuen Fenster öffnen</title>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<style type="text/css" media="screen">
ul {
    list-style: square;
    font: .9em/1.4 helvetica, arial, sans-serif;
}

a {
    color: #600;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a.extern {
    padding-right: 10px;
    background: url(http://www.ingowagener.de/drop/examples/linkout.gif) no-repeat 100% 50%;
}
</style>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('a[href~="http://"]:not([href~="http://www.webmasterpro.de/"])').attr({target: "_blank"}).addClass("extern");
});
</script>
</head>
<body>
<ul>
    <li><a href="http://www.ingowagener.de">www.ingowagener.de</a></li>
    <li><a href="http://www.google.de">www.google.de</a></li>
    <li><a href="http://www.macnews.de">www.macnews.de</a></li>
    <li><a href="http://www.webmasterpro.de/coding/article/css-freie-schriftwahl-fuer-die-website.html">Freie Schriftwahl für die Website? (Artikel auf webmasterpro.de)</a></li>
</ul>
</body>
</html>
Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "Frontends mit jQuery - Nützliche Codeschnipsel" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Frontends mit jQuery - Nützliche Codeschnipsel" hier bearbeiten.

Mitarbeiter

Kommentare: Frontends mit jQuery - Nützliche Codeschnipsel

Neuen Kommentar schreiben
Non JS und JS
Beantworten

Ich finde diese Lösungen sind ziemlich schlecht gelöst.
Bin immer noch der Meinung, dass eine Seite sowohl mit Javascript, als auch ohne weitestgehend gleich aussehen sollte. Natürlich ohne bestimmte Funktionen wie Slider, FadeEffekten etc. Aber den Leuten die ohne Javascript surfen (was ja oftmals irgendeinen Grund hat), direkt diverse kleine Hilfssymbole etc zu entziehen finde ich falsch, zumal einem Link die Klasse PDF hinzuzüfgen den Code nicht wirklich aufbläht, genauso wenig wie das <div class=hr><hr></div>. Einzigst gut gelöst ist die Methode mit externen Links für XHTML Strict 1.0

Yannic Stadler am 04.12.2009 um 16:37
Selectors...
Beantworten

Meiner Meinung nach wird in diesem Artikel mehr auf Selektoren eingegangen, deswegen finde ich den Titel etwas schlecht gewählt.

Patrick Freitag am 05.12.2008 um 11:03
Re: Selectors...
Beantworten

… und meiner Meinung nach kann da noch 'ne ganze Menge rein. Rom und einen Tag und so …

Man nicht hibbelig werden … a) ist bald Jupp ihm sein geburtstag und b) wollen die Brötchen auch verdient werden.

Benutzer gelöscht am 05.12.2008 um 12:25
Re: Selectors...
Beantworten

Ähm, ja. Lass ich jetzt mal so stehen ohne einen Zusammenhang zum schlecht gewählten Titel zu sehen. Und wenn da noch ne Menge reinkommt und es noch nicht fertig ist, ist es ne Baustelle.

Aber okay, war ja nur ein Vorschlag. ;)

Patrick Freitag am 05.12.2008 um 12:45