1

我的 jQuery 移动应用程序中有两个页面。当第一页上的列表项被点击时，用户将被带到第二个 html 页面。第二页有一个导航栏，它有两个按钮。我希望这两个导航栏按钮在页面的内容区域中显示/隐藏一个 div。我找不到要使用的事件处理机制。document.ready 不起作用，pageinit 也不起作用。有人可以指导我样品吗？

4

2 回答 2

6

如果您的意思是您有两个（或更多）单独的 HTML 文件，您需要了解如何在 jQM 中正确处理事件，所以这里有一个快速介绍。

  1. jQM 甚至将单独的 HTML 文件添加到单个 DOM 中，通过 AJAX 加载它们

  2. 通过 AJAX 加载的每个页面都会触发一个pageinit和一个pageshow事件，不同之处在于当您导航回页面时 pageshow 会重新触发

  3. 第一个页面之后的每个页面只加载元素内的<div data-role="page/dialog"></div>内容，因此如果您的后续页面中有 JS<head/>没有被拉入，那么您的第二个页面中可能有您的第二个页面的导航栏 JS 代码，这是需要注意的一件大事

  4. 那么你如何管理你的 JS 并使其保持井井有条呢？在我们的生产 jQM 应用程序中，我们一开始就加载了所有的 JS，无论如何它并没有太大缩小。我们有一个入口点，每个页面都包含 JS 代码，因此无论您从哪个页面输入，我们只需要一次加载我们需要的所有 JS - 不再加载 JS。警告如果你有 JS，<div data-role="page"/>它会在你每次访问页面时重新触发，只有在你知道它的行为时才这样做

  5. 您的入口点应该是一个函数，现在加载的每个页面/对话框都将触发此事件处理程序，您可以通过添加数据属性或类或您想要的任何内容$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){来确定它是pageinit或pageshow基于AND 加载的页面- 然后只需使用 switch 语句来处理所有情况。event.type<div data-role="page" data-pageIdentifier="home etc.."></div>

  6. 您现在拥有所需的所有信息，并且this是对当前页面的方便引用，将事件侦听器与.on函数绑定，因此您在页面而不是文档根目录（例如导航栏的内容）进行侦听。- 如果你使用.live它，它将监听整个文档（尽管并非所有页面都被 DOM 缓存），不管这对性能不利！实际上在一个页面中，我们总是.find从页面开始使用，例如 $this.find('div.something')，我们从不使用 $('div.something)，它会爬取你的整个 DOM，可能会碰到其他页面，更糟糕的是给您的错误结果不在当前页面内，所以另一个大错误是执行类似的操作$('img.selectItem').bind('click'...你可能在另一个 DOM 缓存页面中有一个 img.selectItem，所以你会绑定到比你想要的更多的东西 - 我会做类似的事情$this.find('img.selectItem').bind( （其中 $this 是当前页面）

显然我们最终有很多代码，所以我们编写了一个处理程序对象来调用其他 JS 文件中的函数 - 你可以使用 RequireJS 但我们从来不需要

于 2012-06-08T17:26:48.480 回答
0

检查这个 jsfiddle 上的代码：http: //jsfiddle.net/nirmaljpatel/6UbGp/

于 2012-06-07T11:44:06.227 回答