Share via

Controlli per funzione (HTML)

  • Articolo

[ 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

    Guida introduttiva: Aggiunta di una barra dell'app

  • 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

    Esempio del controllo NavBar HTML

  • 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

    Esempio del controllo NavBar HTML

  • 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

    Esempio del controllo NavBar HTML

  • 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

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

    Guida introduttiva: Aggiunta di un controllo 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

    Guida introduttiva: Aggiunta di un controllo ListView

  • controllo JumpViewer
    Vedi zoom semantico

  • repeater
    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

    Esempio del controllo Repeater HTML

  • 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

    Guida introduttiva: Aggiunta di un riquadro a comparsa

  • 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

    Guida introduttiva: Aggiunta di una finestra di messaggio

  • 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

    Guida introduttiva: Disegno in un elemento 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

    Esempio del controllo Hub HTML

  • sezione hub (solo Windows)
    Consente di definire una sezione di un hub.

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

    Riferimento: WinJS.UI.HubSection

    Esempio del controllo Hub HTML

  • 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

    Esempio di ItemContainer HTML

  • 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

    Guida introduttiva: Uso dell'esplorazione a pagina singola

  • 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

Controlli di valutazione

Controlli di selezione

  • casella di controllo
    Alcuni controlli casella di controllo

    Rappresenta una casella di controllo selezionabile e deselezionabile dall'utente.

    <input type="checkbox" />

    Riferimento: input type=checkbox

    Guida introduttiva: Aggiunta di caselle di controllo

  • casella combinata
    Vedi la voce relativa a "select".

  • selezione data (solo Windows)
    Tema chiaro di DatePicker

    Imposta una data.

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

    Riferimento: DatePicker

    Guida introduttiva: Aggiunta di un controllo 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

    Guida introduttiva: Aggiunta di un controllo 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

    Esempio di controllo 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)
    Tema chiaro di TimePicker

    Permette all'utente di specificare un'ora.

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

    Riferimento: WinJS.UI.TimePicker

    Guida introduttiva: Aggiunta di un controllo 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

Elenco dei controlli

try.buildwinjs.com

Guida introduttiva: Aggiunta di controlli

Guida introduttiva: Aggiunta di controlli e stili WinJS

Modifiche all'API WinJS per Windows Phone