jQuery mobile 中的底部导航栏看起来像 iPhone 导航栏，可能吗? [英] A bottom navbar in jQuery mobile looking like iPhone navbar, possible?

问题描述

我使用 jQuery mobile 创建了我的网站，我想构建与下图所示相同的底部工具栏.有人能指出我正确的方向吗?

jQuery mobile 提供的默认导航栏没有提供相同的外观.

这里是 jQuery 移动导航栏:

快速直播版本:http://jsfiddle.net/vh4Ca/62/>

HTML

<div data-role="内容"><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">联系人</a></li><li><a href="#" id="keypad" data-icon="custom">Keypad</a></li><li><a href="#" id="voicemail" data-icon="custom">Voicemail</a></li>

CSS

.nav-glyphish-example .ui-btn .ui-btn-inner {padding-top: 40px !important;}.nav-glyphish-example .ui-btn .ui-icon {宽度:45px！重要；高度:35px！重要；margin-left: -24px !important;box-shadow:无！重要；-moz-box-shadow:无！重要；-webkit-box-shadow:无！重要；-webkit-border-radius:无！重要；边界半径:无！重要；}#favorite .ui-icon {背景图片:网址(http://glyphish.com/images/demo.png)；背景位置:-345px -112px;背景重复:不重复；}#recent .ui-icon {背景图片:网址(http://glyphish.com/images/demo.png)；背景位置:-9px -61px;背景重复:不重复；}#contacts .ui-icon {背景图片:网址(http://glyphish.com/images/demo.png)；背景位置:-9px -540px;背景重复:不重复；}#keypad .ui-icon {背景图片:网址(http://glyphish.com/images/demo.png)；背景位置:-9px -783px;背景重复:不重复；}#voicemail .ui-icon {背景图片:网址(http://glyphish.com/images/demo.png)；背景位置:-394px -733px;背景重复:不重复；}

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?

The default navbar provided by jQuery mobile did not provide the same look.

Here are the jQuery mobile navbar: http://jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html

解决方案

Well for the icons you can use: http://glyphish.com/

A quick live version: 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; 
}

这篇关于jQuery mobile 中的底部导航栏看起来像 iPhone 导航栏，可能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！