Yahoo! User Interface Blog (YUIBlog)

YUI 3 Quick Tipp: Hinzufügen eigener Ehrfürchtige

Lukas ( @ ls_n ) veröffentlicht diesen Ausschnitt als Antwort auf eine Frage, den anderen Tag, und ich dachte, es war es wert hier als eine schnelle Spitze.

Wie bei den meisten Wähler-basierte Idiome, kommt viel Ausdruckskraft YUI 3 die von dem, was Sie tun können, wenn Sie auf eine oder mehrere HTMLElements haben - in YUI 3, das heißt mit einem Knoten-Referenz, die Sie bekommen in der Regel über Y.one( selector string ) oder Y.all( selector string ) . Also, Y.one("#foo"). doSomethingInteresting ist ein gemeinsames Muster.

Es ist einfach, YUI 3 Ausdruckskraft, indem Sie eigene Magie, um Knoten (und / oder NodeList) zu verlängern. Hier ist eine Möglichkeit, um Ihren Erweiterung modular und wiederverwendbar.

Erstellen Sie zunächst ein neues benutzerdefiniertes Modul (wir nennen es node++ ):

  YUI.add ("Knoten + + ', function (y) {
	
	 / / Eine Funktion definieren, die im Rahmen eines Laufs wird
	 / / Node-Instanz:
	 Funktion doSomethingAwesome () {
		 Y.log ("Tun Sie etwas genial hier.");
	 }

	 / / Verwenden, um addMethod doAwesomeThing dem Knoten Prototyp hinzuzufügen:
	 Y.Node.addMethod ("doAwesomeThing", doSomethingAwesome);
	
	 / / Erweitern diese Funktionalität zu Nodelisten:
	 Y.NodeList.importMethod (Y.Node.prototype "doAwesomeThing");
	
 }, '0 .0.1 ', {Erfordert: [' Knoten ']}); 

Lukas-Kern ist hier .

Mit dieser Definition auf der Seite, node++ kann use d in jeder Instanz. In Ihrer Implementierung Code, würden Sie tun:

  YUI (). Nutzung ("Knoten + + ', function (y) {
	
	 / / Aus einem einzigen Knoten zu verwenden:
         . Y.one ('# foo') doAwesomeThing ();

	 / / Aus einer NodeList verwenden:
	 Y.all ('p') doAwesomeThing ().;
	
 }); 

Beachten Sie, dass nur die YUI-Instanz (en), zu dem Sie Ihre binden node++ -Modul Zugriff haben doAwesomeThing . Ein Merkmal dieser Konstruktion, die Sie gerne, wie Sie komplexe Anwendungen zu bauen, ist, dass Ihre Implementierung Logik nicht ändern müssen, wenn die Liste der Abhängigkeiten für node++ entwickelt sich - das wird für Sie automatisch gehandhabt zu werden bei use() Zeit, und die Abhängigkeit Erklärung bleibt mit dem Code auf die sie sich bezieht.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

YUI Theater - Dav Glass: (. 36 min) "Mit Node.js und YUI 3"

Ryan Dahl Arbeiten Node.js - und die Gemeinschaft bilden, um dieses Projekt - hat HTML5 als eine der großen Geschichten des Jahres 2010 beigetreten. YUI Ingenieur Dav Glass hat gearbeitet, um YUI 3 ein mächtiger Verbündeter für Node.js Implementierer zu machen, und in diesem Video zeigt er Ihnen, was er bisher getan hat - darunter Demos von zunehmend verbesserte Widgets laufen den gleichen Code auf Client und Server. Verpassen Sie nicht diese ein.

Wenn das Video einbetten unten nicht richtig dargestellt in Ihren RSS-Reader, klicken Sie sich durch zu beobachten, oder laden Sie die hochauflösende Version des Videos auf YUI Theater .

• Download-HD-Videos (480p ~ 271MB)
• Video herunterladen (M4V)
• Ein hochauflösendes, transkribiert Version dieser Diskussion ist auf der Website verfügbar YUI Theater

Andere Recent YUI Theater Videos:

