2010 »Dezember» Yahoo! User Interface Blog (YUIBlog)

YUI 3.3.0 Preview Release 3

22. Dezember 2010 um 12.26 Uhr von Eric Miraglia | In Entwicklung | 7 Kommentare

Am YUIConf im November veröffentlichten wir eine Vorschau auf YUI 3.3.0, unsere nächste große Version auf dem YUI 3 Entwicklungspfad . Wir sind jetzt bis zu unserem dritten Preview-Version, und wenn Sie einige Zeit in den Winterurlaub zu helfen, haben uns zu treten, die Reifen, die wir lieben für Sie geben, um es ein Spin würde. Sie können die Verwendung YUI 3.3.0pr1 Seed-Datei aus dem EUR um zu beginnen, laden Sie die Verteilung von YUILibrary.com , oder sich über die Verteilung auf 3.3.0pr3 YUIBlog gehostet (Anm.: Leistung ist recht träge auf YUIBlog aufgrund des Fehlens von Combo-Handling, seien Sie versichert, dass Ihre EUR-driven-Implementierungen in der Regel wird schneller sein als die entsprechenden 3.2.0-Nutzung).

Einige der neuen Dinge, die für in dieser Pressemitteilung aussehen:

komplett neue AutoVervollständigen (beta)
komplett neuen Charts (beta) , durch SVG versorgt, Leinwand und VML
all-new DataTable (beta) , die Anfänge einer mehr modulare Upgrade von der beliebten YUI 2-Komponenten-
neue Dial-Steuerung (beta) , ein innovatives auf einem endlichen Bereich Steuer-oder Schieberegler von Yahoo! Designer Jeff Conniff erstellt nehmen
komplett neue Resize Utility (beta) von Eduardo Lundgren von Liferay, Co-Autor mit Nate Cavanaugh des YUI 3-basierte vorausgesetzt AlloyUI Erweiterungen finden Sie in der YUI 3 Gallery . (Sie können Eduardo und Nate in diesem treffen AlloyUI rasante Tour schossen auf YUIConf 2010 .)

Es gibt viel mehr über YUI 3.3.0 lieben, und wir werden gemeinsam weitere Informationen wie die GA Datum nähert. Derzeit suchen wir nach einem Release-Fenster in der zweiten Januar-Woche angestrebt. Wir freuen uns über Ihr Feedback zur Vorschau im YUI-Foren und in den Ticket-Datenbank , wenn Sie Anliegen zu finden, wenn Sie sich Ihre eigene Implementierung zu testen mit dem neuen Release.

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

YUILibrary.com wegen Wartungsarbeiten vorübergehend geschlossen (Stand: zurück bis jetzt)

21. Dezember 2010 um 09.08 Uhr von YUI Team | In Entwicklung | Keine Kommentare

Aktualisieren Sie 2010.12.21 12.32 Uhr: Zurück zum Laufen - lassen Sie uns wissen, wenn Sie irgendwelche Fragen zu sehen.

Wir haben diesen Morgen YUILibrary.com genommen für die Wartung. Wir erwarten, dass diese Arbeit zu 4-6 Stunden dauern. Wir entschuldigen uns für die Unannehmlichkeiten entschuldigen und wir werden versuchen, die Ausfallzeit so kurz wie möglich zu halten.

Wenn Sie dringend Unterstützung in der Zwischenzeit Fragen haben, überlegen Sie fallen durch den Kanal # yui auf Freenode.net, wo man oft finden Dutzende von YUI Community-Mitglieder helfen sich gegenseitig aus.

YUIBlog und @ YUILibrary läuft Aktualisierungen, wenn sich der Standort wieder auf.

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

YUI 2.9.0 Release Update

17. Dezember 2010 um 13.50 Uhr von Jenny Donnelly | In Entwicklung | 9 Kommentare

Nächste Woche wird die YUI-Team wird mit der Planung für die Release 2.9.0 in der zweiten Hälfte des 1. Quartals 2011 ausgeliefert werden. YUI 2.9.0 wird die letzte große Dot-Release des 2.x Codeline sein, und das Team wird aggressiv werden, überprüfen Sie alle offenen Tickets gegen den YUI-2-Projekt und ihre Zuordnung zu entweder ein Teil der 2.9.0 Release sein, Schließung sie als "Repariert NICHT", oder sie auf dem YUI 3-Projekt.

Die Realität der Zeit und Ressourcen zwingt uns dazu, auf die vorrangigen Gegenstände, die etwas zu YUI 2.x Schließung liefern und wird uns erlauben, unsere Anstrengungen auf die Entwicklung verdoppeln 3.x konzentrieren. Hier sind einige der Kriterien, die wir verwenden, um uns bei der Entscheidung, was in Version 2.9.0 enthalten sein leiten:

Probleme, die sich negativ auswirken Kern Anwendungsfälle.
Aufstrebende Fragen im Zusammenhang mit neuen Browser-Versionen auf der A-Klasse-Matrix.
Verbesserungen und neue Features werden für YUI 2 DE-priorisiert werden und berücksichtigt für YUI 3.

Der Übergang des YUI Team aus zwei parallelen Entwicklung von Codezeilen in die sich ausschließlich auf YUI 3 bedeutet nicht das Ende der YUI-2-Projekt. Alle gegenwärtigen und zukünftigen YUI 2 Versionen werden weiterhin auf der Yahoo! EUR gehostet werden, wird die YUI 2 Codebasis weiterhin in GitHub gehostet werden, und wir möchten, Community-basierte Pflege von YUI 2 in die Zukunft zu erforschen.

