我用jQuery mobile创建了我的网站,我想建立一个底部的工具栏,如下图所示.有人可以指向正确的方向吗？
jQuery mobile提供的默认导航栏没有提供相同的外观.
这里是jQuery手机导航栏：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;
}
