我能够使用三个链接来组合一个简化的完整History.js示例,以从整个页面加载内容片段,而无需更新页面和更新浏览器历史记录。
这是相关的代码段- 完整的工作示例在此处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>
我想知道这是否正确。以前的版本可以使用#url绑定到事件。我没有看到使用此最新版本将事件绑定到url的任何示例,因此我使用了.on()click事件来调用History并整理出在其中单击了什么链接。
我不确定这是否是完成此示例的最佳方法。
在完成更多工作之后,我提出了一个简单而完整的示例来说明如何使用最新的History.js。这是工作的jsfiddle示例,该示例执行Github上托管的 Ajax HTML片段加载
<!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>