• Alois Reitbauer: dynaTrace AJAX Edition - dynaTrace bietet eines der mächtigsten Werkzeuge zur Analyse der Performance von Web-Anwendungen im Internet Explorer. In diesem Vortrag geht dynaTrace Ingenieur Alois Reitbauer durch vier spezifische analytische Szenarien über die dynaTrace-Schnittstelle.
• Ryan Grove: Das Streben nach Performance-Zen mit YUI 3 - Nach der kodifizierten Richtlinien können Ihnen dabei helfen, schnell Webseiten, sondern Anwendungen, die Gebäude sauber, schnell und erweiterbar sind ebenfalls beinhaltet einen ausgewogenen Ansatz, um die Leistung auf allen Ebenen Ihres F2E Arbeit. YUI 3 wird entwickelt, um Ihnen in diesem Prozess zu helfen und bietet eine passende Größe Abstraktionsschicht mit eingebautem Performance Magie und eine Vielzahl von Werkzeugen, die einen schnellen Frontend-Code einfach und macht Spaß zu produzieren machen. In dieser Session werden wir das Zen des performante JavaScript in der YUI 3 Welt zu erkunden und stellen Ihnen einige der leistungsstarken Tools YUI 3 stellt Ihnen in jeder Anwendung, die Sie schreiben.
• Douglas Crockford: Crockford über JavaScript - Szene 6: Loopage - Software-Entwicklung wird durch eine bestimmte Gruppe von Design-Fehler, die in den ersten Programmiersprachen gemacht wurden und wiederholt in allem, was getan worden ist seit behindert. Und, die etwas überraschend ist JavaScript gehen, um es richtig zu machen, radikal verändern unsere Anwendungen schreiben. Wieder. In the Loop der Geschichte hat das alles schon passiert, aber es war noch nie so passiert. Das ist, warum Sie über die Entstehung von Server-Side JavaScript und der Aufregung rund um Projekte wie Node.js kümmern sollte - nicht weil sie an der scharfen Ende eines Trends, sondern weil sie ebnet den Weg in die nächste große Revolution in der Software.

Abonnieren von YUI Theater:

• YUI Theater RSS-Feed
• YUI Theater auf iTunes

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

Umsetzung in den Vordergrund: Autovermietung Express

Autovermietung Express ist der führende unabhängige Autovermietung Vergleich Website im Internet. Es ermöglicht Anwendern Online-Mietwagen in über 1000 Städten und Flughäfen in aller Welt.

Unser Kundenstamm ist weitgehend nicht-technische, das heißt, sie wollen die Preise und Mietwagen so einfach wie möglich zu vergleichen. Mit dem Relaunch unserer Website im Juni 2010 haben wir viele Komponenten von YUI 2 implementiert, um unseren Kunden eine intuitive Erfahrung.

Welche YUI-Komponenten verwenden wir?

Die Komponenten, die wir verwendet haben sind Verbindungs-Manager , AutoVervollständigen , DataSource , Kalender , Animationen , JSON , und Container .

Warum wählten wir YUI

Bei der Überprüfung der verschiedenen JavaScript-Bibliotheken, die wir möglicherweise auf könnte Autovermietung Express , fanden wir, dass das YUI das kompletteste für unsere Bedürfnisse war. Die meistverkaufte Features für uns war das sehr modulare Ansatz der YUI nahm an verschiedenen Design-Patterns, sowie die robuste Dokumentation und Beispiele zur Verfügung gestellt sie umzusetzen. Aus entwicklungspolitischer Sicht zu dieser rasanten Entwicklung unserer Anwendung, ohne sich mit einer Bibliothek zu kämpfen geführt.

Wie verwenden wir YUI

Wir nutzen die YUI in einer Reihe von Möglichkeiten. Unser 4 am häufigsten verwendeten Komponenten sind AutoVervollständigen-, Kalender-, Behälter-und Verbindungs-Manager. Hier sind einige der Möglichkeiten, nutzen wir jede dieser Komponenten.

AutoVervollständigen

Die AutoVervollständigen-Komponente wird umfassend auf unserer Website verwendet werden, um Nutzer finden eine Stadt oder Flughafen, in dem ein Auto zu mieten. Wir mochten, wie einfach es ist, diese Komponente zu implementieren war, und wie schnell er antwortet. Wir Cache Suchergebnisse Server-Seite zur Verbesserung der Suchergebnisse, allerdings mit dem Client-seitiges Caching half auch enorm bei der Beschleunigung der Reaktion des Bauteils. Ein weiteres Merkmal, dass wir wirklich nahm an war, wie einfach die Ergebnisse zu Stil waren. Bei der Anzeige der Standorte für den Benutzer dies war entscheidend, da wir feststellen, welche Orte, an denen in den Städten gefunden wurden und die an Flughäfen gefunden nötig.

