jQuery Mobile - Guida rapida
JQuery Mobile è un framework di interfaccia utente, basato su jQuery Core e utilizzato per lo sviluppo di siti Web o applicazioni reattive accessibili su dispositivi mobili, tablet e desktop. Utilizza le funzionalità di jQuery e jQuery UI per fornire funzionalità API per applicazioni web mobili.
È stato sviluppato dal team del progetto jQuery nell'anno 2010 e scritto in JavaScript.
Perché utilizzare jQuery Mobile?
Crea applicazioni web che funzioneranno allo stesso modo su dispositivi mobili, tablet e desktop.
È compatibile con altri framework come PhoneGap, Whitelight, ecc.
Fornisce una serie di input di moduli touch-friendly e widget dell'interfaccia utente.
Il miglioramento progressivo offre una funzionalità unica a tutte le piattaforme mobili, tablet e desktop e aggiunge caricamenti di pagine efficienti e un supporto più ampio per i dispositivi.
Caratteristiche di jQuery Mobile
È costruito su jQuery Core e framework dell'interfaccia utente "scrivi meno, fai di più".
È un framework open source e compatibile con più piattaforme e più browser.
È scritto in JavaScript e utilizza le funzionalità di jQuery e jQuery UI per la creazione di siti ottimizzati per i dispositivi mobili.
Integra HTML5, CCS3, jQuery e jQuery UI in un unico framework per la creazione di pagine con script minimi.
Include il sistema di navigazione Ajax che utilizza transizioni di pagine animate.
Vantaggi di jQuery Mobile
È facile apprendere e sviluppare applicazioni se si conoscono le funzionalità HTML5 e CSS3.
È compatibile con più piattaforme e più browser, quindi non devi preoccuparti di scrivere codice diverso per ogni risoluzione del dispositivo.
Puoi creare il tema personalizzato utilizzando ThemeRoller senza scrivere la riga di codice. Supporta tutti i browser HTML5.
Utilizza HTML5 insieme a JavaScript per un facile sviluppo di applicazioni web.
È costruito in un modo che consente allo stesso codice di scalare automaticamente dallo schermo del cellulare allo schermo del desktop.
Svantaggi di jQuery Mobile
Ci sono opzioni limitate per i temi CSS, quindi i siti possono avere un aspetto simile che sono costruiti da questi temi.
Le applicazioni sviluppate utilizzando jQuery Mobile sono più lente sui cellulari.
Diventa più dispendioso in termini di tempo quando combini jQuery mobile con altri framework mobili.
Difficile fornire un design visivo personalizzato completo.
Non è possibile accedere a tutte le funzionalità di un dispositivo tramite JavaScript in un browser.
In questo capitolo, discuteremo come installare e configurare jQuery Mobile.
Scarica jQuery Mobile
Quando apri il collegamento jquerymobile.com/ , vedrai che ci sono due opzioni per scaricare la libreria mobile jQuery.
Custom Download - Fare clic su questo pulsante per scaricare una versione personalizzata della libreria.
Latest Stable - Fare clic su questo pulsante per ottenere la versione stabile e più recente della libreria mobile jQuery.
Download personalizzato con Download Builder
Utilizzando Download Builder, puoi creare una build personalizzata includendo solo le parti della libreria di cui hai bisogno. Quando scarichi questa nuova versione personalizzata di jQuery Mobile, vedrai la seguente schermata.
È possibile selezionare le librerie in base alle proprie esigenze e fare clic su Build My Download pulsante.
Download stabile
Fare clic sul pulsante Stabile , che porta direttamente a un file ZIP contenente i file CSS e JQuery, per l'ultima versione della libreria mobile jQuery. Estrai il contenuto del file ZIP in una directory mobile jQuery.
Questa versione contiene tutti i file comprese tutte le dipendenze, una vasta raccolta di demo e persino la suite di unit test della libreria. Questa versione è utile per iniziare.
Scarica jQuery Library da CDN
Un CDN (Content Delivery Network) è una rete di server progettati per fornire file agli utenti. Se si utilizza un collegamento CDN nella propria pagina Web, si sposta la responsabilità di ospitare i file dai propri server a una serie di quelli esterni. Questo offre anche il vantaggio che se un visitatore della tua pagina web ha già scaricato una copia di jQuery mobile dallo stesso CDN, non dovrà essere scaricata nuovamente. È possibile includere i seguenti file CDN nel documento HTML.
//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Stiamo utilizzando le versioni CDN della libreria durante questo tutorial. Usiamo il server AMPPS (AMPPS è uno stack WAMP, MAMP e LAMP di Apache, MySQL, MongoDB, PHP, Perl e Python) per eseguire tutti i nostri esempi.
Esempio
Di seguito è riportato un semplice esempio di jQuery Mobile.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "pageone">
<div data-role = "header">
<h1>Header Text</h1>
</div>
<div data-role = "main" class = "ui-content">
<h2>Welcome to TutorialsPoint</h2>
</div>
<div data-role = "footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
I dettagli del codice sopra sono:
Questo codice è specificato all'interno dell'elemento head.
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
Il viewport viene utilizzato per specificare (dal browser) per visualizzare il livello di zoom e la dimensione della pagina.
content = "width = device-width" viene utilizzato per impostare la larghezza in pixel della pagina o del dispositivo dello schermo.
initial-scale = 1 imposta il livello di zoom iniziale, quando la pagina viene caricata per la prima volta.
Includere i seguenti CDN
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Il contenuto all'interno del tag <body> è una pagina visualizzata nel browser.
<div data-role = "page">
...
</div>
data-role = "header" crea l'intestazione nella parte superiore della pagina.
data-role = "main" viene utilizzato per definire il contenuto della pagina.
data-role = "footer" crea il piè di pagina nella parte inferiore della pagina.
class = "ui-content" include il riempimento e il margine all'interno del contenuto della pagina.
Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:
Salva il codice html sopra come simple_example.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/simple_example.html e verrà visualizzato il seguente output.
L'utente può interagire con le pagine jQuery Mobile, che raggruppa il contenuto in visualizzazioni logiche e visualizzazioni di pagina. La visualizzazione della pagina può essere animata utilizzando le transizioni di pagina. È possibile creare più pagine utilizzando un documento HTML e quindi non è necessario richiedere il contenuto al server.
La tabella seguente mostra i tipi di pagine in dettaglio.
Sr.No. | Tipo e descrizione |
---|---|
1 | Pagina singola Una singola pagina viene creata nel documento HTML utilizzando un modo standard di scrivere un modello. |
2 | Modello multipagina È possibile includere più pagine nel singolo documento HTML, che viene caricato insieme aggiungendo più div con data-role = "page" . |
3 | Pagina Dialoghi Le finestre di dialogo modali aprono il contenuto in una sovrapposizione interattiva sopra la pagina. |
Convenzioni, non requisiti
Gli elementi dell'attributo data-role come intestazione, piè di pagina, pagina e contenuto vengono utilizzati per fornire il formato e la struttura di base di una pagina.
Per i documenti a pagina singola, il wrapper della pagina richiesto per l'inizializzazione automatica è impostato come opzionale.
L'elemento strutturale può essere escluso per una pagina web con layout personalizzato.
Per gestire le pagine, il wrapper della pagina viene iniettato dal framework quando non è incluso dal markup.
Precaricamento delle pagine
Includendo l'attributo data-prefetch , possiamo precaricare le pagine nel DOM nei modelli a pagina singola. Per maggiori informazioni clicca qui .
Cache DOM
Quando la memoria del browser si riempie in DOM, rallenta il browser mobile o potrebbe bloccarsi a causa del caricamento di più pagine. C'è un metodo semplice per mantenere in ordine il DOM:
Quando una pagina viene caricata tramite ajax, indica di rimuovere la pagina dal DOM quando si reindirizza a un'altra pagina.
La pagina precedente che hai visitato può essere recuperata dalla cache quando la visiti di nuovo.
Invece di rimuovere le pagine, puoi dire a jQuery mobile di tenerlo in DOM utilizzando la seguente riga:
$.mobile.page.prototype.options.domCache = true;
Imposta l'opzione domCache come true nel plug-in della pagina per mantenere tutte le pagine nel DOM, che è stato visitato in precedenza.
pageContainerElement.page({ domCache: true });
jQuery Mobile fornisce una serie di icone integrate, che possono essere utilizzate con pulsanti, pulsanti di visualizzazione elenco che renderanno i pulsanti più attraenti.
La tabella seguente elenca alcune delle icone utilizzate nel framework jQuery Mobile.
Sr.No. | Area delle icone e descrizione |
---|---|
1 | Set di icone Imposta l'icona nel pulsante. |
2 | Icone di posizionamento Specifica la posizione dell'icona nel pulsante. |
3 | Solo icona Visualizza solo un'icona nel pulsante. |
4 | Ombra dell'icona Aggiunge un'ombra icona nel tuo pulsante. |
5 | Rimozione del cerchio Rimuove il cerchio grigio attorno all'icona. |
6 | Icone nere o bianche Cambia il colore delle icone in bianco o nero. |
7 | Combinazione di alt e nodisc Combina le classi alt e nodisc all'icona. |
Consente di modificare i valori delle proprietà che si verificano durante la durata specificata e altera il comportamento di un elemento da uno stato a un altro applicando stili diversi per ogni stato.
La tabella seguente elenca alcune delle transizioni di pagina utilizzate nel framework jQuery Mobile -
Sr.No. | Transizione e descrizione | Per Pages | Per i dialoghi |
---|---|---|---|
1 | fade Puoi rendere gli elementi in dissolvenza in entrata e in uscita dalla visibilità. |
Dissolvenza pagina | Finestra di dialogo Dissolvenza |
2 | flip Capovolgi gli elementi dalla parte posteriore in avanti alla pagina successiva. |
Capovolgi pagina | Finestra di dialogo Capovolgi |
3 | pop Puoi creare una finestra popup. |
Pagina pop | Finestra di dialogo Pop |
4 | flow Visualizza la pagina successiva tenendo lontana la pagina corrente. |
Pagina flusso | Finestra di dialogo Flusso |
5 | slide Puoi far scorrere la pagina da destra a sinistra. |
Pagina diapositiva | Dialogo diapositiva |
6 | slidefade Fa scorrere la pagina da destra a sinistra e sfuma nella pagina successiva. |
Pagina in dissolvenza | Finestra di dialogo Slidefade |
7 | slideup Fa scorrere la pagina dal basso verso l'alto. |
Pagina a scorrimento | Finestra di dialogo a scorrimento |
8 | slidedown Fa scorrere la pagina dall'alto verso il basso. |
Pagina a scorrimento | Finestra di dialogo a scorrimento |
9 | turn Puoi passare alla pagina successiva. |
Voltare pagina | Turn Dialog |
10 | none Non è possibile utilizzare alcun effetto di transizione utilizzando questo attributo. |
Nessuna pagina | Nessuna finestra di dialogo |
Impostazione della transizione e configurazione globale
Per impostazione predefinita, le pagine avranno fadetransizione nel quadro. Puoi usare transizioni personalizzate aggiungendo il filedata-transitionattributo al collegamento. È possibile utilizzare diversi effetti di transizione predefiniti per la pagina utilizzandodefaultPageTransitionopzione a livello globale. Per i dialoghi, puoi usaredefaultDialogTransition opzione.
Transizione di fallback
Tutte le transizioni supportano le trasformazioni 3D tranne la transizione in dissolvenza. I dispositivi che non supportano la trasformazione 3D, dovranno utilizzare la transizione in dissolvenza. Alcuni browser non supportano le trasformazioni 3D per ogni tipo di transizione, quindi puoi utilizzare l'estensionefade come fallback di transizione predefinito.
Scorrimento massimo per transizioni
Le transizioni sono impostate su Nessuno quando si scorre da o verso una pagina e la posizione di scorrimento sarà tre volte l'altezza dello schermo del dispositivo. A volte, potresti rallentare nella risposta o il browser potrebbe bloccarsi quando fai clic su un elemento di navigazione; quindi per evitare ciò stiamo usando la posizione di scorrimento per la transizione usandogetMaxScrollForTransition funzione.
Larghezza massima per le transizioni
È possibile disabilitare la transizione quando la larghezza della finestra è maggiore della larghezza in pixel. È possibile configurare la larghezza massima per le transizioni utilizzando il$.mobile.maxTransitionWidthopzione globale, che è impostata su false per impostazione predefinita. Accetta valori come larghezza in pixel o valore falso e la transizione sarà impostata su nessuno se non è un valore falso quando la finestra è superiore al valore specificato.
Transizione della stessa pagina
È possibile aggiungere le transizioni alla pagina corrente utilizzando il allowSamePageTransition opzione dei widget del contenitore della pagina change() metodo.
Creazione di transizioni personalizzate
È possibile creare le transizioni personalizzate nella pagina utilizzando il $.mobile.transitionHandlers opzione che espande la selezione delle transizioni sul sito Web o sull'applicazione.
I sistemi a griglia vengono utilizzati per creare layout di pagina attraverso una serie di righe e colonne che ospitano il contenuto.
La tabella sottostante mostra i tipi di griglie in dettaglio.
Sr.No. | Tipo e descrizione |
---|---|
1 | Griglia Il sistema a griglia mobile jQuery crea layout di pagina attraverso una serie di righe e colonne. |
2 | Pulsanti nelle griglie Raccolta di pulsanti in formato griglia in jQuery mobile. |
3 | Griglia reattiva personalizzata Lo stile della griglia di base può essere facilmente esteso al layout reattivo personalizzato utilizzando le media query in CSS. |
Un widget è un piccolo gadget o controllo della tua applicazione mobile jQuery. I widget possono essere molto utili in quanto ti consentono di mettere le tue applicazioni preferite sulla schermata iniziale per accedervi rapidamente.
La tabella seguente mostra i tipi di widget in dettaglio.
Sr.No. | Tipo e descrizione |
---|---|
1 | Bottoni Specifica un pulsante cliccabile che include contenuti come testo o immagini. |
2 | Casella di controllo Le caselle di controllo vengono utilizzate quando è necessario selezionare più di un'opzione. |
3 | Radiobox I pulsanti di opzione vengono utilizzati quando tra molte opzioni, è necessario selezionare solo un'opzione. |
4 | Date picker Si concentra sull'input per aprire un calendario interattivo in una piccola sovrapposizione. |
5 | Collassabile Comprimibile ti consente di espandere o comprimere il contenuto ogni volta che fai clic su di esso. È molto utile per il dispositivo mobile, che presenta un breve contenuto. |
6 | Gruppo di controllo I gruppi di controllo forniscono una serie di pulsanti per specificare un singolo blocco che assomiglia a un componente di navigazione. |
7 | Filtrabile Utilizzando l' attributo data-filter = "true" , puoi filtrare i figli di qualsiasi elemento. |
8 | Flipswitch Flip Switch consente di disattivare / attivare o true / false l'interruttore facendo clic su di esso per l'input in stile booleano. |
9 | Visualizzazione elenco Lo scopo del componente listview è di rendere il contenuto complesso e personalizzato negli elenchi. |
10 | Caricatore JQuery Mobile offre diversi modi per caricare gli stati su un elemento. |
11 | Navbar Il widget della barra di navigazione è un insieme di pulsanti che ti collega ad altre pagine o sezioni web. |
12 | Pannelli I pannelli vengono utilizzati per visualizzare i componenti DOM nella casella. |
13 | Popup Popup è un'interfaccia utente che appare all'interno di una piccola finestra per visualizzare testo, immagini e altri contenuti. |
14 | Rangeslider Il widget Rangeslider fornisce un paio di maniglie che consentono di selezionare un intervallo di valori numerici. |
15 | Seleziona menu Un menu di selezione fornisce varie opzioni sotto forma di elenco a discesa, da cui un utente può selezionare una o più opzioni. |
16 | Slider Il dispositivo di scorrimento consente di scegliere un valore facendo scorrere la maniglia del dispositivo di scorrimento. |
17 | tavolo jQuery Mobile utilizza la tabella per rappresentare i dati in termini di righe e colonne, ovvero visualizza i dati in formato tabulare. |
18 | Tab Il widget delle schede è l'estensione del widget delle schede dell'interfaccia utente di jQuery, che accetta tutti i metodi e le opzioni. |
19 | L'immissione di testo Il tag <input> viene utilizzato per dichiarare un elemento di input, un controllo che consente all'utente di immettere dati. |
20 | Barra degli strumenti Il widget della barra degli strumenti mobile di jQuery ti consente di creare intestazioni e piè di pagina. |
jQuery Mobile permette di creare pagine web dinamiche. Utilizzando gli eventi, è possibile impostare un processo basato sugli eventi sugli elementi, che viene attivato dall'interazione dell'utente come il clic del mouse, il passaggio del mouse su un elemento, la pressione di un tasto sulla tastiera, ecc.
La seguente tabella elenca alcuni degli eventi per i dispositivi mobili, che sono supportati da jQuery Mobile.
Sr.No. | Descrizione dell'evento |
---|---|
1 | jQuery Mobile Events Risponde all'interazione dell'utente quando l'utente fa clic su una determinata pagina o passa il mouse su un elemento, ecc. |
2 | jQuery Touch Events Fornisce eventi di tocco quando l'utente tocca lo schermo. |
3 | jQuery Scroll Events Attiva gli eventi di scorrimento quando l'utente scorre su e giù. |
4 | Evento di orientamento jQuery Attiva l'evento di orientamento quando l'utente ruota il dispositivo verticalmente o orizzontalmente. |
5 | jQuery Page Events Fornisce gli eventi della pagina quando l'utente nasconde, crea, carica o scarica le pagine. |
La creazione di moduli è facile e molto flessibile, che sono costruiti con una combinazione di elementi e pulsanti di moduli standardizzati.
La tabella seguente mostra i tipi di modulo in dettaglio.
Sr.No. | Tipo e descrizione |
---|---|
1 | Modulo di base jQuery Mobile fornisce un sistema di layout potente, facile e versatile per i moduli, che combina stili di modulo, pulsante di input e supporto del cursore. |
2 | Input del modulo Il tag <input> è un controllo che consente all'utente di inserire dati. |
3 | Selezione modulo Sotto forma di opzione, viene fornito un elenco a discesa per il menu di selezione. |
4 | Modulo di scorrimento Il dispositivo di scorrimento consente di scegliere un valore facendo scorrere la maniglia del dispositivo di scorrimento. |
5 | Aggiornamento e inizializzazione automatica degli elementi del modulo Il metodo di aggiornamento viene utilizzato per aggiornare il nuovo stato del controllo del modulo da solo e aggiorna il controllo del modulo con JavaScript. |
Imposta diversi tipi di tema su pulsanti, barre di navigazione, blocchi, collegamenti e così via. Puoi impostare il tema utilizzando l' attributo data-theme .
La tabella seguente descrive l'uso della funzionalità del tema in diverse aree supportate da jQuery Mobile.
Sr.No. | Funzionalità e descrizione |
---|---|
1 | Temi Fornisce due diversi tipi di temi come il tema "a" e il tema "b" per personalizzare l'aspetto dell'applicazione. |
2 | Temi intestazione e piè di pagina nelle finestre di dialogo Imposta il tema per l'intestazione e il piè di pagina nella finestra di dialogo. |
3 | Pulsanti tematici, icone e popup Specifica il tema per pulsanti, icone e popup. |
4 | Pulsanti tematici nell'intestazione e nel piè di pagina Visualizza il tema per i pulsanti nell'intestazione e nel piè di pagina. |
5 | Barre di navigazione a tema Applica il tema per le barre di navigazione nell'intestazione o nel piè di pagina. |
6 | Pannelli tematici Puoi applicare il tema per il pannello. |
7 | Pulsante pieghevole a tema e pulsanti divisi Visualizza il tema per i pulsanti pieghevoli e divisi. |
8 | Elenchi di temi ed elenchi comprimibili Visualizza il tema per gli elenchi e gli elenchi comprimibili. |
9 | Forme pieghevoli Puoi applicare il tema ai moduli. |
jQuery CSS Classes
È possibile utilizzare diversi tipi di classi CSS per definire gli elementi come descritto nelle sezioni seguenti.
Classi globali
Le seguenti classi possono essere utilizzate come classi globali sui widget jQuery Mobile:
Sr.No. | Classe e descrizione |
---|---|
1 | ui-corner-all Visualizza gli elementi con angoli arrotondati. |
2 | ui-shadow Visualizza l'ombra per gli elementi. |
3 | ui-overlay-shadow Visualizza l'ombra di sovrapposizione per gli elementi. |
4 | ui-mini Visualizza gli elementi più piccoli. |
Classi di pulsanti
La tabella seguente elenca le classi di pulsanti utilizzate con gli elementi di ancoraggio o pulsante:
Sr.No. | Classe e descrizione |
---|---|
1 | ui-btn Specifica che l'elemento verrà designato come pulsante. |
2 | ui-btn-inline Mostra il pulsante come elemento in linea che salva lo spazio necessario per l'etichetta. |
3 | ui-btn-icon-top Posiziona l'icona sopra il testo. |
4 | ui-btn-icon-right Posiziona l'icona a destra del testo. |
5 | ui-btn-icon-bottom Posiziona l'icona sotto il testo. |
6 | ui-btn-icon-left Posiziona l'icona a sinistra del testo. |
7 | ui-btn-icon-notext Mostra l'unica icona. |
8 | ui-btn-a|b Visualizza il colore del pulsante ("a" sarà il colore di sfondo predefinito, ovvero grigio e "b" cambierà il colore di sfondo in nero). |
Classi di icone
La tabella seguente elenca le classi di icone utilizzate con gli elementi di ancoraggio o pulsante:
Sr.No. | Classe e descrizione |
---|---|
1 | ui-icon-action Mostra l'icona dell'azione. |
2 | ui-icon-alert Visualizza il punto esclamativo all'interno di un triangolo. |
3 | ui-icon-arrow-d-l Specifica il basso con la freccia sinistra. |
4 | ui-icon-arrow-d-r Specifica in basso con la freccia destra. |
5 | ui-icon-arrow-u-l Specifica in alto con la freccia sinistra. |
6 | ui-icon-arrow-u-r Specifica in alto con la freccia destra. |
7 | ui-icon-arrow-l Specifica la freccia sinistra. |
8 | ui-icon-arrow-r Specifica la freccia destra. |
9 | ui-icon-arrow-u Specifica la freccia su. |
10 | ui-icon-arrow-d Specifica la freccia in basso. |
11 | ui-icon-bars Mostra le 3 barre orizzontali una sopra l'altra. |
12 | ui-icon-bullets Mostra i 3 proiettili orizzontali uno sopra l'altro. |
13 | ui-icon-carat-d Visualizza il carato in giù. |
14 | ui-icon-carat-l Visualizza il carato a sinistra. |
15 | ui-icon-carat-r Visualizza il carato a destra. |
16 | ui-icon-carat-u Visualizza il carato verso l'alto. |
17 | ui-icon-check Mostra l'icona del segno di spunta. |
18 | ui-icon-comment Specifica il commento o il messaggio. |
19 | ui-icon-forbidden Visualizza l'icona proibito. |
20 | ui-icon-forward Specifica l'icona avanti. |
21 | ui-icon-navigation Specifica l'icona di navigazione. |
22 | ui-icon-recycle Visualizza l'icona di riciclaggio. |
23 | ui-icon-refresh Mostra l'icona di aggiornamento. |
24 | ui-icon-tag Indica l'icona del tag. |
25 | ui-icon-video Indica l'icona del video o della fotocamera. |
Classi a tema
Fornisce due diversi tipi di temi come il tema "a" e il tema "b" per personalizzare l'aspetto dell'applicazione. Puoi creare le tue classi di temi aggiungendo la lettera campione (az). La tabella seguente elenca le classi di temi specificate dalla lettera a alla z.
Sr.No. | Classe e descrizione |
---|---|
1 | ui-bar-(a-z) Visualizza il colore della barra, inclusi intestazioni, piè di pagina e altre barre nella pagina. |
2 | ui-body-(a-z) Visualizza il colore per il blocco del contenuto inclusi listview, popup, cursori, pannelli, caricatori, ecc. |
3 | ui-btn-(a-z) Visualizza il colore del pulsante. |
4 | ui-group-theme-(a-z) Visualizza il colore per i gruppi di controllo, le visualizzazioni elenco e i set comprimibili. |
5 | ui-overlay-(a-z) Visualizza il colore di sfondo per popup, finestre di dialogo e contenitori di pagine. |
6 | ui-page-theme-(a-z) Visualizza il colore per le pagine. |
Classi di griglia
La tabella seguente elenca le classi di griglia che vengono utilizzate con la stessa larghezza, senza bordo, sfondo, margine o riempimento.
Sr.No. | Classe di griglia | Colonne | Larghezze delle colonne | Corrisponde a |
---|---|---|---|---|
1 | ui-grid-solo | 1 | 100% | ui-block-a |
2 | ui-grid-a | 2 | 50% / 50% | ui-block-a | b |
3 | ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a | b | c |
4 | ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a | b | c | d |
5 | ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a | b | c | d | e |
Pulsante
Specifica un pulsante cliccabile che include contenuti come testo o immagini utilizzando la classe ui-btn . È deprecato nella versione 1.4. Utilizza l' attributo ui-btn invece di utilizzare l'attributo data-role = "button" .
La tabella seguente elenca gli elementi del pulsante utilizzati con l'attributo data.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-corners Definisce se il pulsante deve contenere angoli arrotondati o meno. |
vero | falso |
2 | data-icon Definisce l'icona del pulsante. |
L'impostazione predefinita è nessuna icona |
3 | data-iconpos Definisce la posizione dell'icona. |
sinistra | a destra | top | parte inferiore |
4 | data-iconshadow Definisce se l'icona del pulsante deve contenere un'ombra o meno. |
vero | falso |
5 | data-inline Definisce se il pulsante deve essere in linea o meno. |
vero | falso |
6 | data-mini Definisce se il pulsante deve essere visualizzato in dimensioni minori o normali. |
vero | falso |
7 | data-shadow Definisce se il pulsante deve contenere un'ombra o meno. |
vero | falso |
8 | data-theme Visualizza il colore del tema per il pulsante. |
lettera (az) |
Casella di controllo
La tabella seguente elenca gli elementi della casella di controllo utilizzati con type = "checkbox".
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-mini Definisce se la casella di controllo deve essere visualizzata in dimensioni inferiori o normali. |
vero | falso |
2 | data-role Arresta lo stile delle caselle di controllo come pulsanti. |
nessuna |
3 | data-theme Visualizza il colore del tema per la casella di controllo. |
lettera (az) |
Collassabile
La tabella seguente elenca gli elementi comprimibili utilizzati con data-role = "collapsible" attributo.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-collapsed Indica se il contenuto deve essere chiuso o espanso. |
vero | falso |
2 | data-collapsed-cue-text Visualizza il feedback per gli utenti con software di lettura dello schermo. |
L'impostazione predefinita è la compressione del contenuto |
3 | data-collapsed-icon Definisce l'icona del pulsante pieghevole. |
L'icona predefinita è "più" |
4 | data-content-theme Visualizza il colore del tema per il contenuto pieghevole. |
lettera (az) |
5 | data-expanded-cue-text Visualizza il feedback per gli utenti con software di lettura dello schermo. |
L'impostazione predefinita è l'espansione del contenuto |
6 | data-expanded-icon Visualizza il pulsante comprimibile quando si espande il contenuto. |
L'icona predefinita è "meno" |
7 | data-iconpos Definisce la posizione dell'icona. |
sinistra | a destra | top | parte inferiore |
8 | data-inset Definisce se il pulsante pieghevole deve essere visualizzato con angoli e margini arrotondati o meno. |
vero | falso |
9 | data-mini Definisce se i pulsanti pieghevoli devono essere visualizzati in dimensioni più piccole o in dimensioni normali. |
vero | falso |
10 | data-theme Visualizza il colore del tema per il pulsante pieghevole. |
lettera (az) |
Set pieghevole
La tabella seguente elenca gli elementi dell'insieme comprimibili utilizzati con data-role = "collapsibleset" attributo.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-collapsed-icon Definisce l'icona del pulsante pieghevole. |
L'icona predefinita è "più" |
2 | data-content-theme Visualizza il colore del tema per il contenuto pieghevole. |
lettera (az) |
3 | data-expanded-icon Visualizza il pulsante comprimibile quando si espande il contenuto. |
L'icona predefinita è "meno" |
4 | data-iconpos Definisce la posizione dell'icona. |
sinistra | a destra | top | parte inferiore |
5 | data-inset Definisce se il pulsante pieghevole deve essere visualizzato con angoli e margini arrotondati o meno. |
vero | falso |
6 | data-mini Definisce se i pulsanti pieghevoli devono essere visualizzati in dimensioni più piccole o in dimensioni normali. |
vero | falso |
7 | data-theme Visualizza il colore del tema per il pulsante pieghevole. |
lettera (az) |
Gruppo di controllo
La tabella seguente elenca gli elementi del gruppo di controllo utilizzati con data-role = "controlgroup" attributo -
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-exclude-invisible Definisce se escludere i bambini invisibili nell'assegnazione degli angoli arrotondati. |
vero | falso |
2 | data-mini Definisce se il gruppo deve essere visualizzato in dimensioni più piccole o in dimensioni normali. |
vero | falso |
3 | data-theme Visualizza il colore del tema per il gruppo di controllo. |
lettera (az) |
4 | data-type Indica se il gruppo deve essere visualizzato in formato orizzontale o verticale. |
orizzontale | verticale |
Dialogo
La tabella seguente elenca gli elementi di dialogo utilizzati con data-dialog="true" attributo.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-close-btn Definisce la posizione del pulsante di chiusura. |
sinistra | a destra | nessuna |
2 | data-close-btn-text Definisce il testo per il pulsante di chiusura. |
testo |
3 | data-corners Definisce se la finestra di dialogo deve essere visualizzata con angoli arrotondati o meno. |
vero | falso |
4 | data-dom-cache Indica se la cache DOM deve svuotare o meno le singole pagine. |
vero | falso |
5 | data-overlay-theme Definisce il colore di sovrapposizione della pagina di dialogo. |
lettera (az) |
6 | data-theme Definisce il colore del tema della pagina di dialogo. |
lettera (az) |
7 | data-title Definisce il titolo della pagina di dialogo. |
testo |
Aumento
La tabella seguente elenca gli elementi di miglioramento utilizzati con data-enhance="false" or data-ajax = "false" attributo.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-enhance Puoi applicare uno stile alla pagina impostando questo attributo su "true". Non è possibile applicare uno stile alla pagina se è impostato su "false". |
vero | falso |
2 | data-ajax Indica se le pagine devono essere caricate da Ajax o meno. |
vero | falso |
Barra degli strumenti fissa
La tabella seguente elenca gli elementi della barra degli strumenti utilizzati con data-position = "fixed" attributo.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-disable-page-zoom Definisce se l'utente è in grado di ridimensionare / ingrandire la pagina o meno. |
vero | falso |
2 | data-fullscreen Definisce che le barre degli strumenti devono essere posizionate in alto e / o in basso. |
vero | falso |
3 | data-tap-toggle Indica se l'utente può attivare o meno la visibilità della barra degli strumenti sui tocchi. |
vero | falso |
4 | data-transition Mostra un effetto di transizione quando tocchi o fai clic sull'elemento. |
diapositiva | dissolvenza | nessuna |
5 | data-update-page-padding Aggiorna il riempimento della pagina utilizzando eventi di ridimensionamento, transizione e aggiornamento del layout. |
vero | falso |
6 | data-visible-on-page-show Definisce la visibilità della barra degli strumenti quando viene mostrata la pagina principale. |
vero | falso |
Flip interruttore a levetta
La tabella seguente elenca gli elementi di commutazione di inversione utilizzati con data-role = "flipswitch" attributo -
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-mini Definisce se lo switch deve essere visualizzato in dimensioni minori o normali. |
vero | falso |
2 | data-on-text Definisce il testo "on" sull'interruttore a scorrimento. |
L'impostazione predefinita è "on" |
3 | data-off-text Definisce il testo "off" sull'interruttore flip. |
L'impostazione predefinita è "off" |
Piè di pagina
La tabella seguente elenca gli elementi del piè di pagina utilizzati con l' attributo data-role = "footer" -
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-id Definisce l'ID univoco. |
testo |
2 | data-position Definisce se il piè di pagina deve essere posizionato in fondo o in linea con il contenuto della pagina. |
in linea | fisso |
3 | data-fullscreen Definisce se il piè di pagina deve essere posizionato in fondo e sopra il contenuto della pagina o meno. |
vero | falso |
4 | data-theme Definisce il colore del tema del piè di pagina. |
lettera (az) |
Intestazione
La tabella seguente elenca gli elementi di intestazione utilizzati con data-role = "header" attributo.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-id Definisce l'ID univoco. |
testo |
2 | data-position Definisce se l'intestazione deve essere posizionata in fondo o in linea con il contenuto della pagina. |
in linea | fisso |
3 | data-fullscreen Definisce se l'intestazione deve essere posizionata in fondo e sopra il contenuto della pagina o meno. |
vero | falso |
4 | data-theme Definisce il colore del tema dell'intestazione. |
lettera (az) |
Ingressi
La tabella seguente elenca gli elementi di input utilizzati con type = "text|search|etc" attributo.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-clear-btn Definisce se l'elemento di input deve contenere un pulsante di cancellazione o meno. |
vero | falso |
2 | data-clear-btn-text Definisce il testo per il pulsante cancella. |
testo |
3 | data-mini Definisce se l'input deve essere visualizzato in dimensioni più piccole o in dimensioni normali. |
vero | falso |
4 | data-role Smette di definire l'input o le aree di testo come pulsanti. |
nessuna |
5 | data-theme Definisce il colore del tema dell'elemento di input. |
lettera (az) |
Link
La tabella seguente elenca gli elementi di collegamento utilizzati con jQuery Mobile.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-ajax Indica se le pagine devono essere caricate tramite Ajax o meno. |
vero | falso |
2 | data-direction Viene utilizzato per la transizione inversa. |
inversione |
3 | data-dom-cache Indica se la cache del DOM jQuery deve essere pulita o meno per le pagine. |
vero | falso |
4 | data-prefetch Viene utilizzato per precaricare le pagine nel DOM. |
vero | falso |
5 | data-rel Specifica il comportamento del collegamento. |
indietro | dialogo | esterno | apparire |
6 | data-transition Definisce il passaggio da una pagina all'altra. |
dissolvenza | capovolgere | flusso | pop | diapositiva | slidedown | slidefade | slideup | girare | nessuna |
7 | data-position-to Definisce la posizione delle caselle popup. |
origine | selettore jQuery | finestra |
Elenco
La tabella seguente mostra gli elementi dell'elenco utilizzati con data-role = "listview" attributo.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-autodividers Divide automaticamente l'elenco. |
vero | falso |
2 | data-count-theme Definisce il colore del tema dell'elemento count. |
lettera (az) |
3 | data-divider-theme Definisce il colore del tema per il divisore di elenco. |
lettera (az) |
4 | data-filter Viene utilizzato per filtrare i valori dell'elenco nella casella di ricerca. |
vero | falso |
5 | data-filter-placeholder Definisce del testo all'interno della casella di ricerca. |
testo |
6 | data-filter-theme Definisce il colore del tema per il filtro di ricerca. |
lettera (az) |
7 | data-icon Fornisce l'icona per l'elenco. |
L'impostazione predefinita è nessuna icona |
8 | data-inset Definisce se l'elenco deve essere visualizzato con angoli e margini arrotondati o meno. |
vero | falso |
9 | data-split-icon Definisce l'icona per il pulsante di divisione. |
L'icona predefinita è "freccia-r" |
10 | data-split-theme Definisce il colore del tema per il pulsante di divisione. |
lettera (az) |
11 | data-theme Definisce il colore del tema per l'elenco. |
lettera (az) |
Voce di elenco
La tabella seguente mostra gli elementi della voce di elenco utilizzati con data-role = "listview" attributo.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-filtertext Viene utilizzato per filtrare i valori dell'elenco utilizzando il testo nella casella di ricerca. |
testo |
2 | data-icon Fornisce l'icona per l'elemento dell'elenco. |
L'impostazione predefinita è nessuna icona |
3 | data-role Definisce il divisore per gli elementi dell'elenco. |
list-divisore |
4 | data-theme Definisce il colore del tema per l'elemento dell'elenco. |
lettera (az) |
Navbar
La tabella seguente elenca gli elementi della barra di navigazione utilizzati con data-role = "navbar" attributo.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-icon Fornisce l'icona per l'elemento dell'elenco. |
L'impostazione predefinita è nessuna icona |
2 | data-iconpos Definisce la posizione dell'icona. |
sinistra | a destra | top | fondo | notext |
Pagina
La tabella seguente elenca gli elementi della pagina utilizzati con data-role = "page" attributo.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-dom-cache Indica se la cache DOM deve svuotare o meno le singole pagine. |
vero | falso |
2 | data-overlay-theme Definisce il colore di sovrapposizione delle pagine di dialogo. |
lettera (az) |
3 | data-theme Definisce il colore del tema per la pagina. |
lettera (az) |
4 | data-title Fornisce il titolo della pagina. |
L'impostazione predefinita è nessuna icona |
5 | data-url Viene utilizzato per aggiornare l'URL. |
url |
Apparire
La tabella seguente elenca gli elementi popup utilizzati con data-role = "popup" attributo.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-corners Definisce se il popup deve essere visualizzato con angoli e margini arrotondati o meno. |
vero | falso |
2 | data-dismissible Definisce se il popup deve essere chiuso facendo clic all'esterno o meno. |
vero | falso |
3 | data-history Definisce se il popup deve visualizzare la cronologia dell'elemento quando viene aperto. |
vero | falso |
4 | data-overlay-theme Definisce il colore di sovrapposizione della finestra popup. |
lettera (az) |
5 | data-shadow Visualizza l'ombra per la finestra popup. |
vero | falso |
6 | data-theme Definisce il colore del tema per la finestra popup. |
lettera (az) |
7 | data-tolerance Definisce i bordi della finestra. |
30, 15, 30, 15 |
Pulsante radio
La tabella seguente elenca gli elementi del pulsante di opzione utilizzati con type = "radio" attributo.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-mini Definisce se il pulsante deve essere visualizzato in dimensioni minori o normali. |
vero | falso |
2 | data-role Arresta lo stile dei pulsanti di opzione come pulsanti avanzati. |
nessuna |
3 | data-theme Definisce il colore del tema per il pulsante di opzione. |
lettera (az) |
Selezionare
La tabella seguente elenca gli elementi selezionati utilizzati con jQuery Mobile.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-icon Fornisce l'icona per l'elemento selezionato. |
L'impostazione predefinita è "freccia-d" |
2 | data-iconpos Definisce la posizione dell'icona. |
sinistra | a destra | top | parte inferiore |
3 | data-inline Definisce se il pulsante deve essere in linea o meno. |
vero | falso |
4 | data-mini Definisce se select deve essere visualizzato in dimensioni più piccole o in dimensioni normali. |
vero | falso |
5 | data-native-menu Usa il menu personalizzato quando è stato impostato su false. |
vero | falso |
6 | data-overlay-theme Definisce il colore di sovrapposizione per il menu di selezione personalizzato. |
lettera (az) |
7 | data-placeholder Viene utilizzato per impostare un elemento di opzione di selezione non nativa. |
vero | falso |
8 | data-role Arresta lo stile degli elementi selezionati come pulsanti. |
nessuna |
9 | data-theme Visualizza il colore del tema per gli elementi selezionati. |
lettera (az) |
Slider
La tabella seguente elenca gli elementi di scorrimento utilizzati con type = "range" attributo.
Sr.No. | Attributo dei dati e descrizione | Valore |
---|---|---|
1 | data-highlight Evidenzia il cursore. |
vero | falso |
2 | data-mini Definisce se il dispositivo di scorrimento deve essere visualizzato in dimensioni inferiori o regolari. |
vero | falso |
3 | data-role Arresta lo stile dei controlli di scorrimento come pulsanti. |
nessuna |
4 | data-theme Visualizza il colore del tema per il controllo del dispositivo di scorrimento. |
lettera (az) |
5 | data-track-theme Visualizza il colore del tema per la traccia di scorrimento. |
lettera (az) |