Da wir unsere Planung fortsetzen, werden wir die Feinabstimmung unserer Liste sein, auf der Suche nach Feedback aus der Community, Kommunikation und Fortschritt Updates während der gesamten Release-Zyklus.

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

Strict-Modus kommt in die Stadt

14. Dezember 2010 um 02.12 Uhr von Douglas Crockford | In Entwicklung | 20 Kommentare

Dies ist die Zeit und Jahreszeit, wenn die Menschen auf der ganzen Welt, ihre Differenzen zu vergessen und kommen zusammen in Frieden und Gemeinschaft, um den ersten Jahrestag des ECMA-Generalversammlung die Zustimmung der ECMAScript-Standard-Programmiersprache, Fifth Edition zu feiern. Das wichtigste Feature in ES5 ist der neue Strict-Modus. Strict-Modus ist ein Opt-in-Modus, dass Reparaturen oder entfernt einige der Sprache der problematischsten Funktionen.

Angeben der Strict-Modus

Es gibt zwei Möglichkeiten, um den strikten Modus zu beantragen. Die erste besteht darin, dieses Pragma einzufügen

  "Use strict";

an der Spitze einer Datei oder Zusammenstellung Einheit. Es muss vor allen anderen Anweisungen erscheinen, aber es kann durch Leerzeichen und Kommentare vorangestellt werden. Es hat die Form eines nutzlosen Zeichenfolgenliteral Aussage, so wird es von ES3-Systemen ignoriert werden. Dies bedeutet, dass es möglich ist ES5/strict schreiben Programme, die auch auf den älteren Browsern ausgeführt werden können. Strict-Code kann auch mit nicht-strengen (oder schlampig) Code zu interagieren, so streng Funktionen können Funktionen aufrufen schlampig, schlampig und Funktionen lassen sich strikte Funktionen aufrufen. Dieses hohe Maß an Kompatibilität macht Verabschiedung der Strict-Modus einfach.

Der gesamte Code in der Datei oder Zusammenstellung Einheit mit dem "use strict"; Präambel wird so streng Code verarbeitet werden. Es gibt ein Problem, though. Performance-Überlegungen derzeit zwingen uns zu viele JavaScript-Dateien zusammenfügen, um kumulative HTTP Verzögerungen zu vermeiden. Wenn eine Datei mit einem "use strict"; Präambel hat schlampigen Code angehängt, wird der Code so streng schlampig verarbeitet werden und wird wahrscheinlich scheitern. Es gibt eine einfache Regel: Verwenden Sie nicht gleichzeitig streng und schlampig in der gleichen Datei, aber wir haben bereits gesehen, einige berühmte Webseiten erhalten diese falsch.

Der zweite Weg ist, legen Sie das Pragma ist als erste Anweisung einer Funktion. Das erklärt, dass die gesamte Funktion wird streng sein, einschließlich aller Funktionen, die in ihr verschachtelt sind. Strenge Hinsicht Funktions-Bereich, so streng Code und schlampigen Code kann in der gleichen Datei gemischt werden. Diese zweite Form arbeitet sehr gut mit dem Modul-Muster und ihre vielen Variationen. Die zweite Form ist bevorzugt, da es die Verkettung Gefahr vermieden wird.

  (Function () {
    "Use strict";
    / / Diese Funktion ist streng ...
 } ());

 (Function () {
    / / Aber diese Funktion ist schlampig ...
 } ());

Umfang

Historisch gesehen hat, wie JavaScript-Funktionen sind scoped verwechselt worden. Manchmal sind sie zu sein scheinen statisch Gültigkeitsbereich, aber einige Eigenschaften machen sie verhalten sich wie sie dynamisch scoped sind. Das ist verwirrend, so dass Programme schwer zu lesen und zu verstehen. Missverständnis führt zu Fehlern. Es ist auch ein Problem für die Leistung. Statische Scoping erlauben würde variable Bindung an zur Kompilierzeit auftreten, aber die Voraussetzung für die dynamische Reichweite bedeutet die Bindung an Laufzeit, die mit einer erheblichen Performance-Einbußen kommt, muss aufgeschoben werden.

Strict-Modus erfordert, dass alle Variablenbindung statisch erfolgen. Das bedeutet, dass die Funktionen, die bisher nur dynamische Bindung beseitigt werden müssen oder verändert werden. Insbesondere die Aussage mit eliminiert wird, und der eval -Funktion die Fähigkeit, mit der Umgebung seiner Anrufer manipulieren ist stark eingeschränkt.

Einer der Vorteile der strikten Code ist, dass Tools wie YUI Compressor können einen besseren Job machen es bei der Verarbeitung.

Implizite Globale Variablen

Javascript globale Variablen impliziert. Wenn Sie nicht explizit eine Variable deklarieren, wird eine globale Variable implizit für Sie erklärt. Dies erleichtert das Programmieren für Anfänger, weil sie einige ihrer grundlegenden Aufräumarbeiten können vernachlässigen. Aber es macht die Verwaltung von größeren Programmen sehr viel schwieriger und es deutlich verschlechtert Zuverlässigkeit. Also im Strict-Modus, sind implizite globale Variablen nicht mehr erstellt. Sie sollten erklären ausdrücklich, alle Ihre Variablen.