Kalender

Die Kalender-Komponente wird auch auf der gesamten Website verwendet, wenn ein Mieter in Terminen füllen wird, um eine Suche durchzuführen. Wir verwenden eine angepasste Version von John Peloquin das Intervall Selection Kalender und sie in einem YUI Dialog . Im Grunde, was wir tun wollte, war verleihen dem Mieter eine zweimonatige Sicht bei der Wahl ihrer Termine, sowie visuell ihnen zeigen, was sie derzeit Datumsbereich ausgewählt haben. Auch dies war extrem einfach zu implementieren mit YUI 2 Kalender, und es lief im Grunde auf die Schaffung eines YUI Dialog, Einstellung des Körpers auf ein div für den Kalender enthält, dann Anbringen eines YUI Interval Kalender in diesem div.

Container

Wir nutzen YUI Container in unserer gesamten Website in einer Reihe von verschiedenen Möglichkeiten. Im obigen Beispiel wurden wir mit einem Dialog, die uns helfen Anzeige des Intervall-Kalender, wenn ein Benutzer ein Datum auswählen. Auf unserer Seite mit den Suchergebnissen bewerten wir machen starken Gebrauch von Containern, um dem Mieter weitere Informationen über verschiedene Aspekte der Autovermieter und dem Fahrzeug, das sie potenziell mieten könnten. Die meisten der Container auf dieser Seite sind Panels , dass wir für jeden unterschiedlichen Auflistung Wiederverwendung. Zum Beispiel verfügt das Fahrzeug-Display-Panel:

Schließlich hat es sich ein wenig mehr Spaß mit dem Mieter bewertet Agentur Ratings. Bei der Anzeige der Bewertungen, wollten wir wirklich die Aufmerksamkeit des Benutzers auf die Noten erhielt eine Agentur zu konzentrieren und diese Informationen in einem sauberen, easy-to-Ansicht darzustellen. Durch den Einsatz des Dialog Control konnten wir den Viewport und Zentrum der Dialog einfach zwingen uns zu helfen, dieses Ziel zu erreichen. Durch das Setzen eines leeren Kopf-und Fußzeile es gemacht Styling einfach, indem einfach die entsprechenden Stile zu unserem CSS. Das Endergebnis war ein sauberer Behälter Ratings, die den Mieter bietet mit dem von ihnen gewünschten Informationen.

Connection Manager

Connection Manager ist auf der gesamten Website verwendet werden, wenn wir die Daten über ein XHR Anfrage ziehen müssen. In einigen der obigen Beispiele verwenden wir diese Komponente für die Beantragung Städten und Flughäfen für die Auto-Vervollständigen implementaitons und Ziehen des Rating-Informationen für den Mieter bewertet Dialog.

Eine interessante Art, wie wir nutzen Connection Manager ist mit unserem Verleih-Center-Block, der auf den meisten Seiten sitzt. Um mit Leistung helfen wir tun eine Menge Full-Page-Caching auf viele unserer Content-Seiten. Allerdings wollten wir noch die dynamische Rental Center Block auf diesen Seiten angezeigt werden. Dies hat uns mit einem Problem konnten wir mit Connection Manager zu lösen. Anstatt Pause auf unserer Seite vollständig zwischengespeichert und Cache nur Aspekte der Seite fanden wir es leichter war, nur sind die Rental Center Block über eine einfache asynchrone Anforderung. Wir fanden, dass dies uns, die Leistung aus, die eine vollständig zwischengespeicherte Seite behalten, aber immer noch angezeigt werden dynamische Inhalte in unserem Verleih-Center-Box erlaubt.

Final Thoughts

Insgesamt waren wir äußerst zufrieden mit unserer Wahl zu YUI verwenden. Es bietet uns eine modulare Bibliothek, die gut dokumentiert ist, einfach zu bedienen und zu implementieren.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

