Response title
This is preview!
the navbar css cannot work when i use link to navigate and use data-ajax=true
in jQuery Mobile
•
6 months ago
hi guys
i have a problem about the navbar。
when i use a custom css to change the style of the navbar , if i load the page from the explorer's address bar, the css works, and when i use a a href to navigate to this page , the css cannot work , the nav bar's height and font become large, and i refresh the page the css work again.
and when i cancel the data-ajax property, set the data-ajax=false, the css work again,so can i use the data-ajax=true and the css at the same time?
thank you!
the code is :
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!-- First Page -->
<div data-role="page">
<div data-role="header">
<h1>welcome！</h1>
</div>
<div id="logo">
<img src="Images/HomeLogo.jpg" height="220" />
</div>
<div data-role="content">
<a href="tabbar.html" data-transition="slide" data-ajax="false" data-role="button">navigate to tab bar！</a>
</div>
</div>
</body>
</html>
the nav page tabbar.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tab Bar Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<style>
.ui-navbar-custom .ui-btn .ui-btn-inner
{ font-size: 11px!important; padding-top: 24px!important; padding-bottom: 0px!important; }
.ui-navbar-custom .ui-btn .ui-icon
{ width: 30px!important; height: 20px!important; margin-left: -15px!important; box-shadow: none!important;
-moz-box-shadow: none!important; -webkit-box-shadow: none!important;
-webkit-border-radius: none!important; border-radius: none!important; }
#home .ui-icon { background: url(../images/53-house-w.png) 50% 50% no-repeat; background-size: 22px 20px; }
#movies .ui-icon { background: url(../images/107-widescreen-w.png) 50% 50% no-repeat; background-size: 25px 17px; }
#theatres .ui-icon { background: url(../images/15-tags-w.png) 50% 50% no-repeat; background-size: 20px 20px; }
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Movies</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>
<a href="#">
<img src="../images/kungfupanda2.jpg" />
<h3>Kung Fu Panda</h3>
<p>Rated: PG</p>
<p>Runtime: 95 min.</p>
</a>
</li>
<li>
<a href="#">
<img src="../images/pirates.jpg" />
<h3>Pirates</h3>
<p>Rated: PG-13</p>
<p>Runtime: 137 min.</p>
</a>
</li>
<li>
<a href="#">
<img src="../images/X-MenFirstClass.jpg" />
<h3>X-Men</h3>
<p>Rated: PG-13</p>
<p>Runtime: 131 min.</p>
</a>
</li>
<li>
<a href="#">
<img src="../images/kungfupanda2.jpg" />
<h3>Kung Fu Panda 3D</h3>
<p>Rated: PG</p>
<p>Runtime: 95 min.</p>
</a>
</li>
</ul>
</div>
<!-- tab bar with custom icons -->
<div data-role="footer" class="ui-navbar-custom" data-position="fixed">
<div data-role="navbar" class="ui-navbar-custom">
<ul>
<li><a href="#" id="home" data-icon="custom">Home</a></li>
<li><a href="#" id="movies" data-icon="custom" class="ui-btn-active">Movies</a></li>
<li><a href="#" id="theatres" data-icon="custom">Theatres</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
1
