Tag Archiv: Selector

Mrz200920

Stefan Huissel

0

Wie nutzt man MooTools?!

Inspiriert von einem Artikel von “chromasynthetic” möchte ich ein paar Best Practices für den Umgang mit MooTools vorstellen und diese kurz erläutern.

  • Elemente ansprechen
    • ?View Code JAVASCRIPT
    1
2
3
4

       //javascript methode
   document.getElementById("someID");
   //mit Mootools
   $('someID');

    Mit Mootools weit kürzer und vor allem problemlos zwecks CamalCases.

  • “Value” bearbeiten
    • ?View Code JAVASCRIPT
    1
2
3
4

       //javascript methode
   var val= document.getElementById('input').value;
   //mit Mootools
   var val = $('input').getValue();

    Mootools bietet diverse Methoden um Objekteigenschaften zu verändern oder auszulesen.

  • Verketten von Methoden
    • ?View Code JAVASCRIPT
    1
2
3
4
5
6
7
8

       //javascript methode
   $('div').style.height = '100px';
   $('div').style.background = '#ffc';
   //mit Mootools
   $('footer').setStyles({
   height: '100px',
   background: '#ffc'
});

    Einfaches Beispiel für eine Verkettung von Funktionen.

  • Absetzen eines AJAX-Requests
    • ?View Code JAVASCRIPT
    1
2
3
4
5
6
7
8
9
10

       //falsche Methode
   new Ajax('eine.php?var1=test&var2=request');
 
   //besser mit  
   new Ajax('eine.php', {
       data: {
       var1: 'test',
       var2: 'request'
  }
});

    Beide Möglichkeiten führen zum selben Ergebnis. Allerdings ist die Überschaubarkeit für letzteres deutlich größer. Für nicht statische Variabeln wie z.B. der ‘test’-String lassen sich an dieser Stelle natürlich auch Selektoren benutzen.

  • Event-Handling
    • ?View Code JAVASCRIPT
    1
2
3
4
5

       //Falsche Methode
   $('Container').onclick = doSomething;
 
   //besser mit  
   $('Container').addEvent('click', doSomething);

    Die zweite Variante ist weitaus sicherer, da sich damit der Mootools Core um die Umsetzung auf den jeweiligen Browser kümmert.

  • Einfache Iteration über Elementgruppen
    • ?View Code JAVASCRIPT
    1
2
3
4
5
6
7

       //Falsche Methode
   $$('div.collapsed').each(function(el){
      el.addEvent('click', expand);
      });
 
   //besser mit  
   $$('div.collapsed').addEvent('click', expand);

    Beide Versionen selektieren in diesem Fall jedes div mit der Klasse “collapsed” und legen darauf ein Click-Event. Das “$$” gibt Elemente in Form eines Arrays zurück, so dass eine Iteration mit der each-Funktion nicht mehr nötig ist.
    Gleiches gilt für:

    ?View Code JAVASCRIPT
    1
2
3
4
5
6
7

       //Falsche Methode
   $$('div.hidden').each(function(el){
      el.removeClass('hidden');
   })
 
   //besser mit  
   $$('div.hidden').removeClass('hidden');

Ich hoffe dem ein oder anderen Einsteiger wird damit klar, inwiefern sich Standard Javascript von dem Einsatz von MooTools unterscheidet und wie man diese Zusatzfunkionalitäten nutzen kann.

Mrz200911

Stefan Huissel

0

3 einfache Tips für die Anpassung auf jQuery 1.3

Vor ein paar Monaten erschien der jQuery Realease 1.3. Viele Skripts, die auf den vorherigen Versionen basierten laufen immernoch anständig. Aber hier und da treten doch Probleme beim Upgrade auf. Diese Probleme lassen sich nach Karl Swedberg in 3 Ebenen klassifizieren:

1. Update des “Selector” Attributes

Der wohl am häufigsten auftretende Fehler entsteht durch die redefinition des Selectors auf Attribute. In vorherigen Versionen wurden die Attribute eines Elements mit dem XPath Ausdruck “@Attribute” angesprochen und geändert. Ab 1.3 basiert das Ansprechen auf dem CSS Syntax. Hierzu ein kleines Beispiel:
Früherer Syntax:

?View Code JAVASCRIPT
1
2

   $('a[@href^=http]');
   $('[@title=foo]');

Aktuell in jQuery 1.3:

?View Code JAVASCRIPT
1
2

      $('a[href^=http]');
      $('[title=foo]');

2. Überprüfung eigener Selektoren

Werden eigene Selektoren benutzt, kommt es hin und wieder zu Fehlern wenn das zweite Argumente des neuen Objektes ein String ist.

?View Code JAVASCRIPT
1
2
3

      jQuery.extend(jQuery.expr[':'], {
        hasSiblings: "jQuery(a).siblings(m[3]).length>0"
      });

Das lässt sich einfach durch eine anonyme Javascript Funktion beheben die als return-Wert den String besitzt.

?View Code JAVASCRIPT
1
2
3

 jQuery.extend(jQuery.expr[':'], {
    hasSiblings: function(a,i,m) {return jQuery(a).siblings(m[3]).length>0;}
 });

3. Notation von auf “Hidden” oder “Visible” gesetzten Elementen

Wenn man vor der Version 1.3.2, ein Element mit der Eigenschaft “display:block” hatte, dass innerhalb eines anderen Elementes mit “display:none” lag, dann wurde das innere Elemente trotzdem bei Abfrage im Code als sichtbar ausgegeben.

?View Code HTML
1
2
3
4
5

<div id="outer1" style="display:none">
        <div id="inner1">
            Nicht sichtbares div
        </div>
      </div>

Vor der Version 1.3.2 hätte der Aufruf $(‘#inner’1).is(‘:visible’) zu return true geführt und $(‘#inner1:hidden’) hätte 0 Elemente zurückgegeben.

Ab 1.3.2 führt $(‘#inner’1).is(‘:visible’) zu dem Wert false und $(‘#inner:hidden’) findet 1 passendes Element.