Globale Leakage

Es gibt eine Reihe von Situationen, die dazu führen könnte this auf die globale Objekt gebunden werden. Zum Beispiel, wenn Sie das vergessen, bieten new Präfix beim Aufruf einer Konstruktor-Funktion, der Konstruktor ist this unerwartet wird auf das globale Objekt gebunden werden, so dass statt der Initialisierung eines neuen Objekts, wird es still sein, anstatt Manipulationen globalen Variablen. In diesen Situationen wird der Strict-Modus statt binden this zu undefined , was dazu führt das der Konstruktor eine Ausnahme werfen, statt, so dass der Fehler viel früher erkannt werden.

Lautes Failure

JavaScript war schon immer Nur-Lese-Eigenschaften, aber man konnte nicht sie selbst erstellen, bis die ES5 Object.createProperty Funktion, die Fähigkeit ausgesetzt. Wenn Sie einen Wert in eine Nur-Lese-Eigenschaft zuweisen versucht, würde es ohne Fehlermeldung fehl. Die Zuordnung nicht ändern würde, den Wert der Eigenschaft, aber Ihr Programm würde fortfahren, als ob es hatte. Dies ist eine Gefahr Integrität, die dazu führen Programme in einem inkonsistenten Zustand gehen kann. Im strikten Modus wird versucht, einen Nur-Lese-Eigenschaft zu ändern, eine Ausnahme auslösen.

Octal

Die Oktal (oder Basis 8) Darstellung von Zahlen war extrem nützlich, wenn man Maschinen-Level-Programmierung auf Maschinen, deren Wort Größen waren ein Vielfaches von 3. Sie benötigt oktal beim Arbeiten mit dem CDC 6600 Mainframe, die ein Wort Größe von 60 Bits hatte. Wenn Sie oktal lesen konnte, könnte man bei einem Wort als 20 Stellen zu suchen. Zwei Ziffern dargestellt wird der OP-Code und eine Ziffer identifiziert eine von 8 Registern. Während des langsamen Übergang von der Maschine Codes zu Hochsprachen, dachte man, nützlich zu sein, oktal Formen in Programmiersprachen bieten.

In C wurde eine äußerst unglückliche Darstellung octalness ausgewählt: Führende Null. Also C, wobei 0100 64, noch nicht zu 100, und 08 ist ein Fehler, nicht 8. Noch Leider wurde dieser Anachronismus in fast allen modernen Sprachen, darunter JavaScript, wo es nur verwendet wird, um Fehler zu erstellen kopiert worden. Sie hat keinen anderen Zweck. Also im Strict-Modus, sind oktal Formen nicht mehr erlaubt.

Usw.

Die arguments Pseudo-Array wird ein bisschen mehr arrayähnliche in ES5. Im strikten Modus, verliert es seine callee und caller Eigenschaften. Dies macht es möglich, Ihre passieren arguments zu nicht vertrauenswürdigen Code, ohne auf eine Menge von vertraulichen Rahmen. Auch die arguments sind Eigentum von Funktionen eliminiert.

Im strikten Modus Nachschlüssel in einer Funktion wörtliche einen Syntaxfehler erzeugen. Eine Funktion kann nicht über zwei Parameter mit dem gleichen Namen. Eine Funktion kann nicht über eine Variable mit dem gleichen Namen wie einer ihrer Parameter. Eine Funktion kann nicht delete seine eigenen Variablen. Ein Versuch, delete eine nicht konfigurierbare Eigenschaft jetzt eine Ausnahme auslöst. Primitive Werte werden nicht implizit gewickelt.

Wenn Ihr Programm geht JSLint , wird es wahrscheinlich im strikten Modus zu arbeiten.

Es ist immer noch einer unvollkommenen Welt

Es gibt immer noch Probleme in JavaScript, die Strict-Modus geht nicht auf. Zum Beispiel ist Semikolon Insertion noch eine Gefahr, und 0,1 + 0,2 immer noch nicht gleich 0,3 ist. Die Korrektur dieser Probleme müssen für künftige Ausgaben zu warten.

Warum Strict-Modus-Matters

Neben den offensichtlichen Vorteilen für Programm Zuverlässigkeit und Lesbarkeit, wird der Strict-Modus hilft, die Mashup-Problem zu lösen. Wir wollen in der Lage, Code von Drittanbietern auf unseren Seiten einladen, nützliche Dinge für uns und unsere Benutzer tun, ohne dass Code die Lizenz zu übernehmen, den Browser oder sich an den Benutzer oder unsere Server zu entstellen. Wir müssen die Dritte Code einzuschränken. Systeme wie Googles Caja dies tun, aber mit erheblichen Kosten und Unannehmlichkeiten in der Leistung. Meine eigene AdSafe System tut dies auch, aber auf Kosten der Beseitigung this und [] Indizierung von der Sprache, die Annahme machen, schwierig sein kann. Strict-Modus ermöglicht es uns, Dritte-Code mit dem Komfort und Leistung von AdSafe und die Aussagekraft der Caja machen. Dies ist von entscheidender Bedeutung, wie unsere Seiten immer komplexer werden und mehr verbunden.

Strict-Modus löst nicht das Problem XSS. Die Lösung dieses Problems hängt davon ab, W3C wobei eine gewisse positive Wirkung .

ES5/strict ist nun in der Vorschau, und wird bald serienmäßig in allen standardkonformen Browsern überall.

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

