Barra degli strumenti jQuery Mobile

Barra degli strumenti jQuery Mobile

Gli elementi della barra degli strumenti sono spesso posizionati nella testa di pagina e nel piede di pagina per realizzare la navigazione "già visitata":

Barra di titolo

La testa di pagina di solito contiene il titolo/LOGO della testa di pagina o uno a due pulsanti (solitamente pulsante di pagina iniziale, opzioni o pulsante di ricerca).

Puoi aggiungere pulsanti sia alla sinistra che alla destra della testa di pagina.

Il codice seguente aggiungerà un pulsante alla sinistra del testo del titolo della testa di pagina e un altro pulsante alla destra:

Esempio

<div data-role="header">
  <a href="#" data-role="button">Pagina iniziale</a>
  <h1>Benvenuti nel mio homepage</h1>
  <a href="#" data-role="button">Cerca</a>
</div>

Prova personalmente

Il codice seguente aggiungerà un pulsante alla sinistra del titolo della testa di pagina:

<div data-role="header">
  <a href="#" data-role="button">Pagina iniziale</a>
  <h1>Benvenuti nel mio homepage</h1>
</div>

Ma, se metti un pulsante collegamento dopo l'elemento <h1>, non verrà visualizzato nel testo destro. Per aggiungere un pulsante alla destra del titolo della testa di pagina, specifica il nome della classe "ui-btn-right":

Esempio

<div data-role="header">
  <h1>Benvenuti nel mio homepage</h1>
  <a href="#" data-role="button" class="ui-btn-right">Cerca</a>
</div>

Prova personalmente

Suggerimento:La testa di pagina può contenere un pulsante o due, ma il piede di pagina non ha limiti.

Barra del piede di pagina

Confronto alla testa di pagina, il piede di pagina è più flessibile - è più pratico e variabile, quindi può contenere il numero di pulsanti necessario:

Esempio

<div data-role="footer">
  <a href="#" data-role="button">Trasmetti su Weibo Sina</a>
  <a href="#" data-role="button">Trasmetti su Weibo Tencent</a>
  <a href="#" data-role="button">Trasmetti su QQ Space</a>
</div>

Prova personalmente

Nota:Lo stile del piè di pagina è diverso dallo stile della testata (viene tolto un po' di spazi interni e vuoti, e i pulsanti non sono centrati). Se si desidera correggere questo problema, impostare la classe "ui-btn" nel piè di pagina:

Esempio

<div data-role="footer" class="ui-btn">

Prova personalmente

Puoi anche scegliere di combinare i pulsanti orizzontalmente o verticalmente nel piè di pagina:

Esempio

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Trasmetti su Weibo Sina</a>
    <a href="#" data-role="button" data-icon="plus">Trasmetti su Weibo Tencent</a>
    <a href="#" data-role="button" data-icon="plus">Trasmetti su QQ Space</a>
  </div>
</div>

Prova personalmente

Posizionamento della testata e del piè di pagina

Ci sono tre modi per posizionare la testata e il piè di pagina:

  • Inline - Predefinito. La testata e il piè di pagina saranno posizionate in linea con il contenuto della pagina.
  • Fissa - La pagina e il piè di pagina rimarranno in alto e in basso nella pagina.
  • Schermo intero - Simile a fixed; la testata e il piè di pagina rimarranno in alto e in basso nella pagina, ma anche sopra il contenuto della pagina. È anche leggermente trasparente

Utilizzare l'attributo data-position per posizionare la testata e il piè di pagina:

Posizione inline (predefinita)

<div data-role="header" data-position="inline"</div>
<div data-role="footer" data-position="inline"</div>

Prova personalmente

Posizione fissa

<div data-role="header" data-position="fixed"</div>
<div data-role="footer" data-position="fixed"</div>

Prova personalmente

Se si desidera abilitare la posizione a schermo intero, utilizzare data-position="fixed" e aggiungere l'attributo data-fullscreen all'elemento:

Posizione a schermo intero

<div data-role="header" data-position="fixed" data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"} data-fullscreen="true"</div>

Prova personalmente

Suggerimento:La modalità fullscreen è ideale per foto, immagini e video.

Suggerimento:Per le posizioni fixed e fullscreen, il tocco dello schermo nasconde e mostra la testata e il piè di pagina.