Steuerelemente nach Funktion (HTML)

  • Artikel

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Windows-Runtime-Apps mit JavaScript stellen Steuerelemente bereit, die viele Funktionen ausführen. Sie können das entsprechende Steuerelement für Ihr Szenario auswählen, indem Sie Steuerelemente mit ähnlicher Funktionalität vergleichen. (Eine alphabetische Liste der Steuerelemente finden Sie unter Steuerelementliste.)

Sehen Sie diese Features in unserer Reihe App-Features von A bis Z in Aktion : Windows Store-App-Benutzeroberfläche von A bis Z

App-Leisten und -Befehle

  • App-Leiste
    Enthält eine Symbolleiste zum Anzeigen appspezifischer Befehle.

    <div data-win-control="WinJS.UI.AppBar"></div>

    Referenz: WinJS.UI.AppBar

    Schnellstart: Hinzufügen einer App-Leiste

  • Kontextmenü
    Enthält ein kleines Menü, das Benutzern den Zugriff auf Aktionen (wie Zwischenablagebefehle) für Text- oder UI-Objekte in Windows-Runtime-Apps mit JavaScript ermöglicht.

    var menu = new Windows.UI.Popups.PopupMenu();

    Referenz: Windows.UI.Popups.PopupMenu

  • Menü (nur Windows)
    Zeigt ein Menü an.

    <div data-win-control="WinJS.UI.Menu"></div>

    Referenz: Menu

  • Menübefehl (nur Windows)
    Stellt einen Befehl dar, der in einem Menu-Objekt angezeigt wird.

    <button data-win-control="WinJS.UI.MenuCommand" />

    Referenz: MenuCommand

  • Navigationsleiste (nur Windows)
    Zeigt Navigationsbefehle auf einer Symbolleiste an, die vom Benutzer ein- bzw. ausgeblendet werden kann.

    <div data-win-control="WinJS.UI.NavBar"></div>

    Referenz: WinJS.UI.NavBar

    HTML-NavBar-Steuerelementbeispiel

  • Navigationsleistenbefehl (nur Windows)
    Stellt in einem Navigationsleistencontainer einen Navigationsbefehl dar.

    <div data-win-control="WinJS.UI.NavBarCommand"></div>

    Referenz: WinJS.UI.NavBarCommand

    HTML-NavBar-Steuerelementbeispiel

  • Navigationsleistencontainer (nur Windows)
    Enthält eine Gruppe mit Navigationsleistenbefehlen in einer Navigationsleiste.

    <div data-win-control="WinJS.UI.NavBarContainer"></div>

    Referenz: WinJS.UI.NavBarContainer

    Beispiel für ein HTML-NavBar-Steuerelement

  • Popupmenü
    Informationen finden Sie im Eintrag zum "Kontextmenü".

  • Symbolleiste
    Zeigt eine Reihe von Befehlen an. Eine Toolbar kann an einer beliebigen Stelle etwa in einem Flyout oder auf einer AppBar angezeigt werden.

    <div data-win-control="WinJS.UI.Toolbar">
</div>

    Referenz: Toolbar

Schaltflächen

Sammlungs-/Datensteuerelemente

  • Flip-Ansicht
    Zeigt eine Sammlung an, jeweils ein Element.

    <div data-win-control="WinJS.UI.FlipView"></div>

    Referenz: WinJS.UI.FlipView

    Schnellstart: Hinzufügen eines FlipView-Steuerelements

  • Rasteransicht
    Ein ListView-Objekt mit einem Rasterlayout. Weitere Informationen finden Sie im Eintrag zur "Listenansicht".

    <div data-win-control="WinJS.UI.ListView" 
    data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>

    Referenz: WinJS.UI.ListView

    Schnellstart: Hinzufügen eines ListView-Objekts

  • Sprunganzeige
    Siehe "Semantischer Zoom"

  • Repeater
    Generiert HTML-Code aus einer Datenmenge. Mithilfe dieses Steuerelements können Sie Listen mit Elementen generieren.

    <div data-win-control="WinJS.UI.Repeater"></div>

    Referenz: WinJS.UI.Repeater

    Beispiel für ein HTML-Repeater-Steuerelement

  • Semantischer Zoom
    Ermöglicht dem Benutzer das Zoomen zwischen zwei Ansichten einer Sammlung mit Elementen.

    <div data-win-control="WinJS.UI.SemanticZoom">

  <!-- Control that provides the zoomed-in view. -->
  <div id="zoomedInView" data-win-control="WinJS.UI.ListView"></div>

  <!-- Control that provides the zoomed-out view. -->
  <div id="zoomedOutView" data-win-control="WinJS.UI.ListView"></div>

