我使用jQuery mobile創建了我的網站,並且我想要構建與下圖所示相同的底部工具欄。有人能指引我朝着正確的方向嗎?jQuery手機中的底部導航欄看起來像iPhone導航欄,可能嗎?
jQuery mobile提供的默認導航欄沒有提供相同的外觀。
這裏是jQuery Mobile的導航欄:http://jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html
我使用jQuery mobile創建了我的網站,並且我想要構建與下圖所示相同的底部工具欄。有人能指引我朝着正確的方向嗎?jQuery手機中的底部導航欄看起來像iPhone導航欄,可能嗎?
jQuery mobile提供的默認導航欄沒有提供相同的外觀。
這裏是jQuery Mobile的導航欄:http://jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html
那麼你可以使用圖標: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;
}
我在找Bartender的幫助時偶然發現了這一點 - 這樣做更簡單,更容易定製。 – 2012-02-04 14:57:03
有一件事 - 你的小提琴顯示純黑色背景的圖標,看起來有點不對 – JoshL 2012-06-22 12:40:49
@JoshL是的,這只是一個例子,但它也讓我感到困惑 – 2012-06-22 13:09:33
是的,這是可能的(爲什麼不呢?),但你必須寫一些CSS自己 – naugtur 2011-06-10 07:43:27
@naugtur:我認爲有一些下手......我會盡力我自己。 – Bronzato 2011-06-10 08:48:10
所有的都是你鏈接的例子。拿它並添加樣式來獲得視覺效果。 – naugtur 2011-06-10 10:14:24