2014-03-24 30 views
0

我有一個簡單的代碼,其中我使用Phonegap/Apache Cordova巧克力芯片UI。 我叫父親從祖父和兒子從父親 所以它的祖父 - >父親 - >兒子 一切工作正常。但後退按鈕存在問題。我不能從父親回到祖父或(從兒子到父親)。任何想法 ?默認後退按鈕任務不發生

代碼

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
     <meta name="apple-mobile-web-app-capable" content="yes"> 
     <meta name="mobile-web-app-capable" content="yes"> 
     <meta name="msapplication-tap-highlight" content="no"> 
     <title>ChocolateChip-UI Android</title> 
     <link rel="stylesheet" href="chui/chui-ios-3.5.2.min.css"> 
     <script src="chui/jquery-2.1.0.min.js"></script> 
     <script src="chui/chui-3.5.2.min.js"></script> 
     <script type="text/javascript" charset="utf-8" src="cordova.js"></script> 

     <script> 
     document.addEventListener("deviceready", onDeviceReady, false); 
     function onDeviceReady(){} 
     $(function() { 

     }); 
     </script> 
    </head> 
    <body> 
     <nav class="current"> 
     <h1>Family Tree</h1> 
     </nav> 
     <article id="main" class="current"> 
     <section> 
      <ul class='list' role='list'> 
      <li class='comp' data-goto="grandfather"> 
       <div> 
       <h3>Grandfather</h3> 
       </div> 
       <aside> 
       <span class='nav'></span> 
       </aside> 
      </li> 
       </ul> 
     </section> 
     </article> 

     <nav class='next'> 
     <a href='#' class='button back'>Navigation</a> 
     <h1>Family Tree</h1> 
     </nav> 
     <article id="grandfather" class='next'> 
     <section> 
      <ul class='list' role='list'> 
      <li class='comp' data-goto="Father1"> 
       <div> 
       <h3>Father1</h3> 
       </div> 
       <aside> 
       <span class='nav'></span> 
       </aside> 
      </li> 
      <li class='comp' data-goto="Father2"> 
       <div> 
       <h3>Father2</h3> 
       </div> 
       <aside> 
       <span class='nav'></span> 
       </aside> 
      </li> 
      <li class='comp' data-goto="Father3"> 
       <div> 
       <h3>Father3</h3> 
       </div> 
       <aside> 
       <span class='nav'></span> 
       </aside> 
      </li> 
       </ul> 
     </section> 
     </article> 

     <nav class='next'> 
     <a href='#' class='button back'>Navigation</a> 
     <h1>Family Tree</h1> 
     </nav> 
     <article id="Father1" class='next'> 
     <section> 
      <ul class='list' role='list'> 
      <li class='comp' data-goto="main"> 
       <div> 
       <h3>Son1</h3> 
       </div> 
       <aside> 
       <span class='nav'></span> 
       </aside> 
      </li> 
      <li class='comp' data-goto="main"> 
       <div> 
       <h3>Son2</h3> 
       </div> 
       <aside> 
       <span class='nav'></span> 
       </aside> 
      </li> 
      <li class='comp' data-goto="main"> 
       <div> 
       <h3>Son3</h3> 
       </div> 
       <aside> 
       <span class='nav'></span> 
       </aside> 
      </li> 
       </ul> 
     </section> 
     </article> 

     <nav class='next'> 
     <a href='#' class='button back'>Navigation</a> 
     <h1>Family Tree</h1> 
     </nav> 
     <article id="Father2" class='next'> 
     <section> 
      <ul class='list' role='list'> 
      <li class='comp' data-goto="main"> 
       <div> 
       <h3>Son4</h3> 
       </div> 
       <aside> 
       <span class='nav'></span> 
       </aside> 
      </li> 
      <li class='comp' data-goto="main"> 
       <div> 
       <h3>Son5</h3> 
       </div> 
       <aside> 
       <span class='nav'></span> 
       </aside> 
      </li> 
       </ul> 
     </section> 
     </article> 

     <nav class='next'> 
     <a href='#' class='button back'>Navigation</a> 
     <h1>Family Tree</h1> 
     </nav> 
     <article id="Father3" class='next'> 
     <section> 
      <ul class='list' role='list'> 
      <li class='comp' data-goto="main"> 
       <div> 
       <h3>Son6</h3> 
       </div> 
       <aside> 
       <span class='nav'></span> 
       </aside> 
      </li> 
       </ul> 
     </section> 
     </article> 

     </body> 
     </html> 

回答

0

後退按鈕並不需要一個href,它會與內置的導航干擾。 Chui.js負責幕後的導航。看看按下後退按鈕的事件處理程序。

/////////////////////////// // Initialize Back Buttons: /////////////////////////// $('body').on('singletap', 'a.back', function() { if (this.classList.contains('back')) { $.UIGoBack(); } });

documentation關於如何在您的導航欄上後退按鈕

<nav class='current'> <a class='button back'>Back</a> <h1>Candies</h1> </nav>

相關問題