</div>

    Referenz: WinJS.UI.SemanticZoom

Flyouts

  • Inhaltsdialogfeld
    Zeigt wichtige Informationen, die die Aufmerksamkeit oder eine explizite Aktion des Benutzers erfordern, und blockiert vorübergehend Interaktionen mit anderen Elementen in der App.

    <div 
  data-win-control="WinJS.UI.ContentDialog">
  <!-- Content -->
</div

    Referenz: ContentDialog

  • Kontextmenü
    Siehe "Popupmenü"

  • Flyout (nur Windows)
    Zeigt eine Meldung an, die einen Benutzereingriff erfordert. (Im Gegensatz zu einem Meldungsdialogfeld wird von einem Flyout kein separates Fenster erstellt und keine Benutzerinteraktion blockiert.)

    <div data-win-control="WinJS.UI.Flyout"></div>

    Referenz: WinJS.UI.Flyout

    Schnellstart: Hinzufügen eines Flyouts

  • Menü (nur Windows)
    Zeigt ein Menü an.

    <div data-win-control="WinJS.UI.Menu"></div>

    Referenz: WinJS.UI.Menu

  • Menübefehl (nur Windows)
    Stellt einen Befehl dar, der in einem Menu-Objekt angezeigt wird.

    <button data-win-control="WinJS.UI.MenuCommand" />

    Referenz: WinJS.UI.MenuCommand

  • Meldungsdialogfeld
    Zeigt eine Meldung an, die eine sofortige Benutzerantwort erfordert.

    Referenz: Windows.UI.Popups.MessageDialog

    Schnellstart: Hinzufügen eines Meldungsdialogfelds

  • Popupmenü
    Stellt ein Kontextmenü dar.

    var popupMenu = new Windows.UI.Popups.PopupMenu();

    Referenz: Windows.UI.Popups.PopupMenu

  • Einstellungen-Flyout (nur Windows)
    Bietet Zugriff auf Appeinstellungen.

    <div data-win-control="WinJS.UI.SettingsFlyout"></div>

    Referenz: SettingsFlyout

  • QuickInfo (nur Windows)
    Zeigt eine umfangreiche QuickInfo an, die umfangreichen Inhalt (z. B. Bilder und formatierter Text) unterstützen kann, um mehr Informationen zu etwas anzuzeigen.

    <div data-win-control="WinJS.UI.ToolTip"></div>

    Referenz: WinJS.UI.Tooltip

  • QuickInfo, einfach
    Zeigt eine einfache, nur aus Text bestehende QuickInfo für ein Element an.

    <element title="tooltip text" />

    Referenz: title

Grafiken

  • Canvas
    Stellt ein Objekt bereit, das zum Zeichnen, Rendern und Ändern von Bildern und Grafiken in einem Dokument verwendet wird.

    <canvas />

    Referenz: canvas

    Schnellstart: Zeichnen auf eine Canvas

  • SVG
    Definiert ein SVG-Dokument oder -Dokumentfragment, das Vektorgrafiken rendern kann.

    <svg xmlns="http://www.w3.org/2000/svg"></svg>

    Referenz: svg

Bilder

  • img
    Zeigt ein Bild an.

    <img src="url" />

    Referenz: img

