这是使用History.js有道？ [英] Is this a proper way to use History.js?
问题描述
我能够放在一起使用三个环节来加载从一个完整的网页内容片断简化完整History.js例如没有更新页面，并在更新的浏览器历史记录。
I was able to put together a simplified complete History.js example using three links to load fragments of content from a full page without updating the page and while updating the browser history.
下面是相应和code片段 - 一个完整的工作的例子是在这里 http://jsfiddle.net/PT7qx/show
Here are the relevent code snippets - a complete working example is here http://jsfiddle.net/PT7qx/show
<a href="/page-header">Page Header</a>
<a href="/login-form">Login Form</a>
<a href="/nothing">Nothing</a>
<script>
var History = window.History;
if (!History.enabled) {
return false;
}
History.Adapter.bind(window, 'statechange', function() {
var State = History.getState();
History.log(State.data, State.title, State.url);
if (State.title == 'Page Header') {
$('#content').load('/user/login/ .pageHeader > *');
}
if (State.title == 'Login Form') {
$('#content').load('/user/login/ #common-form > *');
}
if (State.title == 'Nothing') {
$('#content').empty()
}
});
$('body').on('click', 'a', function(e) {
var urlPath = $(this).attr('href');
var Title = $(this).text();
History.pushState(null, Title, urlPath);
// prevents default click action of <a ...>
return false;
});
<\script>
我想知道这是否是正确的用法。在previous版本有绑定到使用＃的URL事件的能力。我还没有看到任何的例子将事件绑定到的URL与这个最新的版本，所以我用了。对（），点击事件调用历史记录，并整理出哪些链接被点击的在那里。
I would like to know if this is the correct usage. The previous version had an ability to bind to an event using the # urls. I have not seen any examples for binding events to urls with this latest version so I used the .on() click event to call History and sorted out what link was clicked in there.
我不知道这是否是做到这一点在本例中的最佳方式。
I am not sure if this is the best way to accomplish this for this example.
推荐答案
在这个工作更多一些，我想出了一个简单但完整的例子，说明如何使用最新的History.js。这里是工作的jsfiddle例如，做了的
HTML片段>After working on this some more, I have come up with a simple, but complete example for how to use the latest History.js. Here is working jsfiddle example that does Ajax loads of HTML fragments hosted on Github
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Simple History.js Ajax example by dansalmo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://balupton.github.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
<style type='text/css'>
.hidden {
display: none;
visibility: hidden;
}
</style>
</head>
<body>
<a href="/home">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
<a href="/other">Other</a>
<p>The whole page will not re-load when the content below is updated, yet the URL is clean and the back button works!<p><br />
<div id="content">
<div id="home">Home Page content</div>
</div>
<br />
<p>The content div will be updated with a selected div fragment from an HTML file hosted on github, however the broswer will see each content update request as a part of the page history so that the back button can be used.</p>
<br />
<p>Adding more menu items is as simple as adding the new links and their corresponding html fragments.<p>
<div id="hidden_content" class="hidden"></div>
</body>
<script type='text/javascript'>//<![CDATA[
$(function(){
var History = window.History;
if (History.enabled) {
State = History.getState();
// set initial state to first page that was loaded
History.pushState({urlPath: window.location.pathname}, $("title").text(), State.urlPath);
} else {
return false;
}
var loadAjaxContent = function(target, urlBase, selector) {
$(target).load(urlBase + ' ' + selector);
};
var updateContent = function(State) {
var selector = '#' + State.data.urlPath.substring(1);
if ($(selector).length) { //content is already in #hidden_content
$('#content').children().appendTo('#hidden_content');
$(selector).appendTo('#content');
} else {
$('#content').children().clone().appendTo('#hidden_content');
loadAjaxContent('#content', State.url, selector);
}
};
// Content update and back/forward button handler
History.Adapter.bind(window, 'statechange', function() {
updateContent(History.getState());
});
// navigation link handler
$('body').on('click', 'a', function(e) {
var urlPath = $(this).attr('href');
var title = $(this).text();
History.pushState({urlPath: urlPath}, title, urlPath);
return false; // prevents default click action of <a ...>
});
});//]]>
</script>
</html>
这篇关于这是使用History.js有道？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
