WEBDESIGN

5 jQuery Tipps & Tricks

Viele Webseiten verwenden das Javascript Framework jQuery, heute schauen wir uns ein paar Tipps und Tricks an, um noch effizienter mit jQuery zu arbeiten. jQuery wurde entwickelt, um Webentwicklern das Leben einfacher zu machen und um Innovationen voranzutreiben. Es kann deshalb nicht schaden, noch ein paar Tricks mehr zu kennen, um sich das Leben vielleicht noch einfacher zu machen.

Verschiedene Themes — Stylesheet Switch

Es gibt Webseiten die bieten verschiedene Themes an, welche im besten Fall unkompliziert gewechselt werden können. So einen Themeswitcher mit jQuery zu basteln ist relativ einfach. Ein Browser arbeitet Stylesheets in der Reihenfolge ab, in der sie in die Seite eingebunden werden, dass heißt insbesondere, dass Styles die in einem anderen Stylesheet weiter oben definiert wurden, automatisch von nachfolgenden Stylesheets überschrieben werden.

$("#Theme1Switch").click(function() {
   $("link[media='screen']").attr("href", "Theme1.css");
 });
 
 $("#Theme2Switch").click(function() {
   $("link[media='screen']").attr("href", "Theme2.css");
 });
 
 $("#Theme3Switch").click(function() {
   $("link[@media='screen']").attr("href", "Theme3.css");
 });

Alternativ könnte man auch mit data-Attributen arbeiten und gewinnt somit noch etwas an Flexibilität.

$('.themeSwitcher').click(function() {
   var theme = $(this).data('theme-stylesheet');
    $("link[@media='screen']").attr("href", theme);

});

Eigenen Selektor definieren

Auf Element greift man bei jQuery im Allgmeinen per CSS Selektor zu, auf das Div-Element mit der ID haus z.B. greift man mit $('#haus') zu. Nun gibt es aber noch die Möglichkeit, eigene jQuery Selektoren zu definieren, mit denen wir z.B. jedes Element auswählen könnten, welches einen roten Rahmen hat.

$.extend($.expr[':'], {
    redBorder: function(el) {
        return $(el).css('borderColor') === 'red';
    }
});
 
$('.element:redBorder').click(function() {
    alert('Dieses Element hat einen roten Rahmen!');
});

Element vertikal und horizontal zentrieren

Für dieses Problem gibt es bereits einige jQuery Plugins, aber wir können auch schnell selber ein Plugin schreiben, dass Elemente horizontal und vertikal auf der Seite zentriert.

// jQuery Plugin "anlegen"
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}
 
// Das Plugin kann dann direkt verwendet werden.
$('.element').center();

Ähnliche Resultate sind auch rein mit CSS möglich, allerdings ist das vertikale Zentrieren nicht ganz so einfach wie das horizontale.

Mauskoordinaten bestimmen

Ab und an kann es vorkommen, dass man die Mauskoordinaten braucht und irgendwie weiterverarbeiten muss. Mit jQuery ist es kein Problem an diese Informationen zu kommen, wie nachfolgendes Script zeigt.

$(window).mousemove(function(e){
    var x_cord = e.pageX;
    var y_cord = e.pageY;
  //...
}); 

Prüfen ob Element in einem anderen Element ist

Wenn man prüfen möchte, ob ein bestimmtes Element Kind von einem anderen ist, kann man dies mit jQuery auf sehr einfache Weise tun.

if($(".parentElement").has(".childClass").length)){
//mach was....
}
else{
//mach ebenfalls was....
}


Kommentare ( 1 Kommentar )

  • Moritz Antworten ↓

    Auch ein schönes Tutorial. Vor allem der Abschnitt mit den eigenen Selektoren hat mich begeistert. Dieser kleine Schnipsel wird mich in Zukunft wohl oft unterstützen.

Schreib einen Kommentar