¿Es posible una barra de navegación inferior en el móvil jQuery que se parece a la barra de navegación del iPhone?

Question

Creé mi sitio web con jQuery mobile y me gustaría construir la misma barra de herramientas inferior como se muestra en la imagen a continuación. ¿Alguien me puede apuntar en la dirección correcta?

La barra de navegación predeterminada proporcionada por jQuery Mobile no proporciona el mismo aspecto.

Éstos son la barra de navegación móvil jQuery: http://jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html

Answer 1

bien para los iconos que se pueden utilizar: http://glyphish.com/

Una rápida versión en vivo: http://jsfiddle.net/vh4Ca/62/

HTML

<div data-role="page"> 
    <div data-role="content"> 
     <div data-role="footer" class="nav-glyphish-example"> 
      <div data-role="navbar" class="nav-glyphish-example" data-grid="d"> 
      <ul> 
       <li><a href="#" id="favorite" data-icon="custom">Favorite</a></li> 
       <li><a href="#" id="recent" data-icon="custom">Recent</a></li> 
       <li><a href="#" id="contacts" data-icon="custom">Contacts</a></li> 
       <li><a href="#" id="keypad" data-icon="custom">Keypad</a></li> 
       <li><a href="#" id="voicemail" data-icon="custom">Voicemail</a></li> 
      </ul> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.nav-glyphish-example .ui-btn .ui-btn-inner { 
    padding-top: 40px !important; 
} 

.nav-glyphish-example .ui-btn .ui-icon { 
    width: 45px!important; 
    height: 35px!important; 
    margin-left: -24px !important; 
    box-shadow: none!important; 
    -moz-box-shadow: none!important; 
    -webkit-box-shadow: none!important; 
    -webkit-border-radius: none !important; 
    border-radius: none !important; 
} 

#favorite .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png); 
    background-position: -345px -112px; 
    background-repeat: no-repeat; 
} 

#recent .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png); 
    background-position: -9px -61px; 
    background-repeat: no-repeat; 
} 

#contacts .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png); 
    background-position: -9px -540px; 
    background-repeat: no-repeat; 
} 

#keypad .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png); 
    background-position: -9px -783px; 
    background-repeat: no-repeat; 
} 

#voicemail .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png); 
    background-position: -394px -733px; 
    background-repeat: no-repeat; 
}