jQuery mobilinde bir alt navbar, iPhone navbarına benziyor mu?

Question

Web sitemi jQuery mobile ile oluşturdum ve aşağıdaki resimde gösterildiği gibi aynı alt araç çubuğunu oluşturmak istiyorum. Birisi bana doğru yönde işaret edebilir mi?

jQuery mobile tarafından sağlanan varsayılan navbar aynı görünümü sağlamamıştır. Kullanabileceğiniz simgeler için Eh http://jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html

Answer 1

: Burada

jQuery mobil navbar olan http://glyphish.com/

Hızlı bir canlı versiyonu: 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; 
}