JQuery UI Demos jQuery UI bietet eine Kombination aus Interaktion, Effekten, Widgets, Dienstprogrammen und Themen, die entworfen sind, um zusammen zu arbeiten oder auf eigene Faust. Spielen Sie mit den Demos, sehen Sie die Quelle an, erstellen Sie ein Thema. Lesen Sie die API-Dokumentation und starten Sie mit jQuery UI heute. Interaktionen Interaktionen fügen grundlegende mausbasierte Verhaltensweisen zu jedem Element hinzu. Sie können sortierbare Listen erstellen, resizable Elemente, ziehen Amp-Drop-Verhalten und mehr mit nur ein paar Zeilen Code. Interaktionen machen auch große Bausteine für komplexere Widgets und Anwendungen. Widgets sind voll funktionsfähige UI-Steuerelemente, die den Reichtum an Desktop-Anwendungen auf das Web bringen. Alle Widgets bieten einen soliden Kern mit vielen Erweiterungspunkten für das Customizing-Verhalten sowie eine umfassende Unterstützung. Effekte fügen Unterstützung für die Animation von Farben und Klassenübergänge hinzu, sowie die Bereitstellung von mehreren zusätzlichen Erleichterungen. Darüber hinaus ist eine ganze Reihe von benutzerdefinierten Effekten für den Einsatz beim Anzeigen und Ausblenden von Elementen oder nur um einige visuelle Anziehungskraft hinzuzufügen. Dienstprogramme, die von jQuery UI verwendet werden, um Interaktionen und Widgets zu erstellen. InteraktionenTabs Widget Tabs werden in der Regel verwendet, um Inhalte in mehrere Abschnitte zu brechen, die ausgetauscht werden können, um Platz zu sparen, ähnlich wie ein Akkordeon. Der Inhalt für jede Registerkarte kann in der Seite definiert werden oder kann über Ajax geladen werden, beide werden automatisch auf der Basis des href des Anker, der mit der Registerkarte verknüpft ist, behandelt. Standardmäßig werden Registerkarten aktiviert, aber die Ereignisse können über die Ereignisoption geändert werden. Zusätzliche Hinweise: Dieses Widget erfordert einige funktionale CSS, sonst funktioniert es. Wenn Sie ein benutzerdefiniertes Design erstellen, verwenden Sie die Widgetaposs-spezifische CSS-Datei als Ausgangspunkt. AjaxOptionsxA0 Zusätzliche Ajax-Optionen, die beim Laden des Tab-Inhalts berücksichtigt werden sollen (siehe jQuery. ajax ()). CachexA0 Ob der Remote-Tabs-Inhalt, z. B. Nur einmal oder mit jedem Klick laden. Der zwischengespeicherte Inhalt ist faul geladen, z. B. Einmal und nur einmal für den ersten Klick. Beachten Sie, dass, um zu verhindern, dass die tatsächlichen Ajax-Anfragen vom Browser zwischengespeichert werden, müssen Sie einen zusätzlichen Cache anlegen: falsches Flag in der Option ajaxOptions. CollapsiblexA0 Wenn auf true gesetzt. Das aktive Panel kann geschlossen werden. CookiexA0 Speichern Sie die zuletzt ausgewählte Registerkarte in einem Cookie. Das Cookie wird dann verwendet, um die ursprünglich gewählte Registerkarte zu bestimmen, wenn die ausgewählte Option nicht definiert ist. Benötigt das Cookie-Plugin, das auch im Entwicklungsbündel-externen Ordner aus dem Download-Builder zu finden ist. Das Objekt muss Keyvalue-Paare der Form haben, die das Cookie-Plugin als Optionen erwartet. Beispiel:. Seit jQuery UI 1.7 ist es auch möglich, den Cookie-Namen zu definieren, der über die name-Eigenschaft verwendet wird. DisabledxA0 Welche Tabs sind deaktiviert. Mehrere unterstützte Typen: Boolesch. Aktivieren oder deaktivieren Sie alle Registerkarten. Array Ein Array, das die nullbasierten Indizes der Registerkarten enthält, die deaktiviert werden sollten, z. B. 0, 2 würde die erste und dritte Registerkarte deaktivieren. EventxA0 Die Art des Ereignisses, auf das die Registerkarten reagieren sollen, um die Registerkarte zu aktivieren. Um auf hover zu aktivieren, verwenden Sie quotmouseoverquot. Aktivieren Sie Animationen für hidniga nd, die Registerkarten anzeigen. Mehrere unterstützte Typen: Objekt. Keyvalue-Paare von Eigenschaften zum Animieren und zur optionalen Dauer, z. B. . Array Animationseinstellungen in der Form hideSettings, showSettings. IdPrefixxA0 Wenn die Fernbedienung, ihr Ankerelement, das kein Titelattribut hat, um eine ID zu erzeugen, wird aus diesem Präfix eine idfragment-Kennung erstellt und eine eindeutige ID, z. B. quotui-tabs-54quot. PanelTemplatexA0 HTML-Vorlage, aus der ein neues Registerfeld erstellt wird, wenn ein Tab mit der add () - Methode hinzugefügt wird oder wenn ein Panel für eine Remote-Registerkarte erstellt wird. SelectedxA0 Der nullbasierte Index des ausgewählten Panels (offen). Die Einstellung auf -1 wird zusammengefasst. Dies erfordert, dass die zusammenklappbare Option wahr ist. SpinnerxA0 Der HTML-Inhalt, der in einem Tab-Titel angezeigt wird, während Remote-Inhalte geladen werden. Setzen Sie diese Option auf einen leeren String, um das Spinnerverhalten zu deaktivieren. Ein Spannelement muss im Anker-Tag des Titels vorhanden sein, damit der Spinner-Inhalt sichtbar ist. TabTemplatexA0 HTML-Vorlage, aus der eine neue Registerkarte erstellt und hinzugefügt wird. Die Platzhalter und werden durch die URL und das Tab-Label ersetzt, die als Argumente an die add () - Methode übergeben werden. Abort () Rücksendungen: jQuery (nur Plugin) Beende alle laufenden Registerkarten ajax Anfragen und Animationen. Diese Methode akzeptiert keine Argumente. Tabs Widget Tastatur-Interaktion Wenn Fokus auf einer Registerkarte liegt, stehen folgende Tastenbefehle zur Verfügung: UP LINKS. Bewegt den Fokus auf die vorherige Registerkarte. Wenn auf der ersten Registerkarte, fährt der Fokus auf den letzten Tab. Nach einer kurzen Verzögerung fokussierte Registerkarte aktivieren. DOWN RECHTS Bewegt den Fokus auf die nächste Registerkarte. Wenn auf der letzten Registerkarte, fährt der Fokus auf den ersten Tab. Nach einer kurzen Verzögerung fokussierte Registerkarte aktivieren. CTRL UP LINKS. Bewegt den Fokus auf die vorherige Registerkarte. Wenn auf der ersten Registerkarte, fährt der Fokus auf den letzten Tab. Die fokussierte Registerkarte muss manuell aktiviert werden. CTRL DOWN RECHTS. Bewegt den Fokus auf die nächste Registerkarte. Wenn auf der letzten Registerkarte, fährt der Fokus auf den ersten Tab. Die fokussierte Registerkarte muss manuell aktiviert werden. ZUHAUSE. Bewegt den Fokus auf die erste Registerkarte. Nach einer kurzen Verzögerung fokussierte Registerkarte aktivieren. ENDE. Verschieben Sie den Fokus auf die letzte Registerkarte. Nach einer kurzen Verzögerung fokussierte Registerkarte aktivieren. CTRL HOME. Bewegt den Fokus auf die erste Registerkarte. Die fokussierte Registerkarte muss manuell aktiviert werden. CTRL END. Verschieben Sie den Fokus auf die letzte Registerkarte. Die fokussierte Registerkarte muss manuell aktiviert werden. PLATZ. Aktivieren Sie das Panel mit der fokussierten Registerkarte. EINGEBEN. Aktivieren oder Umschalten der mit der fokussierten Registerkarte verknüpften Schaltfläche. ALT OPTION SEITE OBEN Bewegen Sie den Fokus auf die vorherige Registerkarte und aktivieren Sie sofort. ALT OPTION SEITE UNTEN. Bewegt den Fokus auf den nächsten Tab und schalte sofort ein. Wenn sich der Fokus in einem Panel befindet, stehen folgende Tastenbefehle zur Verfügung: CTRL UP. Verschieben Sie den Fokus auf die zugeordnete Registerkarte. ALT OPTION SEITE OBEN Bewegen Sie den Fokus auf die vorherige Registerkarte und aktivieren Sie sofort. ALT OPTION SEITE UNTEN. Bewegt den Fokus auf den nächsten Tab und schalte sofort ein. Das Tabs-Widget verwendet das jQuery-UI-CSS-Framework, um sein Aussehen und sein Gefühl zu gestalten. Wenn tabspezifisches Styling benötigt wird, können die folgenden CSS-Klassennamen für Overrides oder als Schlüssel für die Klassenoption verwendet werden: ui-tabs. Der äußere Behälter der Laschen. Dieses Element wird zusätzlich eine Klasse von ui-tabs-collapsible, wenn die zusammenklappbare Option gesetzt ist. Ui-tabs-nav Die Liste der Registerkarten. Ui-tabs-tab. Eines der Elemente in der Liste der Registerkarten. Das aktive Element hat die ui-tabs-aktive Klasse. Jedes Listenelement, dessen zugehöriger Inhalt über einen Ajax-Aufruf geladen wird, hat die ui-tabs-load-Klasse. Ui-tabs-anchor Die Anker zum Umschalten der Tafeln. Ui-tabs-panel Die mit den Tabs verknüpften Panels Nur das Panel, dessen entsprechende Registerkarte aktiv ist, ist sichtbar. Abhängigkeiten Zusätzliche Hinweise: Dieses Widget erfordert einige funktionale CSS, ansonsten funktioniert es. Wenn Sie ein benutzerdefiniertes Design erstellen, verwenden Sie die Widgetaposs-spezifische CSS-Datei als Ausgangspunkt. ActivexA0 Welches Panel ist derzeit geöffnet. Mehrere unterstützte Typen: Boolesch. Wenn Sie auf false setzen, werden alle Bedienfelder zusammengebrochen. Dies erfordert, dass die zusammenklappbare Option wahr ist. Integer Der nullbasierte Index des Paneels, der aktiv ist (offen). Ein negativer Wert wählt die Panels aus dem letzten Panel. Codebeispiele: Initialisieren Sie die Registerkarten mit der aktivierten Option:
Comments
Post a Comment