Per impostare il cosidetto sticky footer (il footer fisso a fondo pagina) sono solito usare i CSS.
Su un progetto ho dovuto usare jQuery per impostarlo.
La soluzione è meno efficace e più lenta, ma come si dice spesso a "mali estremi, estremi rimedi".
Partiamo dall'HTML del footer:
<div id="footer">
FOOTER
</div>
</body>
</html>
In sostanza è l'ultimo componente prima della chiusura del body.
In un articolo precedente avevo mostrato come usare Navbar per creare un menu a tab in una pagina con jQuery Mobile.
Oggi vediamo come sia semplice impostare le icone e anche come usare quelle personalizzate piuttosto che quelle standard.
Senza ricominciare da capo, partiamo direttamente da un normale footer con navbar:
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#adv">Advertising</a></li>
</ul>
</div>
</div>
Per le icone abbiamo due impostazioni:
Di default la posizione è impostata su TOP, ma possiamo cambiarla così:
<div data-role="navbar" data-iconpos="bottom">
Per impostare l'icona invece:
<li><a href="#home" data-icon="home">Home</a></li>
<li><a href="#adv" data-icon="grid">Advertising</a></li>
Usiamo data-icon indicando un'icona.
Qui la lista di quelle standard.
Se invece vogliamo usarne una personale dobbiamo fare un pò di lavoro in più.
Create un nuovo file CSS e includetelo nell'header.