Was in jQuery UI 1.8 geändert wurde - Plus kostenlose Bücher!

jQuery UI 1.8 befindet sich derzeit in der Phase des Veröffentlichungskandidaten und wird in Kürze zur aktuellen stabilen Version der offiziellen UQuery-Bibliothek von jQuery werden, sofern keine großen Fehler oder Schwachstellen entdeckt werden. Was hat sich also seit der letzten stabilen Version von 1.7.2 geändert? Einer der Hauptunterschiede ist natürlich, dass die Bibliothek jetzt mit der neuesten Version von jQuery - Version 1.4.1 - ausgeführt wird. Es wurden jedoch viele weitere Änderungen vorgenommen, darunter einige neue, großartige Komponenten, die wir im Folgenden betrachten werden Verlauf dieses Artikels.

Kostenlose Kopien von jQuery UI 1.7

Der Autor dieses Artikels, Dan Wellman, hat kürzlich jQuery UI 1.7 von Packt Publishing veröffentlicht. Es ist eine fantastische Lektüre, und ich freue mich, Ihnen mitteilen zu können, dass wir eine Handvoll Exemplare nach dem Zufallsprinzip zur Verfügung haben. Hinterlassen Sie einfach einen Kommentar zum Artikel und Sie werden automatisch in die Zeichnung eingefügt. Schauen Sie am Montag nach, um herauszufinden, ob Sie ein Gewinner sind!

1. Fehler beim Zappen

Diese Version der Bibliothek enthält einige Fehlerkorrekturen für einige wichtige Komponenten, einschließlich der Widgets "Datepicker" und "Dialog" sowie der Hilfehilfen "Droppable", "Resizable" und "Selectable". Keiner der Fehler war Show-Stopper, aber das Beseitigen der Fehler ist jedoch ein kritischer Teil des fortschreitenden Fortschritts der Bibliothek. Ein wichtiger Punkt ist, dass das vor dem Schließen Das Ereignis des Dialog-Widgets wurde verworfen und durch ersetzt vorSchließen Damit folgt es der gleichen Namenskonvention wie die Ereignisse anderer Komponenten.

Neben Fehlern im Code wurden auch verschiedene Stil- und Barriereprobleme behoben. Insbesondere kann der Titeltext von Dialog-Widgets nicht mehr hinter dem Schließen-Symbol verschwinden, und die Navigation der Tastatur mit dem neuen Schaltflächen-Widget wurde verbessert. Eine vollständige Liste aller in Version 1.8 enthaltenen Fehlerbehebungen finden Sie im Änderungsprotokoll unter http://jqueryui.com/docs/Changelog/1.8rc1

2.Positionierung

Die jQuery-Benutzeroberfläche verfügt jetzt über ein einzigartiges Positionierungssystem, das immer dann verwendet werden kann, wenn ein Widget relativ zu einem anderen Element positioniert werden muss, z. B. über ein Dropdown-Menü oder eine schwebende QuickInfo. Mit dem Positions-Dienstprogramm können Sie auf einfache Weise mit einer Reihe einfacher Zeichenfolgen angeben, welcher Teil des positionierten Elements an welchem Teil des angegebenen Zielelements festgelegt werden soll. So zum Beispiel die "oben links" Punkt eines Elements kann an der fixiert werden "unten rechts" eines anderen angegebenen Elements.

Das Dienstprogramm verfügt auch über ein robustes Kollisionserkennungssystem, das verhindert, dass Betrachter der Seite unansehnlichen Symbolleisten ausgesetzt werden, wenn das zu positionierende Element zu nahe an den Rand des Ansichtsfensters gelangt oder seine Position nicht anderweitig einnehmen kann.

Die API für dieses Dienstprogramm ist kompakt und umfasst zu diesem Zeitpunkt nur 7 konfigurierbare Optionen. Dies gibt uns jedoch die Kontrolle, die wir brauchen, und ermöglicht es uns, dies bis auf Weiteres festzulegen 81 mögliche Kombinationen der Positionierung; Folgende Optionen können konfiguriert werden:

beim:: Bezieht sich auf die Position auf dem Zielelement, an der das Element positioniert werden soll. Die Methode akzeptiert einen einzelnen String, der aus dem Wert für die horizontale Achse besteht (entweder Recht, Center, oder links) gefolgt von dem Wert für die vertikale Achse (entweder oben, Center, oder Unterseite). Es gibt kein Trennzeichen zwischen den 2 Werten.
bgiframe:: Wenn das bgiframe-Plugin auf der Seite verfügbar ist, wendet diese Option ein iframe-Shim auf das positionierte Element an, wodurch verhindert werden kann, dass ausgewählte Elemente über dem positionierten Inhalt in IE6 angezeigt werden.
Kollision:: Diese Option bestimmt, wie Kollisionen behandelt werden. Es akzeptiert eine der folgenden Zeichenfolgen: Flip, passen oder keiner. Der Standardwert ist Flip, was bewirkt, dass das positionierte Element die Position relativ zu dem Zielelement umkehrt, z. "rechte Mitte" wird werden "linke Mitte".
meine:: Bezieht sich auf das zu positionierende Element; akzeptiert dieselben Werte wie beim.
von:: Akzeptiert einen jQuery-Selektor, der das Zielelement angibt.
Versatz:: Geben Sie eine Anzahl von Pixeln an, um das auf dem Zielelement positionierte Element zu verschieben.
mit:: Mit dieser Option kann eine Rückruffunktion verwendet werden, mit der Sie die Positionierung des Elements animieren können.

3. Autovervollständigung

