jQuery Mobile Barre degli strumenti
gli elementi della barra degli strumenti sono spesso collocati all'interno di intestazioni e piè di pagina - per la navigazione "facile accesso":
Header Bar
L'intestazione si trova nella parte superiore della pagina e di solito contengono una pagina del titolo / logo o uno o due pulsanti (in genere per la casa, le opzioni o la ricerca).
È possibile aggiungere pulsanti a sinistra e / oa destra nell'intestazione.
Il codice di seguito, aggiungerà un pulsante "Home" a sinistra e un pulsante "Cerca" a destra del testo del titolo di intestazione:
Esempio
<div data-role="header">
<a href="#"
class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div> Prova tu stesso " Il seguente codice solo aggiungere un pulsante alla sinistra del titolo di intestazione:
Esempio
<div data-role="header">
<a href="#"
class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div> Prova tu stesso " Il seguente codice solo aggiungere un pulsante alla destra del titolo di intestazione:
Esempio
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#"
class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div> Prova tu stesso " Un intestazione può contenere uno o due pulsanti, mentre il piè non ha limiti.
piè di pagina Bar
Il piè di pagina si trova nella parte inferiore della pagina.
Il piè è più flessibile rispetto all'intestazione - è più funzionale e mutevole tutta pagine, e può quindi contenere molti pulsanti come necessario:
Esempio
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div> Prova tu stesso " Suggerimento: i pulsanti nel piè di pagina non sono centrate per impostazione predefinita. Per risolvere questo problema, è sufficiente utilizzare i CSS:
È possibile anche i pulsanti di gruppo nel piè di pagina orizzontale o verticale:
Esempio
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup"
data-type="horizontal" >
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div> Prova tu stesso " Posizionamento intestazioni e piè
L'intestazione e il piè di pagina possono essere posizionate in tre modi:
- Inline - Default. Le intestazioni ei piè di pagina sono in linea con il contenuto della pagina
- Fixed - intestazioni e piè rimarranno posizionati nella parte superiore e inferiore della pagina
- Fullscreen - Si comporta come fisso; intestazioni e piè di pagina rimarranno posizionati in alto e in basso, ma anche il contenuto della pagina. E 'anche un po' See-Through
Utilizzare l'attributo posizione dati per posizionare le intestazioni e piè di pagina:
Inline posizione (Default)
<div data-role="header" data-position="inline" ></div>
<div data-role="footer"
data-position="inline" ></div> Prova tu stesso " posizione fissa
<div data-role="header" data-position="fixed" ></div>
<div data-role="footer"
data-position="fixed" ></div> Prova tu stesso " Per abilitare la posizione a schermo intero, l'uso dei dati di posizione = "fisso" e aggiungere l'attributo data-fullscreen all'elemento:
Posizione a tutto schermo
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div> Prova tu stesso " Suggerimento: La posizione è ideale per fullscreen foto, immagini e video.
Suggerimento: Toccando lo schermo si nascondere e mostrare le intestazioni e piè di pagina per entrambe le posizioni fisse e schermo intero.
Altri esempi
Visualizzazione solo l'icona nella barra degli strumenti
Utilizzando l' ui-btn-icon-notext class per visualizzare solo l'icona di pulsanti di intestazione e piè di pagina.