jQuery
Freitag01. Februar 2008

Ein halbes Jahr nach dem ersten Preview Release des YAML Builders ist es es Zeit für die Version 1.0 dieses kleinen aber feinen Zusatztools zum YAML Framework. In dieser Version habe ich den Großteil der Features einbauen könnnen, die mir bereits letzten August am Herz lagen, damals jedoch aufgrund des Zeitmangels und der Arbeit an der 2. Auflage meines Buches “CSS Layouts” nicht integriert werden konnten.

Den gesamten Beitrag lesen


Dienstag11. September 2007

Das jQuery-Team legt ein Tempo an den Tag, über welches es sich nur staunen lässt. Während der letzten 2 Monate wurden mit zwei Releases (1.1.3 und 1.1.4) die Arbeitsgeschwindigkeit der Library jeweils enorm gesteigert. Pünktlich als September-Highlight folgt die Veröffentlichung der Version 1.2, welche zahlreiche lang ersehnte Funktionen mit sich bringt. Und zur Krönung ist für das kommende Wochenende die Veröffentlichung des neuen Interface-Plugins geplant.

Ich bin restlos begeistert. Außerdem kommt mir beides gerade recht für die weitere Arbeit am YAML Builder.


Montag10. September 2007

Erst vor ein paar Tagen habe ich hier im Blog über den Ansatz von Chris Heilmann berichtet, gleichlange Spalten nicht mit CSS sondern nachträglich per Javascript zu erzeugen.

Dieser Weg ist immer dann sinnvoll, wenn gleichlange Container einen optisch ein reizvollen Effekt darstellen, für die Funktion der Webseite jedoch nicht zwingend relevant sind. Aus eigener Erfahrung würde ich sagen, dass dies in den meisten Fällen zutrifft. Nicht lange nachdem mein Blogbeitrag im Netz stand, meldete sich Dirk Ginader und wir bastelten eine Lösung für YAML auf Basis von jQuery. Die wenigen Codezeilen waren schnell geschrieben,  doch letzte Woche hatten wir beide viel umdie Ohren, sodass ich erst jetzt dazu komme, unser kleines Plugin mit dem Namen SyncHeight kurz vorzustellen.

Das Plugin synchronisiert die Höhe einer beliebigen Anzahl von Elementen innerhalb eines Layouts. Einzige Voraussetzung: Die Elemente müssen sich lediglich über einen gemeinsamen CSS Selektor ansprechen lassen (also beispielsweise eine gemeinsame CSS-Klasse). Als Beispiel hier der Aufruf zur Anpassung der Containerhöhen der YAML Subtemplates:

$(document).ready(function(){
  $('.subcolumns > div').syncHeight();
}); 

Für Layouts mit fixer Breite war’s das bereits. Innerhalb eines flexiblen Layouts kann es nötig sein, die Angleichung der Containerhöhen zu aktualisieren wenn die Breite des Browserfensters geändert wird. Dazu kann der Resize Event von jQuery genutzt werden:

$(document).ready(function(){
  $('.subcolumns > div').syncHeight();
  $(window).resize(function(){ 
    $('.subcolumns > div').syncHeight();
  });
});

Nachtrag 11.9: Befinden sich gleich mehrere Subtemplates auf der Seite empfielt es sich, den gewünschten Subtemplate-Container direkt über eine ID anzusprechen. Sollen hingegen ALLE Subtemplates innerhalb einer Webseite mit einem Schlag bearbeitet werden, so sind noch ein paar mehr Zeilen Javascript nötig. Hier hat sich Reinhard Hiebl bereits Gedanken gemacht schlägt folgenden Code vor:

$(document).ready(function(){
  var eachCase = '.subcolumns'; // for each lines/paragraphs
  var element = '> div'; // elements within lines/paragraphs from eachCase

  $($(eachCase)).each(function() {
    var el = $(this).find(element);

    el.syncHeight();
    $(window).resize(function(){
      el.syncHeight();
    });
  });
});

