Condividi tramite

Elenco dei controlli (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 hanno accesso a una libreria di controlli completa che supporta lo sviluppo dell'interfaccia utente. Alcuni controlli hanno una rappresentazione visiva mentre altri vengono usati come contenitore per gli altri controlli o contenuti, ad esempio immagini ed elementi multimediali.

Questo argomento include un elenco alfabetico delle app di Windows Runtime comuni che usano controlli JavaScript.

A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z

A

  • a
    Specifica l'avvio o la destinazione di un link ipertestuale.

    <a href="url">Your text</a>

    Riferimento: a

  • 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

  • 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

B

  • 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"></button></div>

    Riferimento: WinJS.UI.BackButton

  • pulsante
    Controllo pulsante

    Rappresenta un controllo pulsante.

    <button>A button</button>

    - oppure -

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

    Riferimento: button, input type=button

    Guida introduttiva: Aggiunta di un pulsante

C

  • 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

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

  • 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
    Fornisce un menu leggero che offre agli utenti l'accesso ad azioni (come comandi degli Appunti) su testo o oggetti dell'interfaccia utente nelle app di Windows Store.

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

    Riferimento: Windows.UI.Popups.PopupMenu

D

E

  • casella di input email
    Controllo di immissione a riga singola che accetta uno o più indirizzi email.

    <input type="email" />

    Riferimento: input type=email

F

  • caricamento file
    Crea un oggetto di upload del file con una casella di testo e un pulsante Cerca.

    <input type="file" />

    Riferimento: input type=file

  • riquadro flessibile
    Definisce un layout 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

  • visualizzazione miniature
    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

  • 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

G

  • 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

  • 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

H

  • controllo HTML
    Visualizza contenuto da una pagina HTML.

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

    Riferimento: WinJS.UI.HtmlControl

  • 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

  • collegamento ipertestuale
    Vedi la voce relativa ad "a".

I

  • iframe
    Cornice mobile in linea che può visualizzare un altro documento.

    <iframe src="url" />

    Riferimento: iframe

  • img
    Visualizza un'immagine.

    <img src="url" />

    Riferimento: img

  • 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.ItemContainer

    Esempio di ItemContainer HTML

J

  • visualizzazione jump
    Vedi la voce relativa a "semantic zoom".

L

  • etichetta
    Specifica un'etichetta per un altro elemento della pagina.

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

    Riferimento: label

  • 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

M

  • elemento multimediale
    Vedi le voci relative ad "audio" e "video".

  • lettore multimediale
    Vedi le voci relative ad "audio" e "video".

  • menu
    Visualizza un menu. (solo Windows)

    <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

  • casella di testo su più righe
    Vedi la voce relativa a "textarea".

N

  • 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

  • casella di input numeri
    Controllo di immissione a riga singola che accetta un valore numerico.

    <input type="number" />

    Riferimento: input type=number

P

  • 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

  • visualizzazione scorrevole con panoramica
    Vedi la voce relativa a "scroll view".

  • casella di input 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

  • 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

  • menu popup
    Vedi la voce relativa a "context menu" .

  • barra di stato
    Stili dei controlli di stato

    Visualizza una barra indicante che è in corso un'operazione. L'anello indeterminato non è supportato su Windows Phone 8.1.

    <progress />

    Riferimento: progress

    Guida introduttiva: Aggiunta di controlli di stato

  • 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

    Guida introduttiva: Aggiunta di controlli di stato

  • pulsante di comando
    Vedi la voce relativa a "button".

R

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

  • valutazione (solo Windows)
    Controllo di valutazione

    Consente di valutare un contenuto o visualizzare le valutazioni esistenti.

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

    Riferimento: WinJS.UI.Rating

    Guida introduttiva: Aggiunta di classificazioni

  • 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

  • pulsante Reset
    Pulsante Reset

    Reimposta i dati in un modulo.

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

    Riferimento: button, input type=reset

    Guida introduttiva: Aggiunta di un pulsante

  • casella di modifica/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

S

  • 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

  • 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

  • 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

  • Riquadro a comparsa Impostazioni (solo Windows)
    Fornisce accesso alle impostazioni dell'app.

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

    Riferimento: SettingsFlyout

  • casella di testo su una sola riga
    Vedi la voce relativa a "text box".

  • dispositivo di scorrimento
    Fornisce un dispositivo di scorrimento per selezionare un valore numerico da un intervallo.

    <input type="range" />

    Riferimento: input type=range

  • 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

  • pulsante di invio
    Controllo pulsante di invio

    Crea un pulsante che, se selezionato, invia il modulo.

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

    Riferimento: button, input type=submit

    Guida introduttiva: Aggiunta di un pulsante

  • 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

T

  • 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

  • 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

  • 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

  • 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

U

  • casella di input URL
    Controllo di immissione testo a riga singola che accetta gli URL.

    <input type="url" />

    Riferimento: input type=url

V

  • video
    Specifica il contenuto video da riprodurre in un documento.

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

    Riferimento: video

  • 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

W

  • visualizzazione Web
    Vedi la voce relativa a "iframe".

Z

  • visualizzazione scorrevole con zoom
    Vedi la voce relativa a "scroll view".

Argomenti correlati

try.buildwinjs.com