Layoutsteuerelemente

  • Flexbox
    Das CSS-Layout berücksichtigt den verfügbaren Platz bei der Definition von Feldgrößen und ermöglicht so relative Größen und Positionierung.

    <div style="display: -ms-box;">
    <!-- Child elements -->
</div>

    Referenz: display

  • Raster
    Ein CSS-Layout, das einen aus Spalten und Zeilen bestehenden flexiblen Rasterbereich definiert.

    <div style="{display: -ms-grid}">
    <!-- Child elements -->
</div>

    Referenz: display

  • Hub (nur Windows)
    Erstellt ein Hubnavigationsmuster, das aus Abschnitten besteht, zu denen navigiert werden kann. Jeder Abschnitt wird durch einen Hubabschnitt definiert.

    <div data-win-control="WinJS.UI.Hub"></div>

    Referenz: WinJS.UI.Hub

    Beispiel für ein HTML-Hub-Steuerelement

  • Hubabschnitt (nur Windows)
    Definiert einen Abschnitt eines Hubs.

    <div data-win-control="WinJS.UI.HubSection"></div>

    Referenz: WinJS.UI.HubSection

    Beispiel für ein HTML-Hub-Steuerelement

  • Elementcontainer
    Definiert ein Element, das gedrückt und gezogen und auf dem eine Streifbewegung ausgeführt werden kann.

    <div data-win-control="WinJS.UI.ItemContainer"></div>

    Referenz: WinJS.UI.WinJS.UI.ItemContainer

    HTML-ItemContainer-Beispiel

  • Verschiebungs-Bildlaufansicht
    Informationen finden Sie im Eintrag zum "Bildlauf".

  • Pivot
    Erstellt ein Registersteuerelement, das mehrere Elemente anzeigt.

    <div data-win-control='WinJS.UI.Pivot'></div>

    Referenz: WinJS.UI.Pivot

  • Pivot-Element
    Erstellt innerhalb eines Registersteuerelements eine Registerkarte.

    <div data-win-control='WinJS.UI.PivotItem'></div>

    Referenz: WinJS.UI.PivotItem

  • Bildlaufleiste
    Ein Container, in dem Sie einen Bildlauf durch seine Elemente durchführen können. Sie fügen diese Bildlauffunktion hinzu, indem Sie den overflow-Stil eines Elements für den Bildlauf oder automatisch festlegen.

    <div style="overflow:scroll;">
    <!-- Contents -->
</div>

    Referenz: overflow

  • Bildlaufansicht
    Zeigt eine Inhaltsansicht an, die ein Benutzer vergrößern und verkleinern kann, und bietet zusätzliche Features wie Andockpunkte, die diese Erfahrung verbessern.

    <div style=overflow:scroll;-ms-content-zooming:zoom>>
    <!-- Contents to edit. -->
</div>

    Referenz: overflow, ms-content-zooming

  • geteilte Ansicht
    Unterteilt einen Bereich in zwei Abschnitte: einen Bereich, der am Rand angezeigt werden kann, und einen Inhaltsbereich, der den verfügbaren Platz ausfüllt.

    <div data-win-control="WinJS.UI.SplitView">
</div>

    Referenz: SplitView

  • Viewbox
    Skaliert ein einziges untergeordnetes Element so, dass der verfügbare Raum ausgefüllt wird, ohne dass dabei eine Größenänderung erfolgt. Dieses Steuerelement reagiert auf Größenänderungen des Containers sowie auf Größenänderungen des untergeordneten Elements. Eine Medienabfrage kann beispielsweise zu einer Änderung des Seitenverhältnisses führen.

    <div data-win-control="WinJS.UI.ViewBox"></div>

    Referenz: WinJS.UI.ViewBox

  • zoomfähige Bildlaufansicht
    Informationen finden Sie im Eintrag zum "Bildlauf".

Mediensteuerelemente

  • Audio
    Legt die Ton- bzw. Audioinhalte fest, die in einem Dokument wiedergegeben werden sollen, zum Beispiel Musik oder Effekte.

    <audio>
    <source src="uri" type="audioType" />
