Le applicazioni mobili sono costruiti sulla semplicità delle intercettazioni cose che ci si desidera visualizzare.
Creazione di un pulsante in jQuery Mobile
Un pulsante in jQuery Mobile può essere creata in tre modi:
- Utilizzando il <input> elemento
- Utilizzando il <button> elemento con class="ui-btn"
- Utilizzando il <a> elemento con class="ui-btn"
Bottoni in jQuery Mobile vengono automaticamente in stile, che li rende attraenti e utilizzabili su entrambi i dispositivi mobili e computer desktop. Si consiglia di utilizzare il <a> elemento con class="ui-btn" per collegare tra le pagine, e <input> o <button> elementi per modulo di presentazione.
Nota: Prima della versione 1.4, abbiamo usato il data-role="button" attributo per creare un pulsante in jQuery Mobile. A partire da 1.4, il quadro classi usare i CSS per i pulsanti di stile (ad eccezione di <input> pulsanti).
Pulsanti di navigazione
Per creare un collegamento tra le pagine con i tasti, utilizzare il <a> elemento con class="ui-btn" :
Pulsanti raggruppati
jQuery Mobile fornisce un modo semplice per raggruppare i pulsanti insieme.
Utilizzare il data-role="controlgroup" attributo insieme con data-type="horizontal|vertical" in un elemento contenitore, per specificare se i pulsanti di gruppo orizzontale o verticale:
Esempio
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" class="ui-btn">Button 1</a>
<a href="#"
class="ui-btn">Button 2</a>
<a href="#"
class="ui-btn">Button 3</a>
</div>
Prova tu stesso " Per impostazione predefinita, i pulsanti raggruppati sono raggruppati in verticale senza margini e lo spazio tra di loro. E solo il primo e l'ultimo bottone ha gli angoli arrotondati, che crea un aspetto piacevole quando raggruppati insieme.
Pulsanti Indietro
Per creare un pulsante Indietro, utilizzare il data-rel="back" attributo (Nota: questo ignorerà del ancoraggio href valore):
Bottoni in linea
Per default, pulsanti occupano l'intera larghezza dello schermo. Se si desidera che un pulsante che è solo larga quanto il suo contenuto, o se si desidera due o più pulsanti di apparire fianco a fianco, aggiungere il "ui-btn-inline" class:
Altre classi CSS per pulsanti di collegamento
| Classe | Descrizione | Esempio |
|---|---|---|
| ui-btn-b | Cambia il colore del pulsante di uno sfondo nero con testo bianco (di default è sfondo grigio con testo nero). | Provalo |
| ui-corner-all | Aggiunge angoli arrotondati al pulsante | Provalo |
| ui-mini | Rende il pulsante più piccolo | Provalo |
| ui-shadow | Aggiunge ombre al pulsante | Provalo |
Se si desidera utilizzare più di una classe, separare ogni classe con uno spazio, come: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
Per impostazione predefinita, <input> pulsanti hanno ombra e gli angoli arrotondati. Il <a> e <button> elemento non lo fa.
Per un riferimento completo di classi CSS per gli stili comuni, visitare il nostro jQuery Mobile CSS classi di riferimento .
Il prossimo capitolo illustra come collegare le icone per i pulsanti.