Die CSS-Position-Eigenschaft

14. Dezember 2010 um 07.35 Uhr von Thierry Koblentz | In CSS 101 , Entwurf , Entwicklung | 6 Kommentare

Über den Autor: Thierry Koblentz ist ein Front-End-Engineer bei Yahoo!
Er besitzt TJK Gestaltung , ez-css.org und css-101.org . Sie können Thierry auf Twitter unter @ thierrykoblentz .

Diese Eigenschaft gilt für alle Elemente. Es hat fünf mögliche Werte:

static
relative
absolute
fixed
inherit

Position: statisch

Aus § 9 Visuelle Aufbereitung Modell :

Die Box ist ein normales Feld, entsprechend der festgelegten normalen Fluss . Die top , right , bottom und left Eigenschaften nicht zutreffen.

Freizeitangebote in bemerken diese Demo

Die zweite Box zeigt genau, wo es ohne die Position Erklärung abgegeben haben.
Der Wert, der top nicht, weil in einem "statischen" Kontext, der berechnete Wert von Feld-Offsets ist immer auto .

Was zu beachten ist

Wenn die position Eigenschaft eines Elements den Wert der static , wird dieses Element nicht gesagt zu positionieren.
Da static ist der Ausgangswert (der Standardwert), gibt es keine Notwendigkeit, ein solches Styling in einer Erklärung Block gehören, wenn es um einen anderen Wert überschrieben ist.

position: relative

Aus § 9 Visuelle Aufbereitung Modell :

Die Box wird die Position entsprechend der normalen (dies wird als die Position in berechneten normalen ). Dann wird der Kasten relativ zu seiner normalen Position. Wenn ein Feld B relativ positioniert ist, wird die Position der folgenden Box berechnet, als ob B nicht ausgeglichen wurden.

Freizeitangebote in bemerken diese Demo

Box 'zwei' einen Rückgang um 300 Pixel verschoben, aber box 'drei' sowie die folgenden Absätze blieben an Ort und Stelle. Es scheint, wie wenn die Box von der Seite aufgehoben wurde, verlässt seinen Fußabdruck hinterlassen. Dies liegt daran, Aufrechnung eine relativ positionierte Box nicht stört den Fluss.
Die relativ positionierte Box überlappt die folgenden Elemente. Es zeigt vor anderen Boxen.

Was zu beachten ist

Berechnete Werte sind immer links = rechts und von oben =-bottom. Wenn die direction des umschließenden Blocks ist ltr , der Wert von "links" Siege und "rechts" wird - "links". Wenn direction des umschließenden Blocks ist rtl , 'right' Siege und 'links' wird ignoriert. Autoren könnten Vorteil wie die Dinge funktionieren zu nehmen, indem sie als gleichwertig anerkannt zu entgegengesetzten Eigenschaften.
Anders als bei der "absoluten"-Modell, top , right , bottom und left können Eigenschaften nicht dehnen noch schrumpfen die Box (sie können nicht ihre Größe zu ändern).

position: absolute

Aus § 9 Visuelle Aufbereitung Modell :

Die Box die Position (und möglicherweise auch Größe) wird mit dem angegebenen top , right , bottom und left Eigenschaften. Diese Eigenschaften geben Offsets bezüglich der Box umschließenden Blocks . Eine absolut positionierte Box wird aus dem normalen Fluss vollständig (es hat keine Auswirkungen auf spätere Geschwister) entfernt und eine zugewiesene Position in Bezug auf einen Container-Block. Auch wenn absolut positionierte Boxen haben Margen, sie nicht zusammenbrechen mit anderen Margen.

Freizeitangebote in bemerken diese Demo

Da kein Feld-Offset angegeben wird, habe box 'zwei' nicht von ihrer ursprünglichen Position zu bewegen, aber wenn wir benutzt hatten top:0;left:0; zum Beispiel, dass an der Box wäre sein oberen linken Ecke des Viewports .
Layout-weise, es ist wie eine Schachtel 'zwei' hatte mit gestylt display:none . Die Schachtel aus dem Strom entfernt.
Mit Box 'zwei' aus dem Fluss, hat Box "drei" gegen Box 'eins' (die Ziffern gefolgt) bewegt.
Wie alle Elemente aus dem Fluss entfernt, hat Box 'zwei' horizontal eingeschweißt.

Was zu beachten ist

