IxEdit – jQuery the easy way

Mit IxEdit ist es möglich JQuery Funktionen ohne JS-Programmierung direkt on-the-Fly im Browser den gewünschten HTML Elementen zuzuweißen. Statt vieler weiterer Worte das Demo Video:

Wenn ihr es ausprobieren wollt, so gehts:

1. Als erstes die notwendigen IxEdit Dateien von IxEdit herunterladen

2. Das das Google Gears Firefox Addon Google Gears Portable installieren und Browser neu starten

3. Im entpackten IxEdit Ordner die index.html aufrufen

Nun könnt ihr den bestehenden HTML Elementen nach belieben jQuery Events zuweißen. Das Tool ist ideal zum Experimentieren mit verschiedenen Effekten und auch allgemein um sich einen besseren Überblick über die Möglichkeiten von JQuery zu verschaffen.

Nachdem alle gewünschten Effekte integriert sind, wird mit der Deploy-Funktion der entsprechende jQuery Code angezeigt, der dann in das Quelldokument kopiert werden kann.

Easy oder!?

Lazy – jQuery Plugins on-demand laden

Die Tage schon bin ich über ein schönes kleines jQuery-Plugin names Lazy gestolpert.
Bei lazy handelt es sich um ein nur 530Byte großes Plugin das gerade bei großen Projekten einen gehörigen Vorteil, was das Laden von anderen jQuery-Plugins angeht, bringen kann.

Lazy tut nämlich nichts anderes, als Plugins nur dann zu initialisieren wenn auch irgendwo wirklich ein Aufruf für die Funktion erfolgt.
Sprich ihr könnt über lazy einbinden was ihr wollt, geladen wird es nur wenn es auch wirklich gebraucht wird.

Hier noch ein kleines Code-Beispiel:

1
2
3
4
5
6

$.lazy('jquery.elastic.js','elastic');
$.lazy('jquery.validation.js','validate');
$.lazy('jquery.ajaxdotnet.js','ajaxDotNet');
 
// And then you use you plugins as you always do
$('textarea').elastic();

Weiter Infos sowie eine Demo und die Files zum Download findet Ihr auf der offiziellen Seite:
http://www.unwrongest.com/projects/lazy/

Selektoren in jQuery

Ich möchte eine Serie starten in der Stück für Stück der Umgang mit jQuery seinen Elementen, Selektoren, Plugins, etc. beschrieben wird. Beginnen werde ich mit einer Beschreibung der verschiedenen Selektoren..

Grundlegende Selektoren

