2011-06-10 62 views
9

我使用jQuery mobile創建了我的網站,並且我想要構建與下圖所示相同的底部工具欄。有人能指引我朝着正確的方向嗎?jQuery手機中的底部導航欄看起來像iPhone導航欄,可能嗎?

jQuery mobile提供的默認導航欄沒有提供相同的外觀。

這裏是jQuery Mobile的導航欄:http://jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html

enter image description here

+2

是的,這是可能的(爲什麼不呢?),但你必須寫一些CSS自己 – naugtur 2011-06-10 07:43:27

+0

@naugtur:我認爲有一些下手......我會盡力我自己。 – Bronzato 2011-06-10 08:48:10

+0

所有的都是你鏈接的例子。拿它並添加樣式來獲得視覺效果。 – naugtur 2011-06-10 10:14:24

回答

27

那麼你可以使用圖標:http://glyphish.com/

快速真人版: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; 
} 
+0

我在找Bartender的幫助時偶然發現了這一點 - 這樣做更簡單,更容易定製。 – 2012-02-04 14:57:03

+0

有一件事 - 你的小提琴顯示純黑色背景的圖標,看起來有點不對 – JoshL 2012-06-22 12:40:49

+0

@JoshL是的,這只是一個例子,但它也讓我感到困惑 – 2012-06-22 13:09:33