显示和隐藏jQuery Mobile页面中的内容 [英] Show and hide content in a jQuery Mobile page

问题描述

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

解决方案

如果您的意思是拥有两个(或更多)单独的HTML文件，则需要了解如何在jQM中正确处理事件，因此这里是一个快速介绍.

>

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

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

3. 第一页之后的每一页仅加载<div data-role="page/dialog"></div>元素内的内容，因此，如果后续页的<head/>中包含JS而未导入，则可能是第二页的导航栏JS第二页中的代码，这是一件大事

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

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

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，但我们不需要

There are two pages in my jQuery mobile application. When a list item on the first page is tapped, the user is taken to the second html page. The second page has a navbar which has two buttons. I want these two navbar buttons to show/hide a div in the content area of the page. I couldn't find which event handling mechanism to use. document.ready doesn't work, pageinit doesn't work also. Can someone direct me to a sample?

解决方案

If you mean you have two (or more) separate HTML files you need to understand how to handle events properly in jQM, so here's a quick intro.

1. jQM adds even separate HTML files into a single DOM, thru loading them by AJAX

2. Each page that is loaded via AJAX fires a pageinit and a pageshow event, difference being that pageshow re-fires when you navigate back to the page

3. Every page after the first page only loads content within the <div data-role="page/dialog"></div> element, therefore if your subsequent pages have JS in the <head/> that is not pulled in perhaps you have your second page's navbar JS code in your second page's , this is a big thing to note

4. So how do you manage your JS and keep it organized? In our production jQM app we load all our JS at the start, it's not too big minified anyways. We have one entry point and the JS code is included on every page, so whichever page you enter from loads all the JS we need just once - and no more JS is loaded. Warning if you have JS within your <div data-role="page"/> it will refire everytime you visit the page only do this if you know how it acts

5. Your entry point should be a single function $(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){ now every page/dialog that loads will trigger this event handler, you can determine if it's pageinit or pageshow based on event.type AND which page loaded by adding a data-attribute or class or anything you want to the <div data-role="page" data-pageIdentifier="home etc.."></div> - then just use a switch statement to handle for all the cases.

6. You now have all the info you need and this is a handy reference to the current page, bind event listeners with the .on function, so you listen at the page, NOT the document root, e.g. your navbar stuff. - If you use .live it will listen for the entire document (not all pages are DOM cached though), regardless this is bad for performance! Actually within a page, we always use .find starting from the page, e.g. $this.find('div.something'), we never use $('div.something), that will crawl your entire DOM possibly hitting other pages AND worse giving you erroneous results not within your current page so another big mistake is to do something like $('img.selectItem').bind('click'... you may have an img.selectItem in another DOM cached page, so you'll bind to more than you want to - I would do something like $this.find('img.selectItem').bind( (where $this is the current page)

Obviously we had a lot of code eventually, so we wrote a handler object that called functions in other JS files - and you can use RequireJS but we never needed to

这篇关于显示和隐藏jQuery Mobile页面中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！