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

问题描述

我用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; 
}

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屋！