Am einfachsten lassen sich Checkboxen in jQuery mit der Abfrage bzw. dem Schreiben des Attributes checked behandeln (checked="" bzw. checked="checked"). Diese Schreibweise ist außerdem xHTML konform.
if( jQuery("#checkbox").attr("checked") ) {
...
}
jQuery("#checkbox").attr("checked", "checked");
Die selbe Vorgehensweise funktioniert übrigens auch mit Select-Optionen und selected="" bzw. selected="selected".
PopUps sind generell eine eher lästige Sache, gerade in Applikationen aber manchmal erwünscht. Generell lassen sich PopUps nur per JavaScript öffnen. Damit unsere Webseite aber auch ohne JavaScript funktionstüchtig wird ist es sinnvoll den PopUp-Aufruf erst mittels JavaScript zuzuweisen.
Das folgende Snippet fügt allen Links mit der Klasse "popup_link" den benötigten Funktion hinzu:
$(".popup_link").click(function(){
fenster = window.open(this.href, "popup", "width=550,height=500,status=no,scrollbars=yes,resizable=yes");
fenster.focus();
return false;
});
Externe Links möchte man meistens in einem neuen Fenster öffnen. Gerade bei Systemen mit Redakteuren wird das Setzen des entspechenden target-Attributes aber gerne vergessen. Das untere JavaScript fügt allen absoluten Links das Attribut target="_blank" hinzu. Achtung: interne Links müssen daher immer relativ angegben werden.
jQuery("a").each(function () {
if ( jQuery(this).attr("href").indexOf("http://") == 0 || jQuery(this).attr("href").indexOf("https://") == 0 ) {
jQuery(this).attr("target","_blank");
}
});
Wenn bei GoogleMaps die Karte nicht vollständig geladen wird und immer wieder Quadrate der Karte fehlen, kann eine mögliche Lösung die Angabe einer absoluten Größen beim erzeugen der Map sein. Dazu muss das erzeugende JavaScript modifiziert werden, der Aufruf könnte dann wie folgt aussehen:
var map = new GMap2(document.getElementById("map"),{size : {width:575,height:500}, mapTypes : [G_NORMAL_MAP,G_HYBRID_MAP,G_SATELLITE_MAP]});
jQuery bietet eine sehr einfache Möglichkeit Events auf HTML-Elemente zu binden und wieder zu entfernen. Zusätzlich bietet jQuery das Konzept von Namespaces um Events besser verwalten zu können.
jQuery(".class").click(function(){ ... });
oder
jQuery(".class").bind('click', function(){ ... });
jQuery(".class").unbind(); // alle events entfernen
oder
jQuery(".class").unbind('click'); // nur click-Events entfernen
oder
jQuery(".class").unbind('click', function(){ ... });
Da bei den oben beschriebenen Methoden aber alle Events die entsprechenden Elementen zugeordnet sind entfernet werden und nicht nur die eigenen bietet jQuery das konzept der Namespaces an. Dadurch sind Events eindeutig identifizierbar und es können somit auch nur die eigenen Events entfernt werden.
Gerade bei Darstellungsfehlern nach dem Scrollen oder Ein- und Ausblenden von Elementen, verursacht durch ein verabseumtes Neurendern durch den Browser (vor allem in IE6), ist es hilfreich diese Elemente per JS neu rendern zu lassen. Um das Neurendern eines Elements mittels JS zu erzwingen, muss diesem Element eine temporäre Fake-Klassen hinzugefügt werden. Diese Klassen müssen nicht existieren und dienen nur als Anstoß für den Browser.
Hintergrund: Eine Klasse entfernen erzwingt nicht immer ein komplettes neurendern des Elementes, wird allerdings eine Klasse hinzugefügt wird das Elemente neu gerendert, auch wenn die Klasse keine Definitionen besitzt.
Des öfteren ist es leider notwendig für InternetExplorer 6 und 7 eigenes JavaScript zu schreiben. Die folgende Browserabfrage, basierend auf jQuery, ermittelt zuverlässig die eingesetzte Version.
if (jQuery.browser.msie && /6.0/.test(navigator.userAgent)) {
alert('browser is ie6');
}
if (jQuery.browser.msie && /7.0/.test(navigator.userAgent)) {
alert('browser is ie7');
}
Gerade in Webapplikationen ist hin und wieder der Gebrauch von iFrames unumgänglich. Das folgende JS-Snippet passt dabei die Höhe des iFrames beim Laden der Seite automatisch dessen Inhalt an. Somit wird der Gebrauch von iFrames für den Benutzer unsichtbar.
jQuery("iframe").load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
Ein Browserfenster lässt sich mit Hilfe des JS-Befehls self.close() schließen. Dabei ist allerdings darauf zu Achten, dass der InternetExplorer dem Benutzer zunächst eine Abfrage, ob das Fenster wirklich geschlossen werden soll, präsentiert.
<a href="#" $="self.close();">Fenster schließen</a>
Gerade bei längeren Tabellen ist es für den Benutzer hilfreich wenn gerade und ungerade Tabellenzeilen sich farblich unterscheiden und somit eine "gestreifte" Tabelle ensteht. CSS bietet von Haus aus leider keine Möglichkeit diesen Effekt zu erzielen, darum muss geraden und ungeraden Tabellenzeilen jeweils eine eigene Klasse zugewiesen werden. Kann dies nicht applikationstechnisch im Hintergrund erfolgen kann man die Funktionalität auch per JavaScript nachrüsten.
var tablecount = 0;
jQuery("table.stripped tr").each(function(){
if(tablecount%2 == 0) {
jQuery(this).addClass("even");
} else {
jQuery(this).addClass("odd");
}
tablecount++;
});