Eines meiner Lieblings-Widgets ist als offizielle UI-Komponente wieder verfügbar! Autocomplete war ein Beta-Widget in einer früheren 1.6-Version der Bibliothek und ist nun nach einem kompletten Refactor zurück. Es wird an Texteingaben auf der Seite angehängt und bietet eine Liste möglicher Optionen, wenn ein Besucher mit der Eingabe in das Textfeld beginnt.

Das Widget kann seine Daten (die übereinstimmenden Elemente im Vorschlagsmenü) aus einer Vielzahl von Quellen beziehen, einschließlich eines Standard-JavaScript-Arrays, JSON über eine AJAX-Anfrage oder einer flexiblen Rückruffunktion, die eine beliebige Datenquelle implementieren und eine angepasste Antwort zur Anzeige in anzeigen kann das Vorschlagsmenü.

Autocomplete ist ein hochgradig konfigurierbares Widget und bietet eine vollständige API mit Optionen, Methoden und Ereignissen, die verwendet werden können. Es ist vollständig über SteamRoller bedienbar und vollständig über die Tastatur navigierbar. Alles in allem bietet diese Komponente eine Vielzahl von Funktionen für Ihre Seiten. Zu einem späteren Zeitpunkt kann das Caching auch ein konfigurierbares Verhalten sein.

Schauen wir uns die API an. Es enthält die folgenden drei Konfigurationsoptionen:

verzögern:: Wir können die Anzahl der Millisekunden angeben, die das Widget warten soll, bevor das Vorschlagsmenü angezeigt wird, wenn der Besucher mit der Eingabe beginnt.
minimale Länge:: Für diese Option wird eine ganze Zahl verwendet, die angibt, wie viele Zeichen in die Eingabe eingegeben werden sollen, bevor das Vorschlagsmenü angezeigt wird.
Quelle:: Wir konfigurieren die Datenquelle mit dieser Option. Mögliche Werte sind ein Array von Strings, das die Elemente darstellt, die im Vorschlagsmenü angezeigt werden sollen, oder ein Array von Objekten, bei denen jedes Objekt zwei Eigenschaften enthält. Die erste ist die im Vorschlagsmenü angezeigte Beschriftung, der zweite ist der Wert, der hinzugefügt wird die Eingabe, wenn ein Element im Vorschlagsmenü ausgewählt ist. Wir können auch eine einzelne Zeichenfolge bereitstellen, die eine Remote-Ressource darstellt, die die Daten asynchron zurückgeben kann, oder eine Rückruffunktion, die die Daten anfordert und im erforderlichen Format an das Widget zurückgibt.

Die folgenden zwei Methoden werden von Autocomplete verfügbar gemacht:

schließen:: Dient zum Schließen des Vorschlagsmenüs.
Suche:: Suchen Sie nach den verfügbaren Daten und zeigen Sie die Vorschläge an, wenn der Begriff übereinstimmt. Kann einen vordefinierten Wert als Begriff verwenden, der als Argument an die Methode übergeben wird, oder den Wert des Eingabefelds, dem es zugeordnet ist.

Wir können Callback-Funktionen auch in die folgenden benutzerdefinierten Ereignisse einbinden:

Veränderung:: Wird ausgelöst, nachdem ein Element im Vorschlagsmenü ausgewählt und das Menü geschlossen wurde.
schließen:: Wird ausgelöst, wenn das Vorschlagsmenü geschlossen wird, unabhängig davon, ob ein Element ausgewählt wurde oder nicht. Geht dem voraus Veränderung Veranstaltung.
Fokus:: Wird unmittelbar vor dem Fokus auf ein Element im Vorschlagsmenü ausgelöst.
öffnen:: Wird ausgelöst, nachdem die Daten zurückgegeben wurden, direkt vor dem Anzeigen des Vorschlagsmenüs.
Suche:: Wird unmittelbar vor der Suche nach der Datenquelle ausgelöst. Die Suche kann durch Zurückkehren abgebrochen werden falsch von einer an dieses Ereignis gebundenen Rückruffunktion.
wählen:: Dieses Ereignis wird ausgelöst, wenn ein Menüpunkt vor dem Menü geschlossen wird.

Als besonderen Bonus enthält die Quelldatei für das Autocomplete-Widget auch das Beta-Menü-Widget, das sich noch in der Entwicklung befindet und in einer späteren Version der Bibliothek veröffentlicht werden soll. Bisher sieht es nach einer robusten und attraktiven Erweiterung der Bibliothek aus und ermöglicht es uns, eine ungeordnete Liste in ein attraktives Dropdown- oder Fly-Out-Menü umzuwandeln. Viele Funktionen werden unterstützt, einschließlich Untermenüs, Symbolen, Trennlinien und sogar ein Drilldown-Menü mit Navigationspfad.

4. Taste

Mit dem Schaltflächen-Widget können wir attraktive und funktionale Schaltflächen implementieren, die so konfiguriert werden können, dass sie sich wie eine bestimmte Schaltflächenart verhalten. Zum Beispiel können wir Standard-Drucktasten, Schaltflächen im Radiobereich, in denen nur eine einzelne Taste in einem Satz ausgewählt werden kann, oder Schaltflächen im Check-Stil, in denen eine beliebige Anzahl in einem bestimmten Satz ausgewählt werden kann, einrahmen. Es können auch verschiedene Schaltflächentypen erstellt werden, die ein einfaches Dropdown-Menü enthalten.

Es ist ein sehr flexibles Widget und kann mit einer Vielzahl darunter liegender Elemente erstellt werden