</audio>

    Referenz: audio

  • Medienelement
    Informationen finden Sie in den Einträgen für "Audio" und "Video."

  • Media Player
    Informationen finden Sie in den Einträgen für "Audio" und "Video."

  • Video
    Legt die Videoinhalte fest, die in einem Dokument wiedergegeben werden sollen.

    <video controls="controls">
   <source src="url" type="videoType" />
</video>

    Referenz: video

  • Html-Steuerelement
    Zeigt Inhalte von einer HTML-Seite an.

    <div data-win-control="WinJS.UI.HtmlControl"></div>

    Referenz: WinJS.UI.HtmlControl

  • iframe
    Ein unverankerter Inlineframe, der in einem anderen Dokument erscheinen kann.

    <iframe src="url" />

    Referenz: iframe

  • Seitensteuerung
    Stellt ein benutzerdefiniertes Steuerelement oder eine Seite in einer Navigationsapp dar.

    Referenz: WinJS.UI.Pages.PageControl

    Schnellstart: Verwenden der Einzelseitennavigation

  • geteilte Ansicht
    Unterteilt einen Bereich in zwei Abschnitte: einen Bereich, der am Rand angezeigt werden kann, und einen Inhaltsbereich, der den verfügbaren Platz ausfüllt.

    <div data-win-control="WinJS.UI.SplitView">
</div>

    Referenz: SplitView

  • Webansicht
    Informationen finden Sie im Eintrag zu "iframe".

Statussteuerelement

Bewertungssteuerelemente

Auswahlsteuerelemente

  • Kontrollkästchen
    Mehrere Kontrollkästchen-Steuerelemente

    Stellt ein Kontrollkästchen dar, das der Benutzer aktivieren und deaktivieren kann.

    <input type="checkbox" />

    Referenz: input type=checkbox

    Schnellstart: Hinzufügen von Kontrollkästchen

  • Kombinationsfeld
    Informationen finden Sie im Eintrag zu "select".

  • Datumsauswahl (nur Windows)
    "DatePicker" im hellen Stil

    Legt ein Datum fest.

    <div data-win-control="WinJS.UI.DatePicker"></div>

    Referenz: DatePicker

    Schnellstart: Hinzufügen eines DatePicker-Steuerelements

  • Dateiupload
    Erstellt ein Dateiuploadobjekt mit einem Textfeld und einer Schaltfläche zum Durchsuchen.

    <input type="file" />

    Referenz: input type=file

  • Listenfeld
    Informationen finden Sie im Eintrag zu "select".

  • Listenansicht
    Zeigt eine Sammlung von Daten in einer Listen- oder Rasteransicht an.

    <div data-win-control="WinJS.UI.ListView"></div>

    Referenz: WinJS.UI.ListView

    Schnellstart: Hinzufügen eines ListView-Objekts

  • Optionsfeld
    Eine Art von Auswahlsteuerelement, das die Auswahl des Benutzers auf einen einzigen Wert innerhalb einer Reihe von Werten beschränkt. Verknüpfen Sie dazu alle Schaltflächen in einer Reihe von Optionsfeldern, indem Sie jeder Schaltfläche denselben Namen zuweisen.

    <input type="radio" id="redRadio" name="colorRadio" /><label for="redRadio">Red</label>   
<input type="radio" id="greedRadio" name="colorRadio" /><label for="greedRadio">Green</label>
<input type="radio" id="blueRadio" name="colorRadio" /><label for="blueRadio">Blue</label>

    Referenz: input type=radio

  • Bereich
    Informationen finden Sie im Eintrag zu "slider".

  • Suchfeld (nur Windows)
    Ermöglicht dem Benutzer das Ausführen von Suchabfragen und Auswählen von Vorschlägen.

    <div data-win-control="WinJS.UI.SearchBox"></div>

    Referenz: WinJS.UI.SearchBox

    SearchBox-Steuerelementbeispiel

  • Auswählen
    Stellt ein Listenfeld, ein Kombinationsfeld oder eine Dropdownliste dar.

    <select>
    <option>Apple</option>
    <option>Banana</option>
    <option>Grape</option>
    <option>Orange</option>
    <option>Pear</option>
    <option>Watermelon</option>
</select>

    Referenz: select

  • Schieberegler
    Stellt einen Schieberegler für einen Bereich zur Auswahl eines numerischen Werts zur Verfügung.

    <input type="range" />

    Referenz: input type=range

  • Zeitauswahl (nur Windows)
    "TimePicker" im hellen Stil

    Ermöglicht dem Benutzer das Festlegen einer Uhrzeit.

    <div data-win-control="WinJS.UI.TimePicker"></div>

    Referenz: WinJS.UI.TimePicker

    Schnellstart: Hinzufügen von TimePicker-Steuerelementen

  • Umschalter
    Stellt einen Schalter dar, mit dem zwischen zwei Zuständen hin und her geschaltet werden kann.

    <div data-win-control="WinJS.UI.ToggleSwitch"></div>

    Referenz: ToggleSwitch

Textsteuerelemente

  • E-Mail-Eingabefeld
    Ein Steuerelement für die einzeilige Texteingabe, das eine oder mehrere E-Mail-Adressen akzeptiert.

    <input type="email" />

    Referenz: input type=email

  • mehrzeiliges Textfeld
    Informationen finden Sie im Eintrag zu "textarea".

  • Zahleingabefeld
    Ein Steuerelement für die einzeilige Texteingabe, das einen numerischen Wert akzeptiert.

    <input type="number" />

    Referenz: input type=number

  • Kennworteingabefeld
    Ein Steuerelement für die einzeilige Texteingabe, ähnlich dem Steuerelement für die Texteingabe, jedoch ohne Textanzeige während der Eingabe durch den Benutzer.

    <input type="password" />

    Referenz: input type=password

  • Rich-Edit-Feld/Rich-Text-Feld
    Ein Steuerelement für die Texteingabe, ähnlich einem Feld zur Texteingabe, bietet jedoch Unterstützung für Inhalte mit untergeordneten Elementen. Zum Erstellen eines Rich-Text-Felds legen Sie die contentEditable-Eigenschaft des Elements fest, das Sie bearbeiten möchten.

    <div contentEditable="true">
    <!-- Elements to edit. -->
</div>

    Referenz: contentEditable

  • einzeiliges Textfeld
    Informationen finden Sie im Eintrag zu "Textfeldern".

  • Textfeld
    Ein Steuerelement für die einzeilige Texteingabe.

    <input type="text" />

    Referenz: input type=text

  • Textbereich
    Ein Steuerelement für die mehrzeilige Texteingabe.

    <textarea></textarea>

    Referenz: textarea

  • URL-Eingabefeld
    Ein Steuerelement für die einzeilige Texteingabe, das URLs akzeptiert.

    <input type="url" />

    Referenz: input type=url

Benutzerhilfe

  • Bezeichnung
    Gibt eine Bezeichnung für ein anderes Element auf der Seite an.

    <label for="otherControl">Label text</label>
<input type="text" id="otherControl" />

    Referenz: label

  • QuickInfo (nur Windows)
    Zeigt eine umfangreiche QuickInfo an, die umfangreichen Inhalt (z. B. Bilder und formatierter Text) unterstützen kann, um mehr Informationen zu etwas anzuzeigen.

    <div data-win-control="WinJS.UI.ToolTip"></div>

    Referenz: WinJS.UI.Tooltip

  • QuickInfo, einfach
    Zeigt eine einfache, nur aus Text bestehende QuickInfo für ein Element an.

    <element title="tooltip text" />

    Referenz: title

Verwandte Themen

Liste der Steuerelemente

try.buildwinjs.com

Schnellstart: Hinzufügen von Steuerelementen

Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen

WinJS-API-Änderungen für Windows Phone