jQuery& history.js示例 [英] jQuery & history.js example

问题描述

使用jQuery使用history.js有点麻烦。我只是想使用后退按钮（他们似乎做得非常好）使导航设置工作。然而。当我点击后退按钮时，网址会变成旧的（这又是好的，我想要的），但内容并不会取代它。

为了做到这一点这里有一些代码更容易理解。

 < ul class =content_links> 
< li>< a href =/ historyapi / pages / content_page_1.html>内容页面1< / a>< / li> 
< li>< a href =/ historyapi / pages / content_page_2.html>内容页面2< / a>< / li> 
< li>< a href =/ historyapi / pages / content_page_3.html>内容页面3< / a>< / li> 
< li>< a href =/ historyapi / pages / content_page_4.html>内容页面4< / a>< / li> 
< li>< a href =/ historyapi / pages / content_page_5.html>内容页面5< / a>< / li> 
< / ul> 
< div id =content> 
< p>将此框中的内容替换为来自使用JavaScript和AJAX的支持页面的内容。 
< / div> 
  

很显然，我想要的是页面的内容加载到内容中，并且很容易使用。 load（）然后如果用户使用它，我希望后退按钮向后移动它们。目前网址更改，但框中的内容不变。我将如何改变或修复它？

解决方案

请尝试以下方法：

 < ul class =content_links> 
< li>< a href =/ historyapi / pages / content_page_1.html>内容页面1< / a>< / li> 
< li>< a href =/ historyapi / pages / content_page_2.html>内容页面2< / a>< / li> 
< li>< a href =/ historyapi / pages / content_page_3.html>内容页面3< / a>< / li> 
< li>< a href =/ historyapi / pages / content_page_4.html>内容页面4< / a>< / li> 
< li>< a href =/ historyapi / pages / content_page_5.html>内容第5页< / a>< / li> 
< / ul> 
< div id =content> 
< p>将此框中的内容替换为来自使用JavaScript和AJAX的支持页面的内容。 
< / div> 
 
< script> 
 $（function（）{
 
 //准备
 var History = window.History; //注意：我们使用的是大写的H而不是较低的h 
 if（！History.enabled）{
 //此浏览器已禁用History.js 
 //这是因为我们可以选择是否支持HTML4浏览器
 return false ; 
} 
 
 //绑定到StateChange事件
 History.Adapter.bind（window，'statechange'，function（）{//注意：我们使用的是statechange而不是popstate 
 var State = History.getState（）; 
 $（'＃content'）。load（State.url）; 
 / *而不是上面的行，你可以运行代码如果url返回整个页面而不是内容（假设它有一个`＃content`）：
 $ .get（State.url，function（response）{
 $（'＃content '）.html（$（response）.find（'＃content'）。html（））;}）; 
 * / 
}）; 
 
 
 //捕获所有的li nks将它们的URL推送到历史堆栈并触发StateChange事件
 $（'a'）。 
 History.pushState（null，$（this）.text（），$（this）.attr（'href'））; 
}）; 
}）; 
< / script> 
  

I'm having a little trouble using history.js with jQuery. I just wanted to make a navigation set work with the back button (which they do seem to be doing quite nicely). However. When I click the back button the url changes to the old (which again is good and what I want) but the content does not replace as it should.

To make this a little more understandable here's some code.

    <ul class="content_links">
        <li><a href="/historyapi/pages/content_page_1.html">Content page 1</a></li>
        <li><a href="/historyapi/pages/content_page_2.html">Content page 2</a></li>
        <li><a href="/historyapi/pages/content_page_3.html">Content page 3</a></li>
        <li><a href="/historyapi/pages/content_page_4.html">Content page 4</a></li>
        <li><a href="/historyapi/pages/content_page_5.html">Content page 5</a></li>
    </ul>
    <div id="content">
        <p>Content within this box is replaced with content from supporting pages using javascript and AJAX.
    </div>

Obviously what I want is the content of the pages load into content which is done nice and easily with .load() and then I want the back button to move backwards through them if the user uses it. At the moment the URLs change but the content in the box does not. How would I go about changing or fixing that?

解决方案

Try the following:

<ul class="content_links">
    <li><a href="/historyapi/pages/content_page_1.html">Content page 1</a></li>
    <li><a href="/historyapi/pages/content_page_2.html">Content page 2</a></li>
    <li><a href="/historyapi/pages/content_page_3.html">Content page 3</a></li>
    <li><a href="/historyapi/pages/content_page_4.html">Content page 4</a></li>
    <li><a href="/historyapi/pages/content_page_5.html">Content page 5</a></li>
</ul>
<div id="content">
    <p>Content within this box is replaced with content from supporting pages using javascript and AJAX.
</div>

<script>
$(function() {

    // Prepare
    var History = window.History; // Note: We are using a capital H instead of a lower h
    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() { // Note: We are using statechange instead of popstate
        var State = History.getState();
        $('#content').load(State.url);
        /* Instead of the line above, you could run the code below if the url returns the whole page instead of just the content (assuming it has a `#content`):
        $.get(State.url, function(response) {
            $('#content').html($(response).find('#content').html()); });
        */
        });


    // Capture all the links to push their url to the history stack and trigger the StateChange Event
    $('a').click(function(evt) {
        evt.preventDefault();
        History.pushState(null, $(this).text(), $(this).attr('href'));
    });
});
</script>

这篇关于jQuery& history.js示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！