0
我想实现一个jQuery的手机导航。但是从jquery load() 函数构建我自己的函数。我看过history.js,但很难理解。如果在地址栏中看到正确的网址,那将会很棒。请有人帮助推动我朝着正确的方向前进。Jquery手机导航功能?
我想实现一个jQuery的手机导航。但是从jquery load() 函数构建我自己的函数。我看过history.js,但很难理解。如果在地址栏中看到正确的网址,那将会很棒。请有人帮助推动我朝着正确的方向前进。Jquery手机导航功能?
这是一个简单的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:16:39
我发现了ajaxify-html5.js,它看起来不错,我该如何使用它? – 2013-02-21 10:17:59
似乎工作得很好,但倒退时我的首页上的内容容器变空了。 Isnt最初。 – 2013-02-21 10:26:29