jQuery Navbar“永久工具栏"即使简单的示例也不起作用-我该怎么做? [英] jQuery Navbar "persistent toolbars" doesn't work even simple example - what do I do wrong?
问题描述
我正在尝试实现navbar持久工具栏"，因此我需要一次定义导航栏.
I'm trying to implement navbar "persistent toolbars" so that I need to define the navigation bar once.
ref: http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html
(您需要在每页上定义data-id="the same")
(you need to define data-id="the same" on each page)
首先，我直接投入我的开发工作，没有做任何事情，而且我发现它似乎也不适用于简单的案例，所以我尝试了各种组合.
First I put straight into my development, did no work and as I see it does not seem to work with simple cases either, I tried all kind of combinations.
下面的代码宽度可能是错误的吗? Navivagtion会转到第二页，但没有到那里的工具栏.
What can be wrong width the following code ? Navivagtion leads to the second page but not toolbar there.
代码:
<body>
<div data-role="page" id="page" data-id="stHedaer>
<div data-role="header">
<h1>Page One</h1>
<div data-role="navbar" data-position="fixed">
<ul>
<li><a href="#p2">page2</a></li>
<li><a href="#p3">page3</a></li>
</ul>
</div>
</div>
<div data-role="content"> Page one </div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="p2" data-id="stHedaer">
<div data-role="header" >
<h1>Page Two</h1>
</div>
<div data-role="content"> Content </div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="p3" data-id="stHedaer" >
<div data-role="header">
<h1>Page Three</h1>
</div>
<div data-role="content"> Content </div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
推荐答案
jQM文档必须仔细阅读.如果要在每个页面上导航条，则需要在每个页面上放置它.使用:
jQM documentation must be read carefully. If you want navbar on every page you need to put it on every page. With:
...data-position="fixed" data-id="footer"...
在页眉和页脚中类似.
这是一个工作示例: http://jsfiddle.net/Gajotres/Beq4H/
Here's a working example: http://jsfiddle.net/Gajotres/Beq4H/
<!DOCTYPE html>
<html>
<head>
<title>Share QR</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.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<a href="#home" data-icon="home" data-iconpos="notext">Home</a>
<h1>Share QR</h1>
</div>
<div data-role="content">
<p>Hello world!</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<div data-role="navbar">
<ul>
<li><a href="#about" data-transition="slide">page2</a></li>
<li><a href="#about" data-transition="slide">page3</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="about">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<a href="#home" data-icon="home" data-iconpos="notext">Home</a>
<h1>About</h1>
<a href="#home" data-icon="arrow-l" data-rel="back">Back</a>
</div>
<div data-role="content">
<p>Share your favorite URLs with other mobile phone users through QR codes.</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<div data-role="navbar">
<ul>
<li><a href="#home" data-transition="slide">page2</a></li>
<li><a href="#home" data-transition="slide">page3</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
这篇关于jQuery Navbar“永久工具栏"即使简单的示例也不起作用-我该怎么做?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
