jquery - jQuery Mobile 中的底部导航栏看起来像 iPhone 导航栏，可能吗？

Question

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

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

以下是 jQuery 移动导航栏:http://jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html

Answer 1

对于您可以使用的图标: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; 
}