我的jQuery移动应用程序中有两个页面.当点击第一页上的列表项时,用户将被带到第二个html页面.第二页有一个导航栏,有两个按钮.我希望这两个导航栏按钮显示/隐藏页面内容区域中的div.我找不到使用哪种事件处理机制.document.ready不起作用,pageinit也不起作用.有人可以指导我一个样品吗？
如果你的意思是你有两个(或更多)单独的HTML文件,你需要了解如何在jQM中正确处理事件,所以这里是一个快速介绍.
jQM通过AJAX加载它们,甚至将单独的HTML文件添加到单个DOM中
通过AJAX加载的每个页面都会触发一个pageinit和一个pageshow事件,不同之处在于当您导航回页面时页面显示会重新触发
第一页之后的每个页面只加载<div data-role="page/dialog"></div>元素中的内容,因此如果您的后续页面中的JS <head/>没有被拉入,也许您的第二页中有第二页的导航栏JS代码,这是一件值得注意的事情.
那么你如何管理你的JS并使其保持井井有条？在我们的生产jQM应用程序中,我们在开始时加载所有的JS,不管怎样它都不会太大.我们有一个入口点,每个页面都包含JS代码,因此您输入的任何页面都会加载我们只需要一次的所有JS - 并且不再加载JS.警告如果你的JS中有JS会在你<div data-role="page"/>每次访问页面时重新启动,只有当你知道它的行为时才会这样做
您的入口点应该是单个函数,$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){现在每个加载的页面/对话框都将触发此事件处理程序,您可以通过添加数据属性或类或任何您想要的内容来确定它是基于pageinit还是pageshow基于event.typeAND加载的页面<div data-role="page" data-pageIdentifier="home etc.."></div>- 然后只是使用switch语句来处理所有情况.
您现在拥有了所需的所有信息,并且this是对当前页面的方便引用,使用该.on函数绑定事件侦听器,因此您可以在页面上收听,而不是文档根,例如导航栏内容.- 如果你使用.live它将监听整个文档(虽然不是所有页面都是DOM缓存的),不管这对性能有害!实际上在一个页面中,我们总是.find从页面开始使用,例如$ this.find('div.something'),我们从不使用$('div.something),这会抓取你的整个DOM,可能会碰到其他页面而且更糟糕的是你错误的结果不在当前页面内,所以另一个大错误就是$('img.selectItem').bind('click'...你可能在另一个DOM缓存页面中有一个img.selectItem,所以你会绑定到比你想要的更多 - 我会做类似的事情$this.find('img.selectItem').bind( (其中$这是当前页面)
显然我们最终有很多代码,所以我们写了一个在其他JS文件中调用函数的处理程序对象 - 你可以使用RequireJS但我们从不需要