Controlli per funzione (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Le app di Windows Runtime che usano JavaScript offrono controlli che eseguono molte funzioni. Puoi selezionare il controllo appropriato per il tuo scenario confrontando quelli che offrono funzionalità simili (vedi Elenco dei controlli per l'elenco alfabetico dei controlli).
Per una dimostrazione pratica di queste funzionalità, vedi gli argomenti della serie Funzionalità delle app dall'inizio alla fine: Interfaccia utente delle app di Windows Store, dall'inizio alla fine
Barre dell'app e comandi
barra dell'app
Fornisce una barra degli strumenti per la visualizzazione di comandi specifici dell'app.<div data-win-control="WinJS.UI.AppBar"></div>
Riferimento: WinJS.UI.AppBar
menu di scelta rapida
Fornisce un menu leggero che offre agli utenti l'accesso ad azioni (come comandi degli Appunti) su testo oppure oggetti dell'interfaccia utente nelle app di Windows Runtime che usano JavaScript.var menu = new Windows.UI.Popups.PopupMenu();
Riferimento: Windows.UI.Popups.PopupMenu
menu (solo Windows)
Visualizza un menu.<div data-win-control="WinJS.UI.Menu"></div>
Riferimento: Menu
comando menu (solo Windows)
Rappresenta un comando da visualizzare in un oggetto Menu.<button data-win-control="WinJS.UI.MenuCommand" />
Riferimento: MenuCommand
barra di navigazione (solo Windows)
Visualizza i comandi di esplorazione su una barra degli strumenti che può essere visualizzata o nascosta dall'utente.<div data-win-control="WinJS.UI.NavBar"></div>
Riferimento: WinJS.UI.NavBar
comando della barra di spostamento (solo Windows)
Rappresenta un comando di esplorazione in un contenitore della barra di spostamento.<div data-win-control="WinJS.UI.NavBarCommand"></div>
Riferimento: WinJS.UI.NavBarCommand
contenitore della barra di spostamento (solo Windows)
Contiene un gruppo di comandi disponibili in una barra di spostamento.<div data-win-control="WinJS.UI.NavBarContainer"></div>
Riferimento: WinJS.UI.NavBarContainer
menu popup
Vedi la voce relativa a "context menu".barra degli strumenti
Visualizza un set di comandi. Un controllo Toolbar può essere visualizzato in qualsiasi posizione, anche all'interno di un controllo Flyout o AppBar.<div data-win-control="WinJS.UI.Toolbar"> </div>
Riferimento: Toolbar
Pulsanti
pulsante Indietro (solo Windows)
Fornisce la funzionalità per il passaggio alla pagina precedente sotto forma di pulsante.<div><button data-win-control="WinJS.UI.BackButton"></div>
Riferimento: WinJS.UI.WinJS.UI.BackButton
pulsante
Rappresenta un controllo pulsante.
<button>A button</button>
- oppure -
<input type="button" value="A button" />
Riferimento: button, input type=button
pulsante di comando
Vedi pulsantepulsante Reset
Reimposta i dati in un modulo.
<button type="reset">Reset</button>
Riferimento: button, input type=reset
pulsante di invio
Crea un pulsante che, se selezionato, invia il modulo.
<button type="submit">Submit</button>
Riferimento: button, input type=submit
Controlli di dati/insieme
controllo FlipView
Visualizza un insieme, un elemento alla volta.<div data-win-control="WinJS.UI.FlipView"></div>
Riferimento: WinJS.UI.FlipView
visualizzazione griglia
ListView con layout a griglia. Per altre informazioni, vedi la voce relativa a "list view".<div data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
Riferimento: WinJS.UI.ListView
controllo JumpViewer
Vedi zoom semanticorepeater
Genera il codice HTML da un set di dati. Viene usato per generare elenchi di elementi.<div data-win-control="WinJS.UI.Repeater"></div>
Riferimento: WinJS.UI.Repeater
zoom semantico
Consente di eseguire lo zoom tra due visualizzazioni di un insieme di elementi.<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>
Riferimento: WinJS.UI.SemanticZoom
Riquadri a comparsa
finestra di dialogo del contenuto
Visualizza informazioni critiche che richiedono l'attenzione o un'azione esplicita dell'utente e blocca temporaneamente le interazioni con altri elementi nell'app.<div data-win-control="WinJS.UI.ContentDialog"> <!-- Content --> </div
Riferimento: ContentDialog
menu di scelta rapida
Vedi "menu popup"riquadro a comparsa (solo Windows)
Visualizza un messaggio che richiede interazione dell'utente. Diversamente da una finestra di messaggio, un riquadro a comparsa non crea una finestra separata e non blocca le altre interazioni dell'utente.<div data-win-control="WinJS.UI.Flyout"></div>
Riferimento: WinJS.UI.Flyout
menu (solo Windows)
Visualizza un menu.<div data-win-control="WinJS.UI.Menu"></div>
Riferimento: WinJS.UI.Menu
comando menu (solo Windows)
Rappresenta un comando da visualizzare in un oggetto Menu.<button data-win-control="WinJS.UI.MenuCommand" />
Riferimento: WinJS.UI.MenuCommand
finestra di dialogo di messaggio
Visualizza un messaggio che richiede una risposta immediata dell'utente.Riferimento: Windows.UI.Popups.MessageDialog
menu popup
Rappresenta un menu contestuale.var popupMenu = new Windows.UI.Popups.PopupMenu();
Riferimento: Windows.UI.Popups.PopupMenu
Riquadro a comparsa Impostazioni (solo Windows)
Fornisce accesso alle impostazioni dell'app.<div data-win-control="WinJS.UI.SettingsFlyout"></div>
Riferimento: SettingsFlyout
descrizione comando (solo Windows)
Visualizza una descrizione comando avanzata che può supportare contenuto complesso (ad esempio immagini e testo formattato) per mostrare altre informazioni su un elemento.<div data-win-control="WinJS.UI.ToolTip"></div>
Riferimento: WinJS.UI.Tooltip
descrizione comando semplice
Visualizza una semplice descrizione comando di solo testo per un elemento.<element title="tooltip text" />
Riferimento: title
Grafica
canvas
Fornisce un oggetto usato per il disegno, il rendering e la modifica di immagini e grafica in un documento.<canvas />
Riferimento: canvas
svg
Definisce un documento o un frammento di documento SVG per il rendering di grafica vettoriale.<svg xmlns="http://www.w3.org/2000/svg"></svg>
Riferimento: svg
Immagini
img
Visualizza un'immagine.<img src="url" />
Riferimento: img
Controlli di layout
riquadro flessibile
Layout CSS in cui occupa lo spazio disponibile nell'account nella fase di definizione delle dimensioni del riquadro, che consente il relativo posizionamento e ridimensionamento.<div style="display: -ms-box;"> <!-- Child elements --> </div>
Riferimento: display
griglia
Layout CSS che definisce un'area della griglia flessibile costituita da colonne e righe.<div style="{display: -ms-grid}"> <!-- Child elements --> </div>
Riferimento: display
hub (solo Windows)
Consente di creare un modello di esplorazione hub costituito da sezioni a cui è possibile passare. Ogni sezione è definita da una sezione dell'hub.<div data-win-control="WinJS.UI.Hub"></div>
Riferimento: WinJS.UI.Hub
sezione hub (solo Windows)
Consente di definire una sezione di un hub.<div data-win-control="WinJS.UI.HubSection"></div>
Riferimento: WinJS.UI.HubSection
contenitore di elemento
Consente di definire un elemento che è possibile premere, scorrere velocemente e trascinare.<div data-win-control="WinJS.UI.ItemContainer"></div>
Riferimento: WinJS.UI.WinJS.UI.ItemContainer
visualizzazione a scorrimento con panoramica
Vedi la voce relativa a "visualizzazione a scorrimento".pivot
Crea un controllo di scheda che visualizza più elementi.<div data-win-control='WinJS.UI.Pivot'></div>
Riferimento: WinJS.UI.Pivot
elemento pivot
Crea una scheda all'interno di un controllo di scheda.<div data-win-control='WinJS.UI.PivotItem'></div>
Riferimento: WinJS.UI.PivotItem
barra di scorrimento
Contenitore che consente di scorrere nel relativo contenuto. Per aggiungere questa funzionalità di scorrimento, imposta lo stile overflow di un elemento su scroll o auto.<div style="overflow:scroll;"> <!-- Contents --> </div>
Riferimento: overflow
visualizzazione scorrevole
Visualizza un'area di contenuto in cui l'utente può fare zoom avanti e indietro, oltre a includere altre caratteristiche, come punti di ancoraggio, per ottimizzare l'esperienza.<div style=overflow:scroll;-ms-content-zooming:zoom>> <!-- Contents to edit. --> </div>
Riferimento: overflow, ms-content-zooming
doppia visualizzazione
Divide un'area in due parti: un riquadro che può essere visualizzato da un bordo e un'area di contenuto che riempie lo spazio disponibile.<div data-win-control="WinJS.UI.SplitView"> </div>
Riferimento: SplitView
viewbox
Ingrandisce un singolo elemento figlio per riempire lo spazio disponibile senza ridimensionarlo. Questo controllo risponde alle modifiche delle dimensioni del contenitore e dell'elemento figlio. Ad esempio, una media query potrebbe dare come risultato una modifica delle proporzioni.<div data-win-control="WinJS.UI.ViewBox"></div>
Riferimento: WinJS.UI.ViewBox
visualizzazione a scorrimento con zoom
Vedi la voce relativa a "visualizzazione a scorrimento".
Controlli multimediali
audio
Specifica il contenuto di suoni o audio, ad esempio musica o effetti, da riprodurre in un documento.<audio> <source src="uri" type="audioType" /> </audio>
Riferimento: audio
elemento multimediale
Vedi le voci relative ad "audio" e "video".lettore multimediale
Vedi le voci relative ad "audio" e "video".video
Specifica il contenuto video da riprodurre in un documento.<video controls="controls"> <source src="url" type="videoType" /> </video>
Riferimento: video
Esplorazione
controllo HTML
Visualizza contenuto da una pagina HTML.<div data-win-control="WinJS.UI.HtmlControl"></div>
Riferimento: WinJS.UI.HtmlControl
iframe
Cornice mobile in linea che può visualizzare un altro documento.<iframe src="url" />
Riferimento: iframe
controllo pagina
Rappresenta un controllo personalizzato o una pagina in un'app di esplorazione.Riferimento: WinJS.UI.Pages.PageControl
doppia visualizzazione
Divide un'area in due parti: un riquadro che può essere visualizzato da un bordo e un'area di contenuto che riempie lo spazio disponibile.<div data-win-control="WinJS.UI.SplitView"> </div>
Riferimento: SplitView
visualizzazione Web
Vedi la voce relativa a "iframe".
Controlli di stato
barra di stato
Visualizza una barra indicante che è in corso un'operazione.
<progress />
Riferimento: progress
anello di stato (solo Windows)
Visualizza una rotella indicante che è in corso un'operazione.<progress class="win-ring" style="width: 20px; height: 20px" />
Riferimento: progress
Controlli di valutazione
valutazione (solo Windows)
Consente di valutare un contenuto o visualizzare le valutazioni esistenti.
<div data-win-control="WinJS.UI.Rating"></div>
Riferimento: WinJS.UI.Rating
Controlli di selezione
casella di controllo
Rappresenta una casella di controllo selezionabile e deselezionabile dall'utente.
<input type="checkbox" />
Riferimento: input type=checkbox
casella combinata
Vedi la voce relativa a "select".selezione data (solo Windows)
Imposta una data.
<div data-win-control="WinJS.UI.DatePicker"></div>
Riferimento: DatePicker
caricamento di file
Crea un oggetto di upload del file con una casella di testo e un pulsante Cerca.<input type="file" />
Riferimento: input type=file
casella di riepilogo
Vedi la voce relativa a "select".visualizzazione elenco
Visualizza un insieme di dati in un layout di tipo elenco o griglia.<div data-win-control="WinJS.UI.ListView"></div>
Riferimento: WinJS.UI.ListView
pulsante di opzione
Tipo di controllo di selezione che limita la selezione dell'utente a un singolo valore compreso in un insieme. A tale scopo, devi collegare ogni pulsante di un insieme di pulsanti di opzione assegnando a ognuno di essi lo stesso nome.<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>
Riferimento: input type=radio
intervallo
Vedi la voce relativa a "slider".casella di ricerca (solo Windows)
Consente all'utente di eseguire query di ricerca e selezionare suggerimenti.<div data-win-control="WinJS.UI.SearchBox"></div>
Riferimento: WinJS.UI.SearchBox
selezione
Rappresenta una casella di riepilogo, una casella combinata o un elenco a discesa.<select> <option>Apple</option> <option>Banana</option> <option>Grape</option> <option>Orange</option> <option>Pear</option> <option>Watermelon</option> </select>
Riferimento: select
dispositivo di scorrimento
Fornisce un dispositivo di scorrimento per selezionare un valore numerico da un intervallo.<input type="range" />
Riferimento: input type=range
selezione ora (solo Windows)
Permette all'utente di specificare un'ora.
<div data-win-control="WinJS.UI.TimePicker"></div>
Riferimento: WinJS.UI.TimePicker
interruttore attiva/disattiva
Rappresenta un interruttore che può essere commutato tra due stati.<div data-win-control="WinJS.UI.ToggleSwitch"></div>
Riferimento: ToggleSwitch
Controlli di testo
casella di input email
Controllo di immissione a riga singola che accetta uno o più indirizzi email.<input type="email" />
Riferimento: input type=email
casella di testo su più righe
Vedi la voce relativa a "textarea".casella di input numeri
Controllo di immissione a riga singola che accetta un valore numerico.<input type="number" />
Riferimento: input type=number
casella di input di password
Controllo di immissione testo a riga singola simile al controllo di input di testo, con la differenza che il testo non viene visualizzato quando l'utente lo immette.<input type="password" />
Riferimento: input type=password
casella di modifica in formato RTF/casella di testo in formato RTF
Controllo che fornisce una funzionalità di input di testo, simile alla casella di immissione testo, ma in grado di gestire contenuto che include elementi figlio. Per creare una casella di testo in formato RTF, imposta la proprietà contentEditable degli elementi da modificare.<div contentEditable="true"> <!-- Elements to edit. --> </div>
Riferimento: contentEditable
casella di testo su una sola riga
Vedi la voce relativa a "text box".casella di testo
Controllo di immissione testo a riga singola.<input type="text" />
Riferimento: input type=text
area di testo
Controllo di immissione testo su più righe.<textarea></textarea>
Riferimento: textarea
casella di input URL
Controllo di immissione testo a riga singola che accetta gli URL.<input type="url" />
Riferimento: input type=url
Guida per l'utente
etichetta
Specifica un'etichetta per un altro elemento della pagina.<label for="otherControl">Label text</label> <input type="text" id="otherControl" />
Riferimento: label
descrizione comando (solo Windows)
Visualizza una descrizione comando avanzata che può supportare contenuto complesso (ad esempio immagini e testo formattato) per mostrare altre informazioni su un elemento.<div data-win-control="WinJS.UI.ToolTip"></div>
Riferimento: WinJS.UI.Tooltip
descrizione comando semplice
Visualizza una semplice descrizione comando di solo testo per un elemento.<element title="tooltip text" />
Riferimento: title
Argomenti correlati
Guida introduttiva: Aggiunta di controlli