javascript - jQuery Mobile - 如何根据前一页更改页面行为

Question

我的应用中有三个页面：#main、#new 和#existing。

每次加载#new 时，我都希望它检测它是来自#menu 还是#existing。根据这些信息，它应该什么都不做或填充它的表单。

如何在上一页的正确命令和正确处理 DOM 方面实现这一点？

Answer 1

根据你的#这些页面需要是dom元素。只需在 javascript 中使用变量并在每个步骤中检查它。

• 创建一个新变量，如lastPage
• 在每次点击时，我更喜欢使用data-foo 之类的 HTML5 数据属性。
• 根据导航更改lastPage 。

• 然后做你真正想要的。

   var lastPage = '';
  
   /* This code from jQuery Mobile, link is below the code. */
  
   // Define a click binding for all anchors in the page
   $( "a" ).on( "click", function( event ){
       // Prevent the usual navigation behavior
       event.preventDefault();
       // Alter the url according to the anchor's href attribute, and
       // store the data-foo attribute information with the url
   $.mobile.navigate( this.attr( "href" ), {
       lastPage: this.attr("data-foo") // store data here
   });
   // Hypothetical content alteration based on the url. E.g, make
   // an AJAX request for JSON data and render a template into the page.
       alterContent( this.attr("href") );
   });
  

HTML 示例

<a href="foo.bar" data-foo="main">Main Page</a>
<a href="foo.bar" data-foo="new">New Page</a>
<a href="foo.bar" data-foo="existing">Existing Page</a>

您可以随心所欲地制作数据。只有数据很重要，之后您可以使用一切。它只是一个 HTML5 DOM 属性。

编辑：

我建议你检查导航页面。之后你可以更好地理解这个概念。代码来源：http: //view.jquerymobile.com/1.3.2/dist/demos/widgets/navigation/

Answer 2

利用 jQuery-Mobile 页面事件，例如pagebeforehide和pageshow。

演示

id在离开之前存储当前页面。

var prevPage;

$(document).on('pagebeforehide', function () {
  prevPage = $.mobile.activePage[0].id;
});

当目标页面处于活动状态时，检索存储的上一页id。

$(document).on('pageshow', function () {
  $(this).find('.destination').text('Previous Page: ' + prevPage);
});