【问题标题】:jquerymobile: navigation is not working with jquery.mobile-1.0a2jquerymobile:导航不适用于 jquery.mobile-1.0a2
【发布时间】:2011-09-09 06:59:21
【问题描述】:

我刚刚开始研究 jquerymobile,使用 jquery.mobile-1.0a1 完成了简单的示例。

我有 home.html、auboutus.html 页面。在主页中,我有一个带有指向 aboutus.html 的外部链接的列表视图。它工作正常,通过单击关于我们的链接,关于我们的页面正在加载带有“返回”按钮的头部导航栏。

现在使用jquery.mobile-1.0a2,在关于我们的页面中,标题导航栏消失了。

这是我的示例代码:

home.html

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body> 
<div data-role="page">
<div data-role="header" data-theme="b">
                  <h1>Home</h1>
</div>
<div data-role="content">
    <div id="banner">
        <h2></h2>
    </div>
    <ul data-role="listview">
        <li><a href="aboutus.html" >About Us</a>
    </li></ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

aboutus.html

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body> 
<div data-role="page">
<div data-role="header" data-theme="b">
    <h1>About Us</h1>
</div>
<div data-role="content">
    <div id="banner">
        <h2>About Us</h2>
    </div>
<p>about us about us about us about us </p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

【问题讨论】:

  • 阿尔法1?我建议更新新发布的 beta 3

标签: jquery-mobile


【解决方案1】:

您应该考虑使用 JQuery mobile 喜欢的页面设计。你可以在这里找到它,你不需要定义不同的 .html 文件,你可以简单地将多个具有不同 id 的“页面”添加到一个 html 文件中。那么引用就很简单了。看看这个链接:http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html#../../docs/pages/docs-pages.html

如果您想引用外部链接,请尝试以下操作:&lt;a href="multipage.html" rel="external"&gt;Link&lt;/a&gt;

【讨论】:

  • 嗨@zyrex,rel="external" 为我工作,但我没有在aboutus.html 的标题工具栏上获得自动“返回”按钮
  • 检查此链接并搜索后退按钮.. 它写了如何添加它。 jquerymobile.com/test/docs/toolbars/docs-headers.html 如果对您有帮助,请不要忘记接受我的回答正确或有用。谢谢
  • 谢谢@zyrex,我可以在标题工具栏上定义“返回”按钮。但是导航中缺少平滑过渡..
  • 检查文档页面中的“页面和对话框”,然后检查“页面过渡”……您称之为平滑的过渡取决于您创建按钮的方式。你是外部的,它不见了。检查文档,非常好。
猜你喜欢
  • 2021-02-05
  • 1970-01-01
  • 1970-01-01
  • 2019-08-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多