jQuery Mobile底部导航栏 [英] jQuery Mobile bottom navigation bar
问题描述
是否有适用于iPhone/Mobile Safari底部导航栏的jQuery Mobile示例代码?
Is there working jQuery Mobile sample code for iPhone/Mobile Safari bottom navigation bar?
我曾尝试过用Google自己编写代码，但我从未真正将其用于iPhone/Mobile Safari.其他浏览器似乎很好，例如桌面Safari，桌面Chrome，Android浏览器.
I have tried to google and code myself but I never really got it working for iPhone/Mobile Safari. The other browsers seem to be fine e.g. Desktop Safari, Desktop Chrome, Android browser.
我尝试过的代码(但不适用于Mobile Safari .. doh)
The code that I tried (and it works just not for 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)尝试以下工作示例:
Try the following working example, using custom icons (using jQuery Mobile 1.2.0):
创建一个css文件mycss.css，并在其中包含以下内容:
Create a css file mycss.css and include the following in it:
.ui-icon-custom {
background: url("../img/run.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}
其中run.png是自定义图标的名称.
where run.png is the name of your custom icon.
然后，在您的html文件中，包括以下内容:
Then, in your html file, include the following:
<!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文件的路径！
PS: Pay attention to the paths of your css / png files!
让我知道这是否对您有用.
Let me know if this works for you.
这篇关于jQuery Mobile底部导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