Für alle "absoluten" oder "festen" positionierte Element der berechnete Wert für display ist block .
Für alle "absoluten" oder "festen" positionierte Element der berechnete Wert für float ist none .
A 'mit Block' ist eine Box, die eine Positionierung Kontext stellt. Es wird von den nächsten Vorfahren mit einer etablierten 'position' der 'absoluten', 'relativ' oder 'fixed'. Das bedeutet, der übergeordneten Box darf nicht der umschließende Block sein .
Die Standard-Position eines absolut positionierten Box ist nicht immer das gleiche, als ob es mit Top gestylt wurde: 0; left: 0; (in einem Kontext LTR). Und das ist aus zwei Gründen:
1. Der umschließende Block für eine positionierte Box wird durch den nächsten positionierten Vorfahren gegründet, wenn es keinen gibt, ist die Referenz-Container das Root-Element. Der Block enthält, in denen die Root-Element Leben ist ein Rechteck namens des ursprünglichen umgebenden Blocks. Für die kontinuierliche Medien, hat es die Dimensionen des Viewports (ein Fenster oder andere Bildfläche auf dem Bildschirm) und ist an der Leinwand Herkunft verankert. Dieses Beispiel zeigt das Feld in Bezug auf den Viewport positioniert (der Standard umschließenden Blocks).
2. Das Element wird in Bezug auf die Polsterung, nicht im Content-Box noch der Grenze Feld des umschließenden Blocks positioniert. Dieses neue Beispiel zeigt, wo Feld 'zwei' sein würde, wenn die Kanten des padding-Box nicht berühren wollte die Ränder der Content-Box (die mit Block, der body ).
Die Größe der Box kann das Ergebnis der sein top , right , bottom und left Eigenschaftswerte. Für Beispiele wird eliminierte alle Eigenschaften machen den Kasten strecken, um die Abmessungen der Box padding des umschließenden Blocks entsprechen. Siehe eliminierte alle Box-Offsets (Anmerkung: IE6 nicht strecken Sie das Kästchen).
Um eine Maske Overlay, das nicht mit dem Scroll-Dokument (wie in der erstellen vorherigen Beispiel ), verwenden Sie entweder fixed anstelle von absolute oder Stil body mit position:relative als die anfängliche Positionierung Block ist der Viewport (Styling html würde nicht im IE) . Da diese Overlay-Demo zeigt.
position:absolute Trigger hasLayout .

Wichtigste Sache zu erinnern,

Weil diese Positionierung Schema entfernt Boxen aus dem Fluss, ist es schlecht pratice als es für das Layout verwenden.

position: fixed

Aus § 9 Visuelle Aufbereitung Modell :

Die feste Positionierung ist eine Unterkategorie der absoluten Positionierung. Der einzige Unterschied ist, dass für eine feste Position ein, der umschließende Block durch den festgestellt wird Ansichtsfenster . Für kontinuierliche Medien , keine festen Kartons nicht bewegen, wenn das Dokument gescrollt. In dieser Hinsicht ähneln sie fest Hintergrundbildern . Für ausgelagerten Medien (wo der Inhalt des Dokuments wird in einen oder mehrere einzelne Seiten verteilt), sind Boxen mit festen Positionen auf jeder Seite wiederholt. Dies ist für die Platzierung, zum Beispiel eine Signatur am Ende jeder Seite nützlich. Boxen mit festen Position, die größer als die Seite Bereich sind, werden abgeschnitten. Teile der festen Position Box, die nicht in der ersten Container-Blocks sichtbar wird nicht gedruckt.

Freizeitangebote in bemerken dieser Demo :

Da feste Positionierung ist eine Unterkategorie der absoluten Positionierung, alles, was wahr war für "absolut" ist auch für 'fixed' (das Element Shrink-Wraps, es wird aus dem Strom, etc. entfernt) wahr.
Die Box in Bezug auf den Viewport positioniert ist, ist es nicht mit der Seite zu blättern.
In IE 6, erscheint das Feld als statisches Feld , aber es gibt eine "komische" Workaround dafür.
Beim Drucken des Dokuments, Kasten 'zwei' erscheint auf jeder einzelnen Seite.

Was zu beachten ist:

Die Box wird die Position nach dem "absoluten"-Modell berechnet, sondern darüber hinaus, wird der Kasten fixiert bezüglich einer Referenz. Im Falle von Handheld-, Projektions-, Sieb-, TTY, und TV-Medien-Typen wird die Box mit Bezug auf die feste Ansichtsfenster und bewegt sich nicht, wenn gescrollt wird.
Der Inhalt kann inaccessile zu sehende Benutzer, wenn ein Teil der Box befindet sich außerhalb des Viewports Bereich.
Im Falle der Printmedien-Typ, können Autoren will man ein Element aus, die auf jeder gedruckten Seite zu verhindern. Vielleicht mit einem @ media-Regel, wie in:
```
  @ Media print { 
   # Logo {position: static;}
 } 
```
Wie position:absolute , position:fixed löst hasLayout im Internet Explorer.

Position: erben

Wenn position:inherit für ein bestimmtes Feld angegeben ist, wird es dauern wird, die gleiche berechnete Wert als Eigentum für die Box der Muttergesellschaft.

Beachten Sie, dass IE 6 und 7 sind nicht für dieses Keyword verwendet, außer in Verbindung mit direction und visibility (siehe die CSS-Eigenschaft Wert erben ).

Dinge zu beachten,

Box-Offsets

Beachten Sie, dass für absolut positioniert und fixiert Boxen, Werte in Prozent für Set top , right , bottom und left werden nach den Abmessungen des umschließenden Blocks (die nicht die übergeordneten Box sein) berechnet.

'Position' und 'Überlauf'

Eine Box mit gestylt overflow:hidden wird Clip relativ positionierten Elementen (verschachtelte Boxen), aber es wird nicht immer verbergen absolut positionierten diejenigen. Dies ist, da das übergeordnete Feld ist nicht immer der umschließende Block (die nächsten Vorfahren mit einer 'position' der 'absoluten', 'relativ' oder 'fixed').

Kurz gesagt, bedeutet dies absolut positionierten Elementen wird außerhalb einer Box mit Überlauf gestylt zeigen: versteckt sei denn, ihre Container-Block ist die Box selbst oder ein Element innerhalb der genannten Schachtel. Diese Demo-Seite zeigt, wie die Dinge funktionieren.

Die Margen