In der YUI 3 Gallery: Matt Taylor RaphaelJS Modul

RaphaelJS ist eine leistungsstarke JavaScript-Bibliothek, verwaltet SVG- Zeichnungen und Animationen. Es ermöglicht Ihnen die einfache Erstellung von SVG Leinwände und ziehen Grundformen und Pfade sehr leicht, auch ihre Ausrichtung in Sätze und Anwenden von Transformationen auf einen oder mehrere Vektoren. Sie können Formen zeichnen, Bilder zu manipulieren und animieren alles. RaphaelJS bietet eine schöne API zum Erstellen und Ändern von SVG-Elemente mit Leichtigkeit.

Während die Bibliothek ist beeindruckend, aber ich habe festgestellt, dass ich einige wichtige Funktionen, Elemente der Bibliothek hinzufügen RaphaelJS mit YUI3. Ich habe aus diesen Bemühungen mit dem neuen begann RaphaelJS Gallery Modul .

Lazy Loading RaphaelJS und Plugins

Das erste Merkmal ist die Lazy-Laden nicht nur der RaphaelJS Bibliothek, aber keine RaphaelJS Plugins die Sie benötigen. Die RaphaelJS Galerie-Modul wird nur diese Dateien laden, wenn Sie erklären, werden Sie mit ihnen in einem YUI Sandkasten. Zum Beispiel:

 
 YUI ({Galerie: "Galerie-2010.09.22-20-15 '}). Einsatz (' Galerie-Raphael ', function (y) {
 
	 Y.Raphael (). Verwenden (function (Raphael) {
		
		 / / Verwenden Raphael hier wie würden Sie außerhalb YUI
		 var = Papier Raphael ('myPaper', 500, 500);
 
	 });
 
 });

Wenn Sie RaphaelJS Plugins sind, geben Sie die Pfade in einem Array aus und senden, der als erster Parameter in der Y.Raphael () ()-Funktion verwenden.:

 
 YUI ({Galerie: "Galerie-2010.09.22-20-15 '}). Einsatz (' Galerie-Raphael ', function (y) {
 
	 var MyPlugins = ['plugins / raphael.awesomePlugin.js', 'plugins / raphael.wickedPlugin.js'];
 
	 Y.Raphael (). Verwenden (MyPlugins, Funktion (Raffael) {
 
		 / / Verwenden Raphael hier wie würden Sie außerhalb YUI
		 var = Papier Raphael ('myPaper', 500, 500);
		 / / Das "Papier" werden alle neuen Funktionen hinzugefügt von Plugins jetzt
	 });
 
 });

Die RaphaelJS Bibliothek wird zuerst geladen, dann werden alle angegebenen Plugins geladen werden, bevor Sie Ihre Callback-Funktion, mit der Raphael-Objekt als einzigen Parameter ausgeführt wird.

Kundenspezifische Events

Sobald Sie einen Raum mit der Zeichnung Raffaels Objekt erstellt haben, dann können Sie sofort runter auf die Zeichnung. Wenn Sie Methoden wie nennen rect , circle und path auf der Zeichnung Raum, erhalten Sie wieder Objekte, die SVG-Vektoren. Normalerweise haben Sie Zugang zu den entsprechenden DOM-Elemente durch den node Eigentum. Zum Beispiel:

 
 var = Papier Raphael ('myPaper', 500, 500);
 var Quadrat = paper.rect (0, 0, 100, 100);

Dies erzeugt einen rechteckigen Vektorobjekt an den Koordinaten [0,0] mit einer Breite und Höhe von 100 Pixeln. Sie haben Zugriff auf die zugrunde liegende DOM-Element (das ist ein SVG- rect -Element) in etwa so:

 
 var = rectNode square.node;
 rectNode.onclick = function () {
	 alert ('Herzlichen Glückwunsch, klickten Sie ein Quadrat!');
 };

Wenn Sie ein begeisterter YUI-Nutzer sind, würden Sie vermutlich gerne etwas mehr als dies. Wie wärs mit einem eingebauten Y.Node wie gut? Genau wie die node Eigenschaft bezieht sich auf die HTMLElement hinter dem SVG-Objekt, das $node verweist Eigenschaft auf den Y.Node Wrapper für dieses Element. So kann man Dinge wie diese:

 
 Quadrat. $ node.on ("mouseover", function () {
	 alert ('Herzlichen Glückwunsch, Sie können eine Maus zu bewegen!');
 });

