PC Magazin mit Film DVD Windows Extreme (Vorschau)

it professional
DVD CD
Programmierung Sourcen und Listings 123
Accordeon: Zur Menüführung oder im Content-Bereich – besonders
interessant, da Suchmaschinen den kompletten Seiteninhalt finden.
$(‚#accordeon li‘).click(function(){
if( $(this).children(‚ul‘).is(‚:hidden‘) ) {
$(‚#accordeon li ul‘).slideUp();
$(this).children(‚ul‘).slideDown();
}
})
Mittels CSS können Sie das Aussehen und die Stil-Eigenschaften
des Accordions wiederum beliebig anpassen. JQuery-UI bietet auch
hier eine fertige Lösung, in unserem Beispiel haben wir aber darauf
verzichtet und das reine JQuery-Framework benutzt.
Tipp 3
Tipp 4
Individuell gestalten
mit CSS-Klassen
Eine sehr individuell einsetzbare Möglichkeit zur Definition und
Gestaltung ist das Hinzufügen (oder Entfernen) von CSS-Klassen
zu Elementen wie zum Beispiel dem A-Tag in einem Link.
Dazu fügen Sie folgende Funktion in Ihren Script-Bereich ein:
$(“a“).addClass(“link-bold“);
Um beispielsweise einen Link bei Mouseover fett darzustellen, fügen
Sie folgende CSS-Deklaration in Ihre CSS-Datei ein:
a.link-bold {
font-weight: bold;
}
Durch den Aufruf werden alle A-Tags in unserem Beispiel fett dargestellt.
Selbstverständlich können noch beliebig viele weitere Stile
mittels CSS dadurch zugewiesen werden. Umgekehrt können Sie
CSS-Klassen mit folgendem Aufruf entfernen:
$(„a“).removeClass(“link-bold“);
Beachten Sie bei der Formatierung per CSS, dass hierbei Klassen
und keine IDs erzeugt werden.
Hinweis-Texte anzeigen
und ausblenden
Die aus JavaScript bekannte Alert-Funktion kann ebenfalls über
reines JQuery sehr einfach und bequem erstellt werden.
Im folgenden Beispiel erstellen wir zusätzlich noch einen Link, der
den Hinweis-Text wieder verschwinden lässt.
Der entsprechende Code im Head-Bereich sieht so aus:
$(„a“)
.filter(„.zeigmich“)
.click(function(){
alert(„Beispieltext - Sie verlassen jetzt diese
Seite.“);
})
.end()
.filter(„.versteckmich“)
.click(function(){
$(this).hide();
return false;
})
.end();
Der HTML-Code im Body-Bereich des Webseite erzeugt zwei Links,
die durch Anklicken den im JavaScript definierten Hinweistext anzeigt
bzw. ausblendet.
Bitte achten Sie wieder jeweils auf die korrekte Schreibweise und
definieren Sie auch zur Gestaltung eine CSS-Klasse.
Tipp 5
Tooltipps statt Title
Mit Hilfe von JQuery ersetzen Sie das beim Mouseover erscheinende,
nichtssagende Title-Atribut durch einen – aussagekräftigeren
– Tooltipp.
Das Aussehen der Tooltipps passen Sie mit Hilfe entsprechender
CSS-Definitionen an.
Die JavaScript-Funktion erstellen Sie mit diesem Quelltext:
function jQuery_tooltip(target_items, name){
jQuery(target_items).each(function(i){
jQuery(„body“).append(„“+jQuery(this).attr(‚title‘)+““);
var jQuery_tooltip = jQuery(„#“+name+i);
if(jQuery(this).attr(„title“) != „“){
jQuery(this).removeAttr(„title“).
mouseover(function(){
jQuery_tooltip.fadeIn(150);
}).mouseout(function(){
jQuery_tooltip.fadeOut(150);
}).mousemover(function(tooltip){
jQuery_tooltip.css({left:tooltip.pageX+15,
top:tooltip.pageY+10});
});
}
});
}
jQuery(document).ready(function(){
jQuery_tooltip(„.title a“,“jQuery-tooltip“);
});
In der letzten Zeile unseres Scripts werden die Klassen bzw. IDs
definiert, die unseren Tooltipp ausführen sollen. Soll der Tooltipp
anstatt bei einem Link auch bei einem Bild aufgerufen werden, ersetzen
Sie a durch img, wie im folgenden Beispiel:
jQuery_tooltip(“.title a“, “#navigation a“, „#content
img“, „jQuery-tooltip“);
Die Stil-Definition nehmen Sie wiederum per CSS vor.
pk
Tooltipps können dem User sinnvolle und ergänzende Hinweise zu
Links oder Bildern etc. geben. Zusatzinformationen fallen so auf.
www.pc-magazin.de PC Magazin 10/2011