Autoren können die Margen auf Elemente unabhängig von ihrer Positionierung in Anspruch zu nehmen.

Der Fall des IE

Im IE 'Positionierung' eine Box kann ein Segen oder ein Fluch sein:

In IE6, position:relative (with haslayout) kann verwendet werden, um ein Feld mit negativen Margen aus gestylt verhindern nicht abgeschnitten von einem übergeordneten Container (sehen, wie die Box Positionierung dieses Problem behebt).
Positionieren eines Elements können "stören" den Weg Boxen-Stapel im IE 6 und 7, da dies eine neue Stapel-Kontext (siehe etablieren kann ein Testfall ).

Stapelreihenfolge und Stapeln Niveau

Nach der Abfolge im Quellcode, kommen positioniert Kisten vor die Schwimmer und Boxen im normalen Fluss.
Autoren können Stack-Ebenen über die 'z-index' Eigenschaft nur auf positionierte Boxen angeben.
Im IE6 und 7, kann die einfache Tatsache, die Positionierung eines Box Schaffung eines Stapeln Kontext (siehe oben, " der Fall der IE ").

Mobile Geräte

Lesen Sie den Artikel von PPK, der [Sechsten] Positionswert , um herauszufinden, warum mobilen Browser-Hersteller kann nicht wirklich unterstützt position:fixed .

Weitere Lesungen

Ein "Geist" Analogie von DrLangbhani:

Ein Element mit relativ immer relativ zu seinen normalen Position in der Strömung. Mit anderen Worten, sie ist relativ an denen es unter normalen Umständen, verschoben und lenkt sie zu nicht auf das Layout der Elemente um ihn herum. Es ist wie ein Gespenst, das seinen Körper hinter sich gelassen hat. Ein Körper, der Breite und Höhe hat und wirkt sich auf seine Umgebung, sondern ist unsichtbar. Die geisterhaften Box ist in der Lage sich zu bewegen, aber noch mit dem alten Körper verbunden, dass seine Position noch von ihm gemessen. Jetzt ein Element mit absoluten Position ist noch einfacher. Es wirkt sich nicht mehr seine Umgebung überhaupt (es ist aus dem Fluss gezogen Layout). Es ist jetzt ein echter Geist ohne Körper hinter sich gelassen. Soweit seiner nebengeordneten Elemente betroffen sind, es ist als ob er nicht mehr existiert. Um seine Position zu bekommen, durch jede seiner übergeordneten Elementen suchen, bis Sie eine Position zu finden entweder mit: relative, [position: fixed,] oder position: absolute. Das Element wird als Bezugspunkt dienen. Nur wenn Sie nicht finden, eine "positioniert"-Element wird aus dem Dokument ausgeglichen werden.

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

In der YUI 3 Gallery: The Carousel Modul

13. Dezember 2010 um 11:53 Uhr von Gopal Venkatesan und Fabian Frank | In Entwicklung , YUI 3 Gallery | 16 Kommentare

Über die Autoren: Gopal Venkatesan ( @ g13n ) arbeitet für Yahoo! in Bangalore, wo er einer der Dekane der Frontend-Engineering Community ist; Gopal hat der leitende Ingenieur auf dem YUI Carousel 2 -Projekt seit der Version 2.6.0. Er ist auch der Autor des neuen YUI 3 Galerie Carousel Modul. Fabian Frank stammt aus Deutschland und arbeitet für Yahoo! in Peking; Fabian hat mit Yahoo, seit er seinen Master-Abschluss für Forschung an der University of Glasgow.

Was ist ein Karussell?

Ein Karussell-Steuerung bietet ein Widget für das Surfen innerhalb einer Menge von Objekten wie vertikal oder horizontal in einer überladenen Seite Region angeordnet. Das "Karussell" Metapher leitet sich aus einer Analogie zu Karussells in den Tagen der Film-Fotografie zu gleiten; die Karussell-Steuerung kann der Treue zu dieser Metapher zu halten, indem sie eine durchgehende, runde Navigation durch alle Inhalte blockiert.

Das Karussell ist Teil einer Familie von Widgets, die Sie zu "überladen" einen Platz auf der Seite und bietet mehr Inhalte für diesen Raum ein als in seinen Dimensionen passt und gleichzeitig einen einfachen, intuitiven Mechanismus für den Anwender zu entdecken und zu navigieren, die zusätzlichen Inhalte ermöglichen . Akkordeons, Tabs, Bäume und ScrollViews sind weitere Beispiele dieses Genres.

Warum noch ein weiteres Karussell-Kontrolle?

YUI 3 braucht einen robusten, funktionsreichen Carousel (wie wir in haben YUI 2 ). Das Design Ziel für dieses Karussell war, um es zu lehnen und zu reinigen, und fügen Sie zusätzliche Konfigurationen durch Plugins, unter Ausnutzung der YUI 3 ' s intrinsische Unterstützung für Modularität, um Leichtigkeit und Schnelligkeit zu erhalten.

YUI 3 Framework-Widget

Einer der größten Vorteile des Schreibens eigene Widgets mit YUI 3 ist die Widget-Framework (mehr auf den Widget-Framework: Benutzerhandbuch , in ausführlichen Video-Einführung ). Vergleicht man das Karussell in YUI 2.8.2 auf meinem YUI 3 Galerie Carousel , ist das YUI 3-Version schlank und elegant. Dies liegt daran, die meisten der schweres Heben in Bezug auf die Bereitstellung der Grundstein zur Schaffung einheitlicher Satz von Attributen Widget, eine disziplinierte Lebenszyklus, Progressive Enhancement Unterstützung, etc. mit der Widget-Klasse kommen.

Die YUI 3 Widget-Framework bietet außerdem eine konsistente MVC-Muster, die jedes Widget fördert, um Trennung von Staat Methoden gegen UI-Update-Methoden zu verabschieden. Das macht den Code sehr sauber und wartbar. In der Tat ist dies einer der wichtigsten Faktoren, warum das YUI Carousel 3 ist besser als seine früheren YUI 2-basierten Vetter.

Die YUI 3 Plugin -Modell ermöglicht es Entwicklern, neue Funktionen hinzuzufügen oder bestehende zu verändern Verhalten von Objekten. Dies ermöglicht das Hinzufügen zusätzlicher Funktionalität auf der Oberseite Carousel dynamisch zu ziehen Elemente durch Ajax, etc. Also, das YUI 3 Karussell nicht über Animation Code in das gebacken, sondern ich habe ein Plugin, welches Animation Unterstützung für Fälle, wo es gebraucht wird ergänzt erstellt . Dies hilft, um die Komponente sehr leicht.

Eine Galerie Karussell für Ihre eigene Website

Nach der Lektüre über das, was ein Karussell ist und wie sie können Ihnen helfen, Ihre Website zu verbessern, Sie hoffentlich fühlen begierig, sich die Hände schmutzig. Keine Sorge, mit unseren YUI 3 Galerie Carousel Erweiterung, Implementierung eines Karussells auf Ihrer Website ist so einfach wie die Bereitstellung einer Liste mit Aufzählungszeichen in HTML. Das ist nicht nur ein Verkaufsargument - das ist, wie wir vor kurzem eine Galerie Carousel in das Yahoo! Sports Suchergebnisseite integriert.

Ein einfaches Beispiel

Lassen Sie uns mit einem einfachen Beispiel, das fast alles, was Sie wissen müssen, decken wird gestartet. Der einfachste Weg für Sie, um die neue Galerie Carousel benutzen zu lassen, ist YUI 3 automagisch laden Sie es von Yahoos Content Delivery Network. Unter Hinweis auf was für ein Karussell ist, eine navigierbare Liste der Elemente, erstellen wir eine Liste im HTML-Format. Wir sind die Liste in einem div, die unsere JavaScript, leicht zu finden und mit ihr arbeiten können. Wenn Sie bereits über einige Daten, die in einer Liste-Art und Weise wie in Ihrem Markup vertreten ist, können Sie auch einfach den Karussell div um ihn herum und testen Sie Ihr Glück! Es ist sehr wichtig zu sagen, dass, obwohl wir mit einem Bild beispielsweise werden hier aus können Sie Galerie Carousel für alles, was Sie wollen verwenden!

  <div class="carousel" id="container">
   <ol>
     <li> <img src="img/c1.jpg"> </ li>
     <li> <img src="img/c2.jpg"> </ li>
     <li> <img src="img/c3.jpg"> </ li>
     <li> <img src="img/c4.jpg"> </ li>
     <li> <img src="img/c5.jpg"> </ li>
     </ Ol>
 </ Div>

