jQuery mobile 中的底部导航栏看起来像 iPhone 导航栏，可能吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6303124/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A bottom navbar in jQuery mobile looking like iPhone navbar, possible?
提问by Bronzato
I created my website with jQuery mobile and I would like to build the same bottom toolbar as showed on the picture below. Can someone point me in the right direction?
我使用 jQuery mobile 创建了我的网站，我想构建与下图所示相同的底部工具栏。有人可以指出我正确的方向吗？
The default navbar provided by jQuery mobile did not provide the same look.
jQuery mobile 提供的默认导航栏没有提供相同的外观。
Here are the jQuery mobile navbar: http://jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html
这是 jQuery 移动导航栏：http: //jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html
回答by Phill Pafford
Well for the icons you can use: http://glyphish.com/
以及您可以使用的图标：http: //glyphish.com/
A quick live version: http://jsfiddle.net/vh4Ca/62/
快速直播版本：http: //jsfiddle.net/vh4Ca/62/
HTML
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
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;
}
