jQuery Mobile底部导航栏
是否有适用于iPhone/Mobile Safari底部导航栏的jQuery Mobile示例代码？
我曾试图谷歌和自己编码,但我从来没有真正让它适用于iPhone/Mobile Safari.其他浏览器似乎很好,例如Desktop Safari,桌面Chrome,Android浏览器.
我试过的代码(它不适用于Mobile Safari .. doh)
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li><a href="#one" data-icon="custom">Entry</a></li>
<li><a href="#two" data-icon="custom">Winner</a></li>
<li><a href="#three" data-icon="custom">Gallery</a></li>
</ul>
</div><!-- /navbar -->
</div>
任何帮助表示赞赏:)
谢谢.
使用自定义图标(使用jQuery Mobile 1.2.0)尝试以下工作示例:
创建一个css文件mycss.css并在其中包含以下内容:
.ui-icon-custom {
background: url("../img/run.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}
run.png自定义图标的名称在哪里.
然后,在您的html文件中,包括以下内容:
<!DOCTYPE html>
<html>
<head>
<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>
<!-- LOAD YOUR CSS FILE WHILE PAYING ATTENTION TO ITS PATH! -->
<link rel="stylesheet" type="text/css" href="./css/mycss.css"/>
</head>
<body>
<div data-role="page">
<div data-role="content">
<h1>This is my content</h1>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li><a href="#one" data-icon="custom">Entry</a></li>
<li><a href="#two" data-icon="custom">Winner</a></li>
<li><a href="#three" data-icon="custom">Gallery</a></li>
</ul>
</div><!-- /navbar -->
</div>
</div>
</body>
</html>
截图(iPhone 5):
PS:注意你的css/png文件的路径!
如果这对您有用,请告诉我.