Jetzt, wo wir unsere Daten zu verarbeiten haben, wollen wir das Aussehen, indem alle fünf Elemente mit dem Karussell Widget zu verbessern. Vorausgesetzt, dass Sie bereits mit YUI 3 ist dies eine einfache Aufgabe. Die einzige Sache, die Sie vielleicht noch nie gesehen haben, je nachdem, wie tief Sie in YUI 3 und der Galerie in der Vergangenheit zu graben, ist, dass wir die Angabe eines Gallery-Version explizit. Dies ist notwendig, weil wir mit einem brandneuen Widget, die nicht darunter befindet sich in der Galerie zu bauen, dass YUI Loader die von der Standardeinstellung versucht zu laden sind. Doch wie YUI und YUI Galerie reifen, wird dies nicht mehr notwendig sein in Zukunft, wenn die Standard-Build-Nummer wird erhöht.

  YUI ({Galerie: "Galerie-2010.10.20-19-33 '})
  . Nutzung ("Galerie-Karussell", "Galerie-Karussell-anim", "Ersatz", function (y) {
   var = new Karussell Y.Carousel ({boundingBox: "# container",
    Contentbox: "# container> ol"});
   carousel.plug (Y.CarouselAnimPlugin, {Animation: {Geschwindigkeit: 0.7}});
   carousel.render ();
 });

(By the way, wenn Sie daran brandneuen Zeug interessiert sind, können Sie den Besuch YUI 3 Galerie Repository auf GitHub oder Gopals Gabel , wo er entwickelt Karussell. Wenn Sie einen Fehler finden, sind wir immer gerne davon hören.)

Zurück zu unserem Beispiel ... YUI wird es von hier zu nehmen. Der Lader zieht automatisch Galerie Carousel und ihre Abhängigkeiten von Yahoos Content Delivery Network. Danach wird das Karussell initialisiert und angezeigt. Der Benutzer kann dann auf die linke oder rechte Pfeiltaste um zu scrollen. Bitte vergib mir für die Erhebung in eine Zeile unnötige Komplexität, aber ich konnte nicht widerstehen. Früher habe ich Y.CarouselAnimPlugin zu unserem Karussell reibungslos gleiten lassen von einer Seite zur anderen statt nur die Anzeige der nächsten Seite sofort. Fühlen Sie sich frei, um mit den Speed-Parameter spielen, wenn Sie es wünschen.

Wie Sie aus dem obigen Screenshot sehen kann, ist das Karussell in Betrieb. However, the CSS might not fit very well into the rest of your page. This leads us to our next section, where we'll discuss how to customize Gallery Carousel.

Customizing Gallery Carousel

Now that you have your Carousel up and running and identified a use case for your website, you hopefully want to integrate it seamlessly. As mentioned previously, we did so for our Sports Search Results Page. If you want to increase the number of visible items, for example from three to four, you can do so by modifying the line which instantiates Carousel.

 var carousel = new Y.Carousel({ boundingBox: "#container",
 contentBox: "#container > ol", numVisible: 4 });

Still not good enough? Yeah, right. Luckily CSS allows us to add our own style definitions and even overwrite the initial ones without touching any existing CSS. So your first step will probably be to remove the borders, because they are quite obtrusive. Just add the following CSS to your page header.

 .YUI 3-carousel {
  border: none !important;
 }
.YUI 3-carousel-nav {
  background: none !important;
 }
.carousel ol li {
  border: none !important;
 }

Now, that looks better. I've also used a negative margin to reduce the gap between my Carousel and the heading. However, we are still not completely there. I assume that you also want to use your own custom buttons, which integrate nicely into your page layout. For this example we will use the same buttons that are also used on Yahoo's search result pages. This requires a bit more, but still simple, CSS.

 .YUI 3-carousel-button {
  background: url("sprite_button.png") no-repeat scroll 0 0 transparent !important;
  height: 20px !important; width: 28px !important;
 }
.YUI 3-carousel-nav-item {
  background: url("sprite_button.png") no-repeat scroll 0 0 transparent !important;
  background-position: -133px 0 !important;
 }
.YUI 3-carousel-first-button {
  background-position: -90px 0 !important;
  margin-right: 35px !important;
 }
.YUI 3-carousel-first-button-disabled {
  background-position: -60px 0 !important;
  margin-right: 35px !important;
 }
.YUI 3-carousel-next-button {
  background-position: -30px 0 !important;
 }
.YUI 3-carousel-button-disabled {
  background-position: 0 0 !important;
 }
.YUI 3-carousel-nav-item-selected {
  background-position: -121px 0 !important;
 }

We will leave it to that for today and hope you feel ready to get started. At least that was all that we needed. However, depending on how big your site is and how interested you are in its performance, there are general thoughts about loading something from a third party content delivery network that also apply here. For example, Sidnei da Silva laid out some interesting thoughts in a blog post earlier this month. We would be happy to provide a How To that explains how a YUI widget and its dependencies can be moved to your own website, or even content delivery network, so you are able to keep the number of HTTP requests as low as possible. Let us know if you are interested, we are looking forward to your feedback!

More to Explore in the Gallery

The excellent team of Eduardo Lundgren and Nate Cavanaugh of Liferay have a Carousel component in the Gallery as well — certainly worth checking out if you're in the market for this kind of control.

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

YUI Theater — Ryan Grove: “Introducing YUI 3 AutoComplete” (42 min.)

December 10, 2010 at 5:55 am by Eric Miraglia | In YUI Theater | Comments Off

In this talk from YUIConf 2010 , YUI 3 AutoComplete author Ryan Grove ( @yaypie ) takes you on a whirlwind tour of some of the many autocomplete patterns made possible by this component (which is coming in the soon-to-be-released YUI 3.3.0) and provides a deep dive into its powerful new YQL integration, filtering, and highlighting capabilities. ( Note : If you enjoy this talk, you might want to check out Ryan's other excellent talk from this year, “ Achieving Performance Zen with YUI 3 .”)

If the video embed below doesn't show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater .

CC Content/Used by Kind Permission:

Subscribing to YUI Theater:

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

Nächste Seite »

Präsentiert von WordPress auf Yahoo! Web Hosting .

Angeben der Strict-Modus

Umfang

Implizite Globale Variablen

Globale Leakage

Lautes Failure

Octal

Usw.

Es ist immer noch einer unvollkommenen Welt

Warum Strict-Modus-Matters

Position: statisch

Freizeitangebote in bemerken diese Demo

Was zu beachten ist

position: relative

Freizeitangebote in bemerken diese Demo

Was zu beachten ist

position: absolute

Freizeitangebote in bemerken diese Demo

Was zu beachten ist

Wichtigste Sache zu erinnern,

position: fixed

Position: erben

Dinge zu beachten,

Box-Offsets

'Position' und 'Überlauf'

Die Margen

Der Fall des IE

Stapelreihenfolge und Stapeln Niveau

Mobile Geräte

Weitere Lesungen

Was ist ein Karussell?

Warum noch ein weiteres Karussell-Kontrolle?

YUI 3 Framework-Widget

Eine Galerie Karussell für Ihre eigene Website

Ein einfaches Beispiel

Customizing Gallery Carousel

More to Explore in the Gallery

Other Recent YUI Theater Videos:

CC Content/Used by Kind Permission:

Subscribing to YUI Theater:

YUI Library on Twitter

Übersetzen

Syndikat

Aktuelle Beiträge

YUI Library

Archives:

Blogroll

Richtlinien für Kommentare

Werden Sie Yahoo!

Meta: