Question

在我的jQuery移动应用程序中，我需要控制移动设备后退按钮，因为我有3个页面，每个页面位于单独的Html文件中主页 - ＆gt; Page1包含表单要提交 - ＆gt;第2页

如果用户点击第2页的设备后退按钮，我想直接将应用程序返回主页而不通过抛出表单页面。我在第2页尝试了下面的代码，但是移动回到主页然后它返回显示Page2并最终再次显示表单页面“Page1”！我搜索了网但我没有找到任何有用的解决方案..我怎么能解决这个问题？请帮帮我..

主页

 <div data-role="page" id="home">
        <div data-role="header" data-position="fixed">
             <h1>Header - Home</h1>

        </div>
        <div data-role="content"></div>
        <a href="p1.html" data-transition="none">Page1</a>
        <div data-role="footer" data-position="fixed">
             <h1>Footer</h1>

        </div>
    </div>

Page1

   <!-- Page 1 -->
     <div data-role="page" id="p1">
         <div data-role="header" data-position="fixed">
             <h1>Header - Page 1</h1>

        </div>
        <div data-role="content"></div>
         <form>
         // form elements 
         <div   class="ui-btn ui-input-btn ui-icon-check " >                                                   
            <input type="button" id="submit" data-inline="true" value=" submit"    data-iconpos="left" />

          </div> 
        <div data-role="footer" data-position="fixed">
             <h1>Footer</h1>

        </div>
    </div>

Page2

 <div data-role="page" id="p2">
         <div data-role="header" data-position="fixed">
             <h1>Header - Page 2</h1>

        </div>
        <div data-role="content"></div>
        <div data-role="footer" data-position="fixed">
             <h1>Footer</h1>

        </div>
    </div>

Java脚本

 $('#submit').on('click',function(){

      $.mobile.changePage('p2.html',{transition:'none'});
  });


  document.addEventListener('backbutton', function(e){
      if($.mobile.activePage.is('#p2')){

       e.preventDefault();
       $(':mobile-pagecontainer').pagecontainer('change', 'home.html', {transition:   'none', reverse: true});
    }
   else {
       navigator.app.backHistory()
   }
   }, false);

在jQuery mobile 1.4.0中控制移动设备后退按钮

0 个答案: