Language: HTML | XAML

Steuerelemente nach Funktion (HTML)

Applies to Windows and Windows Phone

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

Beispiel für ein HTML-NavBar-Steuerelement

Navigationsleistenbefehl (nur Windows)

Stellt einen Navigationsbefehl in einem Container für die Navigationsleiste dar.


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

Referenz: WinJS.UI.NavBarCommand

Beispiel für ein HTML-NavBar-Steuerelement

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ü".

Schaltflächen

Zurück-Schaltfläche (nur Windows)

Ermöglicht die Rückwärtsnavigation mithilfe einer Schaltfläche.


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

Referenz: WinJS.UI.WinJS.UI.BackButton

Schaltfläche

Ein Schaltflächen-Steuerelement

Stellt ein Schaltflächen-Steuerelement dar.


<button>A button</button>

– oder –


<input type="button" value="A button" />

Referenz: button, input type=button

Schnellstart: Hinzufügen einer Schaltfläche

Schaltfläche

Siehe "Schaltfläche"

Schaltfläche "Zurücksetzen"

Schaltfläche "Zurücksetzen"

Setzt die Daten in einem Formular zurück.


<button type="reset">Reset</button>

Referenz: button, input type=reset

Schnellstart: Hinzufügen einer Schaltfläche

Schaltfläche "Senden"
Ein Schaltflächen-Steuerelement zum Absenden

Erstellt eine Schaltfläche, die das Formular absendet, wenn auf sie geklickt wird.


<button type="submit">Submit</button>


Referenz: button, input type=submit

Schnellstart: Hinzufügen einer Schaltfläche

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 einer Listenansicht

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

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

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

Navigation

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

Webansicht

Informationen finden Sie im Eintrag zu "iframe".

Statussteuerelement

Statusleiste

Statussteuerelementstile

Zeigt eine Leiste an, die einen laufenden Vorgang widerspiegelt.


<progress />

Referenz: progress

Schnellstart: Hinzufügen von Statussteuerelementen

Statuskreis (nur Windows)

Zeigt einen Ring an, der einen laufenden Vorgang widerspiegelt.


<progress class="win-ring" style="width: 20px; height: 20px" />

Referenz: progress

Schnellstart: Hinzufügen von Statussteuerlementen

Bewertungssteuerelemente

Bewertung (nur Windows)

Ein Bewertungssteuerelement

Ermöglicht es dem Benutzer, eine Bewertung abzugeben oder die bestehende Bewertung aufzurufen.


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

Referenz: WinJS.UI.Rating

Schnellstart: Hinzufügen von Bewertungen

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 einer Listenansicht

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

Beispiel für ein Suchfeldsteuerelement

select

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
Schnellstart: Hinzufügen von Steuerelementen
Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen
WinJS-API-Änderungen für Windows Phone

 

 

Anzeigen:
© 2015 Microsoft