In diesem Fall werden alle Subtemplates einer Webseite erfasst, jedoch die Container-Höhen immer nur jeweils innerhalb eines Subtemplates synchronisiert.

Letztlich ist die Anwendung nicht auf YAML begrenzt. Über den Selektor können beliebige Elemente in ihrer Höhe manipuliert werden.

Download des Plugins (v1.0): jquery.syncheight.zip (Dual licensed under the MIT and GPL licenses)


Donnerstag16. August 2007

Heute ist ein schöner Tag denn heute kann ich nach vielen Stunden abendlicher Spielerei mit jQuery ein kleines aber feines Tool vorstellen, welches in Zukunft die Arbeit mit YAML und das Verständnis für die Anwendung des Frameworks deutlich verbessern wird. Der YAML Builder startet als kleine Machbarkeitsstudie in der Version 0.3.

Nachdem ich mich jahrelang erfolgreich um Javascript gedrückt habe, waren die anfänglichen Erfolge umso mehr Ansporn, die Flexibilität von YAML über den Builder für den Nutzer sichtbar und leichter zugänglich zu machen. Die Inspiration für die Oberfläche kam - wie unschwer zu erkennen - vom Grids Builder für das YUI Framework von Yahoo. Wie beim Grids Builder schwebt die Toolbox über dem Layout und ist frei verschiebbar.

Was kann dieses knuffige Teil nun in dieser frühen Version 0.3:

  • Wahl des Doctypes: XHTML steht in der Strict- und in der Transitional-Variante zur Verfügung
  • Freie Wahl der in das Layout integrierten Basiselemente (#header, #footer, ...)
  • Freie Wahl der Anzahl der Content-Spalten (0 ... 3)
  • Beliebige Spaltenanordnung auf dem Bildschirm bei 2- und 3-Spaltenlayouts
  • Freie Eingabe der Layout- und der Spaltenbreiten
  • Innerhalb der Basiselemente können Subtemplates, sowie Dummy-Inhaltselemente per Drag & Drop eingefügt sowie ineinander verschachtelt werden
  • Ansicht und Ausgabe (per Kopie ins Clipboard) des vollständigen XTHML-Markups
  • Ansicht und Ausgabe (per Kopie ins Clipboard) des der relevanten CSS-Regeln für basemod.css sowie das IE-Patch-File
  • Umschaltmöglichkeit zwischen dem Entwurfsmodus und einer Voransicht des fertigen Layouts

Ein klein wenig stolz bin ich insbesondere auf die Möglichkeit des Hinzufügens bzw. des Verschachtelns von zusätzlich in das Layout eingefügten Elementen. Wer sich beispielsweise ein Bild über die Leistungsfähigkeit der Subtemplates machen möchte, dem empfehle ich, die Content-Spalten mal komplett abzuschalten und ein Layout aus frei verschachtelten Subtemplates zu erstellen. Also mir hat das bisher riesigen Spaß gemacht.

Eine ganze Menge für den Anfang. Ich bitte daher ausdrücklich um Feedback (Meinungen, Bug-Hinweise, Verbesserungs- und Erweiterungsvorschläge). Bedanken möchte ich mich in diesem Zusammenhang bei den drei Javascript-/jQuery-Göttern Timo Derstappen, Dirk Ginader und Tom Klingenberg, die sich meine Fragen zu unmöglichen Zeiten angehört und sich mit mir zusammen das Hirn zermartert haben.

Voll Funktionsfähig sollte der YAML Builder unter Firefox, dem IE7, Opera 9 und dem Safari 3 sein.  Im Safari 2.x gibts wohl derzeit noch ein kleines Problem mit den Tab-Reitern aber dieses Problemchen muss zunächst warten. Für das Kopieren des Quellcodes ins Clipboard verwende ich eine kleine Flash-Hilfe, was jedoch in 99% der Fälle installiert sein sollte. Ach ja, liebe Firmenadmins - Javascript sollte man anschalten, sonst geht da nix.

Also dann, viel Spaß beim Klicken.


Seite 3 von 3 Seiten

 <  1 2 3