• $(‘code’)
• $(‘#someID’)
• $(‘.someClass’)
• $(‘*’)

1

XXX.css("border","3px solid red");

Für XXX wird einfach einer der obigen Selektoren eingesetzt. Besonders ist die Form mit *, die auf alle Elemente in dem Dokument angewendet wird.

Einfache Filter Funktionen

• $(‘li:first’)
• $(‘li:last’)
• $(‘li:not(li:first)’)
• $(‘li:even’)
• $(‘li:odd’)

Diese Selektoren wählen Elemente unter einer bestimmten Bedinung aus. “li-first” z.B. ist eine Referenz auf das erste Objekt einer ungeordneten Liste. “li:not(li:first)” gibt Referenzen auf alle Listenpunkte ausser dem ersten aus und erlaubt eine gewünschte Manipulation dieser Objekte.

1

$("tr:even").css("background-color", "#bbbbff");

Dieser Code würde in einer Tabelle für jeden geradzahligen Index die Hintergrundfarbe mittels der CSS Eigenschaft auf einen neuen Farbton ändern.

Content Filter

• $(‘li:contains(‘stringXXX’)')
• $(‘:empty’)
• $(‘li:has(a)’)
• $(‘p:parent’)

“contains” würde hier alle ListenElemente verändern in denen die Stringphrase “stringXXX” vorkommt.
“empty” prüft alle Elemente darauf ob ein Kindknoten im DOM-Baum vorhanden ist. Auch ein einfacher Text in ein p-Tag würde nicht zurückgegeben werden.

1

$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');

Visibility Filter

• $(‘:hidden’)
• $(‘:visible’)

Siehe dazu: 3-einfache-tips-fur-die-anpassung-auf-jquery-1.3

Attribut Filter

• $(‘li[class]‘)
• $(‘a[rel="self"]‘)
• $(‘[class^="my"]‘)
• $(‘a[title$="blog"]‘)

Eine interessante Möglichkeit ist das Filtern von Elementen anhand eines Attributes. “li[class]” spricht das oder die Element(e) an, die eine Attribut class besitzen.
“a[rel="self"]” zeigt auf Elemente von link Tags, welche im Attribut “rel” den Wert “self” besitzen.
Der dritte Listepunkt zeigt auf alle Knotenelemente die bei ihrem class Attribut mit “my” beginnen.
Der letzte Punkt stellt eine Möglichkeit dar, nach Elementen zu suchen, die am ende eines Attributes ein bestimmten String als Wert besitzen.

1

$("input[class^='my']").val("news here!");

Formulare

• $(‘:input’)
• $(‘:text’)
• $(‘:radio’)
• $(‘:checkbox’)
• $(‘:submit’)
• $(‘:image’)
• …

Hiermit lassen sich in HTML spezifizierten Formen von Formularfeldern ansprechen.

Formular Filter

• $(‘input:enabled’)
• $(‘:disabled’)
• $(‘:checked’)
• $(‘:selected’)

Mit diesen Filtern lassen sich abgeleitet von verschiedenen Eigenschaften der Formularfelder Elemente referenzieren. Also kann mit können mithilfe obiger Selektoren beispielsweise alle Felder die derzeit die Eigenschaft disabled besitzen ansprechen und manipulieren.

1

$("input:disabled").val("this is it");

Tips zum Umgang mit jQuery

Fertige Komponenten in die eigenen Sites bauen ist das eine. Das andere ist natürlich die Funktionailität selbst zu bauen. Dafür sind detailierte Kenntnisse über das Coding mittels jQuery notwendig. Hier mal ein paar Beispiele zum warm werden..
each statt for oder while

For-Schleifen mit Inkrementor, While-Schleifen mit Abbruch Bediengung. Kein großes Problem, aber oft umständlich. Viel einfacher geht es mit der each oder for-each Schleife. Vor allem in Verbindung mit Arrays. Auch in Java 5 steht das each wieder zur Verfügung. Hier mal ein kleines Beispiel:

1
2
3
4
5
6
7
8

var myArray = ['MooTools','Prototype','jQuery'];
 
$.each(myArray, function(index, item) {
// Mache etwas mit dem Arrayelement
// return false für Abbruch, true für weitermachen
// each wird automatisch verlassen wenn jedes Element
// durchlaufen ist
});

Filter Funktion

Damit lassen sich Elemente aus dem DOM-Baum einfach entfernen. Im Code kann das wie folgt aussehen:

1
2
3
4

$('div').filter(function(){
    return this.childNodes.length > 5;
    // Gibt einen Boolschen Wert zurück
});

Eventhandling mal anders

Um ein Event an ein Element zu binden ist nicht zwingend die ID des Elements notwendig. Dieser Vorgang lässt sich auch einfach mittels Variable umsetzen.

1
2
3
4
5
6

var myDiv = $('<div>').appendTo('body');
 
// Verwende myDiv um Click Funktion herzustellen
myDiv.bind('click', function(){
    // do something......
});</div>

Logger für Performance Messung

Es gibt für ein Problem immer viele Lösungen. Um rauszufinden welche sich besser eignet stehen mit jQuery Konsolen Befehle zur Verfügung.

1
2
3
4
5
6
7
8
9

console.time('Test1');
   // Programmlogik der ersten Variante..
console.timeEnd('Test1');
 
console.time('Test2');
   // Logik der Zweiten...
console.timeEnd('Test2');
 
// Das Firefox Plugin "Firebug" wird das Ergebnis mitloggen