如何自定义jQuery Mobile导航栏? [英] How to customize the jQuery Mobile Navbar?
问题描述
我正在尝试在屏幕底部为电话应用创建导航栏，类似于以下内容: https://dribbble.com/shots/3418526-Poppinz-Navbar-Animation 添加"按钮是一个圆形图标，比其他选项卡高一点.
I'm trying to make a navbar for a phone app on the bottom of the screen, something similar to this: https://dribbble.com/shots/3418526-Poppinz-Navbar-Animation where the add button is a circle icon and a bit higher than the other tabs.
仅HTML，CSS和jQuery Mobile可以实现吗?
Would this be possible with just HTML, CSS, and jQuery Mobile?
我仍在学习编码，必须使用jQuery Mobile.我怎样才能做到这一点?
I'm still learning to code and I have to use jQuery Mobile. How can I achieve this?
.nav-icons .ui-btn {
padding-top: 50px !important;
font-family: 'lato', sans-serif !important;
font-size: 18px !important;
font-weight: 100 !important;
text-shadow: none !important;
color: #FFF !important;
background-color: #03314c !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
border: 0px !important;
}
.nav-icons .ui-btn:after {
width: 36px;
height: 36px;
margin-left: -15px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-webkit-border-radius: 0;
border-radius: 0;
border: 0px;
}
.ui-btn:active {
background-color: #004d78 !important;
}
#home:after {
background: url("icons/home/home_white_fillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
font-weight: 100;
}
#two:after {
background: url("icons/clock/clock_white_fillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
}
#three:after {
position: relative;
display: flex !important;
justify-content: space-between !important;
}
#four:after {
background: url("icons/dollarsign/dollarsign_white fillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
}
#five:after {
background: url("icons/dotmenu/dotmenu_whitefillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
}
img {
max-width: 50px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, calc(-40%));
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<h1>hello</h1>
<div data-role="footer" class="nav-icons" data-theme="a">
<div data-role="navbar" class="nav-icons" data-grid="d">
<ul>
<li><a href="#" id="home" data-icon="custom">Home</a></li>
<li><a href="#" id="two" data-icon="custom">2</a></li>
<li>
<a href="#" id="three"><img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">3</a>
</li>
<li><a href="#" id="four" data-icon="custom">4</a></li>
<li><a href="#" id="five" data-icon="custom">5</a></li>
</ul>
</div>
</div>推荐答案
The JQM Navbar widget is injecting a Grid, but you can provide the markup for such a grid by yourself.
这里最棘手的部分是从该网格中删除 overflow:hidden 样式，然后我们只需要恢复一些顶部和底部填充即可.当然，还有其他方法可以达到相同的目的.
The tricky part here is to remove the overflow: hidden style from that grid, then we just need to restore some top and bottom padding. Of course there will be other methods to achieve the same.
当您要尝试使用jQuery Mobile时，我还重写了其他一些典型的(IMHO)过于沉重的JQM样式，因此您可以通过注释每种样式来使用它来查看区别.
As you like to experiment with jQuery Mobile, i have also overridden some other typical (IMHO) too heavy JQM styles, so you can play with it to see the difference simply by commenting each style.
.ui-grid-d {
overflow: visible !important;
}
.ui-grid-d div {
font-weight: normal !important;
font-family: 'Jura', sans-serif !important;
font-size: 12px;
}
.ui-grid-d a {
margin: 0;
}
.ui-grid-d > .ui-block-a,
.ui-grid-d > .ui-block-b,
.ui-grid-d > .ui-block-c,
.ui-grid-d > .ui-block-d,
.ui-grid-d > .ui-block-e {
text-align: center !important;
background: white;
padding-top: .3em;
padding-bottom: .9em;
}
.ui-btn-icon-notext.ui-btn-active:after {
background-color: transparent !important;
}
.ui-icon-big {
height: 52px !important;
width: 52px !important;
margin-top: -24px !important;
border-radius: 26px !important;
}
.ui-icon-big:after {
width: 32px !important;
height: 32px !important;
background-size: 22px !important;
margin-top: -16px !important;
margin-left: -16px !important;
//background-color: transparent !important;
}
/* jQM no frills */
.ui-btn,
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn:visited {
text-shadow: none !important;
}
.ui-focus,
.ui-btn:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="header">
</div>
<div data-role="content">
<h3>Custom Navbar</h3>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<div class="ui-grid-d" data-theme="a">
<div class="ui-block-a">
<a href="#" class="ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext ui-btn-active"></a>
<div>Home</div>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn ui-corner-all ui-icon-refresh ui-btn-icon-notext"></a>
<div>History</div>
</div>
<div class="ui-block-c">
<a href="#" class="ui-btn ui-corner-all ui-icon-plus ui-icon-big ui-btn-icon-notext"></a>
<div>Book</div>
</div>
<div class="ui-block-d">
<a href="#" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext"></a>
<div>Notifications</div>
</div>
<div class="ui-block-e">
<a href="#" class="ui-btn ui-corner-all ui-icon-tag ui-btn-icon-notext"></a>
<div>Profile</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>如果您还需要波纹效果，则可以在此处找到与JQM兼容的出色实现:使用jQuery在Material Design中进行波纹效果和CSS3
If you need also the ripple effect, you can find a superb and JQM-compatible implementation here: Ripple effect in Material Design using jQuery and CSS3
这篇关于如何自定义jQuery Mobile导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
