Jquery手機導航功能？

我想實現一個jQuery的手機導航。但是從jquery load（）函數構建我自己的函數。我看過history.js，但很難理解。如果在地址欄中看到正確的網址，那將會很棒。請有人幫助推動我朝着正確的方向前進。Jquery手機導航功能？

2013-02-21 Adrian McCool

這是一個簡單的History.js示例。

我們的標記。

<!DOCTYPE HTML> 
<html> 
<head> 
    <script src="jquery.js"></script> 
    <script src="jquery.history.js"></script> 
<title>History.js</title> 
</head> 
<body> 

     <a href="page1.html">Page 1</a> 
     <a href="Page2.html">Page 2</a> 
    <div id="content"> 
     <p>Content within this box is replaced with content from 
      supporting pages using javascript and AJAX.</p> 
    </div> 
</body> 
</html>

javascript。

$(function() { 

      // Note: We are using a capital H instead of a lower 'h' 
      var History = window.History; 
      if (!History.enabled) { 
       // History.js is disabled for this browser. 
       // This is because we can optionally choose to support HTML4 browsers or not. 
       return false; 
      } 

      // Bind to StateChange Event 
      History.Adapter.bind(window, 'statechange', function(e) { 
       // Note: We are using statechange instead of popstate 
       var State = History.getState(); 
       $('#content').load(State.url + " #content").html(); 
      }); 

      $('a').on('click',function(evt) { 
       evt.preventDefault(); 
       History.pushState(null, $(this).text(), $(this).attr('href')); 
      }); 
     });

將該腳本插入到頭標籤或頁面底部。基本上pages1.html和page2.html應該包含一個叫做內容的div，並且它會使用來自$('#content').load(State.url + " #content").html();

的方法加載返回內容，就這麼簡單。

來源

2013-02-21 10:07:49 KyelJmD

非常感謝！我會看一下。 – 2013-02-21 10:16:39

我發現了ajaxify-html5.js，它看起來不錯，我該如何使用它？ – 2013-02-21 10:17:59

似乎工作得很好，但倒退時我的首頁上的內容容器變空了。 Isnt最初。 – 2013-02-21 10:26:29

Jquery手機導航功能？

回答

相關問題