Versuchen wir jetzt etwas komplizierter. Eine Wechselwirkung mit einem Vektor Lage sein sollte, führen andere Vektoren gezeichnet, ihre Stile zu aktualisieren, oder? Wie wäre es schaffen wir einige Bars, die alle ihre Farben abhängig, wo eine die Maus auf einem Kreis auf der Seite befindet sich machen:

 
 var = Papier Raphael ('rcanvas', 600, 800);
 
 . var circ = paper.circle (350, 200, 100) attr ({füllen: 'pink', Hub: 'black'});
 
 / / Schieben ein paar Rechtecke in einem Array
 var i = 0; Rechtecke = [];
 for (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 200, 20) attr ({füllen: 'rot', Hub: 'gelb'}.));
 }
 
 / / Schleife durch die Rechtecke, Zugabe von bestimmten Kreis MouseMove-Handler für jede
 Y.Array.each (Rechtecke, Funktion (rect, index) {
	 var i = index + 1;
	 circ. node.on $ ('MouseMove', function (evt) {
		 / / Die Füllfarbe ist dynamisch, abhängig von der Position dieses Rechtecks
		 / / In der Anordnung als auch die Position der Maus
		 var = lf circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + LF,
			 x = evt.clientX - LF,
			 top = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * + circ.attrs.r oben,
			 y = evt.clientY - oben;
			 rot = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 grün = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 blau = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 rect.attr ('füllen', 'rgb (' + rot + ',' + grün + ',' blau + + ')');
	 });
 });

Dieses Beispiel läuft hier , aber wie man in den Snapshots unten sehen können, ist die Farbe der einzelnen Balken abhängig von der Mausposition über den Kreis sowie in der Größenordnung von der Stange.

Je nachdem, wo Sie den Mauszeiger über dem Kreis befindet sich die Bar Farben individuell verändern.

So können Sie sehen, dass $node eine nützliche Abkürzung ist, aber nichts Spektakuläres. Es wäre wirklich fantastisch , wenn jede SVG-Objekt, das Sie mit RaphaelJS erstellen abfeuern konnte benutzerdefinierte Ereignisse . Das würde erlauben Ihren individuellen Zeichnung Elemente, um benutzerdefinierte Ereignisse ausgelöst werden, und alles andere auf der Seite konnte zuhören und reagieren. Dies kann in vielerlei Hinsicht nützlich. Für den Anfang bietet es reiche Wechselwirkungen zwischen Ihren Zeichnungen. Benutzer-Interaktionen mit einem Vektor kann nun mitteilen, alle anderen Vektoren der Interaktion auf Anfrage. Das heißt, Sie können programmatisch zu feuern Ereignisse aus Ihren Zeichnungen, wenn bestimmte Bedingungen erfüllt sind. Dies hat nicht nur damit Ihre Zeichnungen zu anderen Vektoren mitteilen, aber alles auf der Seite kann mithören

 
 var = Papier Raphael ('rcanvas', 600, 800);
 
 . var circ = paper.circle (350, 200, 100) attr ({füllen: 'pink', Hub: 'black'});
 
 / / Herstellung von Anordnungen von Rechtecken und Kreisen
 var i = 0, Rechtecke = [], Kreise = [];
 for (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 40 * i, 20) attr ({füllen: 'rot', Hub: 'gelb'}.));
	 circles.push (paper.circle (0,0,20) hide ().);
 }
 Y.Array.each (Rechtecke, Funktion (rect, index) {
	 var i = index + 1;
	 circ. node.on $ ('MouseMove', function (evt) {
		 var = lf circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + LF,
			 x = evt.clientX - LF,
			 top = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * + circ.attrs.r oben,
			 y = evt.clientY - oben;
			 NewWidth = (((256 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 rot = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 grün = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 blau = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 / / Diesmal nicht nur das Ändern der Farbe, sondern auch das Rechteck Breite
		 rect.attr ({
			 Breite: NewWidth,
			 füllen: "rgb ('+ rot +', '+ grün +', '+ blau +') '
		 });
		 / / Brand benutzerdefinierte Ereignis zu benachrichtigen, dass dieses Rechteck Breite hat sich verändert
		 rect.fire ('width-geändert', {width: NewWidth, Quelle: rect, um: index});
	 });
	
	 / / Jedes Rechteck bekommt einen Listener, der auf der Breite verändert feuert
	 rect.on ('width-geändert', function (evt) {
		 var = attrs evt.source.attrs;
		 / / Den entsprechenden Kreis und bewegen Sie ihn mit dem rechten Ende des Rechtecks
		 Kreise [evt.order]. attr ({
			 cx: attrs.x + attrs.width,
			 cy: attrs.y,
			 füllen: 'cornflowerblue'
		 .}) Show ();
		
	 });
	
 });

Werfen Sie einen Blick auf dieses Beispiel laufen hier . Sie können auch aus dem Bild unten sehen, die Kreise werden auf den rechten Enden der Rechtecke gezeichnet. Dies wird in Reaktion auf jeden einzelnen Rechtecks ​​benutzerdefinierte Ereignis Brennen durch eine Prozedur, die den Kreis bewegt sich zu einer Position relativ zu den aktuellen Attributen des Rechtecks ​​gefangen auftretenden.

Dies eröffnet einige interessante Möglichkeiten für RaphaelJS innerhalb YUI3. Zum Beispiel, was wäre, wenn wir eine Gruppe von Vektor-Formen mit der Gruppe selbst als die Einheit, die Ereignisse auslöst, um die Außenwelt zu erstellen? Intern könnte jede Vektor-Zeichenprogramm mit seinen Behälter über benutzerdefinierte Ereignisse zu kommunizieren, und der Behälter würden Entscheidungen zu treffen, welche Daten sie für die Außenwelt ausgelöst. Damit eröffnet sich die Idee der voll gekapselten, interaktive SVG-Kontrollen.

Zusammenfassung

Mit dem Aufstieg von HTML5 und seine Satelliten-Technologien, gibt es so viel mehr Möglichkeiten als andere Flash für Rich-Interaktionen. Im Idealfall sollten alle vektorisierten Elemente auf der Seite uneingeschränkt zugänglich sein und standardisiert. Damit eröffnen sich wunderbare Möglichkeiten für uns zu erreichen, Standard-Web-Steuerelemente, ohne auf Flash zu erstellen. SVG ist eine attraktive Option, da jeder Vektor auf der Seite erstellt wird durch einen DOM-Knoten gesichert, dass wir mit YUI wie jede andere DOM-Knoten zu modifizieren. Das ist, was erlaubt die RaphaelJS Gallery Modul , alle SVG-Objekte durch RaphaelJS erstellt vermehren, und das ist ein Schlüssel zu reichen Interaktion mit diesen elments von anderswo auf der Seite.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

clearfix Reloaded + overflow: hidden Demystified

clearfix und overflow : hidden können die beiden beliebtesten Techniken, um Schwimmern ohne strukturelle Auszeichnung verdeutlicht werden.

Dieser kurze Artikel ist über die Verbesserung der ersten Methode und Shedding etwas Licht auf die wahre Bedeutung des zweiten.

clearfix

In allem, was Sie wissen über clearfix falsch ist , erkläre ich die Probleme dieser Methode erstellt wird in allen Browsern und ich schlage vor, um nur clearfix auf Elemente, die nicht neben Schwimmern (zB ein modales Fenster), obwohl als Autoren müssen wir noch mit zusammenbrechenden Gewinnspannen umgehen . Diese Demo-Seite zeigt das Problem.

Margin-Zusammenbruch Verhalten in den ersten beiden Boxen zeigt, dass es die erzeugte (nicht leere) Inhalte, die den unteren Rand in der Kiste (das macht absolut Sinn hält es nach Spec ).

So erstellen die gleiche Box-Layout in allen Browsern haben wir die ursprüngliche Methode durch die Generierung der Inhalte mit Pseudo-Elemente verbessern können :before und :after :

  . Clearfix: vor,
 . Clearfix: after {
   Inhalt:; "."    
   display: block;    
   Höhe: 0;    
   overflow: hidden;	
 }
 . Clearfix: after {clear: both;}
 . Clearfix {zoom: 1;} / * IE <8 * / 

Sie nicht einfach ersetzen Ihre clearfix Regeln mit diesen neue in bestehende Projekte, obwohl, wie Sie bereits gepatchte Fragen im Zusammenhang mit einstürzenden Margen über andere Methoden haben kann.

overflow

In den meisten Diskussionen über die Lichtung schwebt das overflow:hidden Methode kommt, und es wird immer nach unten durch einen "Schuss platzieren Wenn Sie absolut positionierten Elementen innerhalb des div wollen, werden Sie das Abschneiden diese Elemente ". Aber das ist nicht notwendig wahr ist. overflow:hidden wird immer Clip relativ positionierten Elementen, aber es wird nicht immer verbergen absolut positionierten diejenigen. Denn es hängt alles von der Container-Block:

10.1 Definition von "containing block":

4. Wenn für das Element 'position: absolute', der umschließende Block wird von der nächsten Vorfahren mit einer etablierten 'position' der 'absoluten', 'relativ' oder 'fixed', ...

Dies bedeutet, absolut positionierten Elementen wird außerhalb einer Box mit gestylt zeigen overflow:hidden es sei denn, ihre Container-Block ist die Box selbst oder ein Element innerhalb der genannten Schachtel.

Sie können überprüfen, diese Demo-Seite zu sehen, wie die Dinge funktionieren.

Bessere Alternativen

Wenn Sie eine Breite für das Element enthält, schwimmt kann sich bewerben, dann ist die beste Option zu verwenden:

  display: inline-block;
 Breite: <any explizite Wert>; 

Weiterführende Literatur

• Enthalten Floats, unter Beifügung schwimmt mit reinem CSS als clearfix Technik bekannt
• How To Floats ohne strukturelle Markup löschen
• Die neue Methode Clearfix
• 10.1 Definition von "umschließenden Blocks"

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

YUI: Öffnungszeiten Mi 29. September

Die nächste Rate in Höhe von YUI: Öffnen Sie Stunden wird am kommenden Mittwoch, dem 29. sein.

YUI 3 Diagramme werden in der nächsten Version kommen, und eine Vorschau auf einige frühe Arbeiten sind bereits in der Galerie . Tripp Brücken werden auf der Aufruf sein, die Einführung der neuen Struktur und zeigt, wie die Erkenntnisse aus YUI 2 der Charts-Paket der neuen Architektur informiert, und bitten um eine feine Balance zwischen Flexibilität und Einfachheit. Oh, und habe ich erwähnt, kein Flash?

Auch an Deck sein wird Allen Rabinovich geben einen aktuellen Überblick über die erstaunliche Arbeit, die er auf dem Redesign wurde yuilibrary.com tut. Wir reden hier alles, hier: Startseite, Bedienungsanleitungen, Demos, Tutorials, API-Dokumentation. Die Arbeiten. In vielerlei Hinsicht ist es eine ganz neue Geschichte, und eine viel bessere.

Wir werden Online von 10.00 bis 12.00 Uhr PDT. Die Verbindungsdaten sind die gleichen wie immer.

1. Wählen Sie sich in 1-888-371-8922 (Skype funktioniert gut für Nicht-US-Teilnehmer *)
2. Geben Sie den Teilnehmer-Code 47188953 #
3. Join the Screen-Sharing-Sitzung (dies wird Sie auffordern, die Adobe Connect-Plugin zu installieren, wenn dies Ihre erste Mal benutzen)

Und schließlich ist die yuilibrary.com Forum-Thread zu diesem Öffnungszeiten hier . Schauen Sie dort für Notizen, Imbissbuden interessant, und die Aufzeichnung des Gesprächs, nachdem es fertig ist. Oder starten Sie das Gespräch durch die Veröffentlichung von früh Fragen, Anregungen für Themen oder Code, den Sie würde gerne Kritik.

Vergessen Sie nicht, auf die abonnieren YUI Kalender und folgen Sie @ yuilibrary auf Twitter für die neuesten Updates über Öffnungszeiten und andere YUI Interesse.

Wir hoffen, Sie dort zu sehen!

* - Wenn Skype ist keine Option, mailen Sie mir für eine lokale Nummer.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

In the Wild für 24. September 2010

Wie wir bereit für bekommen YUIConf 2010 und vieles mehr in den kommenden Monaten, hier sind einige der anderen Dinge, die wir zur Kenntnis genommen habe in der größeren Welt YUI:

• YUI Theater Tops Nettuts Liste der must-see F2E Podcasts : Andrew Burgess schreibt über YUI Theater : "Es scheint, dass so oft wie ein paar Mal im Monat, Yahoo! bringt Entwickler in auf dem neuesten Stand der Web-Technologie, um ihre Angestellten zu Datum. Zum Nutzen der Rest von uns sind diese Gespräche aufgezeichnet und veröffentlicht. Hier finden Sie namhafte Entwickler wie Douglas Crockford und Nicholas Zakas, und spricht über alles, von Leistung und Zugänglichkeit zu JavaScript und DOM. " #
  
• DigitalInsurance.com (ein @ apipkin Site) von YUI 3 Powered : Prolific Galerie Beitragszahler Anthony Pipkin hat dazu beigetragen, das neue Portal DigitalInsurance.com ., von YUI 3 angetrieben #
  
• Progressive Enhancement mit nichts als JS (@ @ codepo8 auf davglass) : Christian Heilmann schreibt am Ajaxian: "Progressive Enhancement ist nach wie vor eine verwirrende Angelegenheit für eine Menge Leute, die sehr über die Fähigkeiten von JavaScript in modernen Browser-Umgebungen freuen. Er kann fühlen, anachronistisch, um Ihre Lösungen für einen Nicht-JS-Umgebung zu schreiben und dann noch einmal verstärkt in JavaScript. Ich wuchs auf wie das so für mich ist es einfach eine Frage der das Richtige zu tun, sondern mit der heutigen Welt der JavaScript-Bibliotheken und Out-of-the-box-Widgets kann es eine Drag scheinen. Geben Sie Dav Glass des YUI-Team. Er hat Drehen des Konzepts der Progressive Enhancement in seinem Kopf herum und als JS Liebhaber und Backend-Code "Dulder" machte er sich auf dieses Problem ein für alle Mal zu lösen in einer reinen JavaScript-Weg. " Schauen Sie sich den gesamten Artikel für Details . #
  
• Mehr Overlay Plugins für YUI 3 von Oliver Andrich : Von GitHub Seite Olivers: "Overlay Plugins ist eine Sammlung von fünf Plugins, die ich schrieb, um YUI 3 Plugin-Entwicklung im Allgemeinen zu erfahren. Drei von fünf Plugins mehr oder weniger imitieren die Extras Overlay erstellt von Eric Ferraiuolo .... Die fünf Plugins sind:
  • BaseOverlayPlugin
  • ModalOverlay
  • KeepAligned
  • HideOnEscape
  • ConstrainDimensions "
  ( Original-Quelle. ) #
• Reid Burkes YUI Slides für HackU an der Carnegie Mellon : YUI-Ingenieur (und Yeti Autor) Reid Burke aufgepeitscht einige Dias und ein YUI-3-basierte Slideshow Motor für seine jüngste Rede an der Carnegie Mellon. #
  
• Devcurry am Lernen von JS Crockford und andere Gurus auf YUI Theater : Suprotim Agarwal schreibt in devcurry heute Morgen: "In diesem Beitrag werde ich Links von einigen sehr nützlichen JavaScript-Videos und Vorträgen von JavaScript-Gurus geliefert, voll von Informationen zu teilen, Spaß beim Anschauen und ist absolut kostenlos! Obwohl das Internet ist voll von kostenlosen Videos, habe ich nur ein paar von ihnen, das fand ich am nützlichsten ausgewählt. Machen Sie sich bereit, um Notizen zu machen, wie Sie lernen .. Crockfords Video-Vorträge über JavaScript - Douglas Crockford ist eine JavaScript-Architekt und spielt eine wichtige Rolle bei der Entwicklung neuer Features der Sprache. Seine Videos sind ein "must-have" für jeden JavaScript-Entwickler. YUI Theater -.. Ermöglicht den Zugriff auf freie Programmierung Vorträge von Gurus auf JavaScript und Web-Entwicklung "Suprotim fährt fort, einige andere Quellen von Inhalten, einschließlich anderer YUI Theater Titel Liste #
  

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!