क्या यह History.js का उपयोग करने का एक उचित तरीका है?

मैं पृष्ठ को अद्यतन किए बिना और ब्राउज़र इतिहास को अद्यतन किए बिना पूर्ण पृष्ठ से सामग्री के टुकड़े लोड करने के लिए तीन लिंक का उपयोग करके एक सरल पूर्ण इतिहास.जेएस उदाहरण को एक साथ रखने में सक्षम था।क्या यह 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>

है मैं अगर यह सही उपयोग है जानना चाहूंगा। पिछले संस्करण में # यूआरएल का उपयोग करके किसी ईवेंट से जुड़ने की क्षमता थी। मैंने इस नवीनतम संस्करण के साथ यूआरएल को बाध्यकारी घटनाओं के लिए कोई उदाहरण नहीं देखा है, इसलिए मैंने इतिहास को कॉल करने के लिए .on() क्लिक ईवेंट का उपयोग किया और सॉर्ट किया कि वहां किस लिंक पर क्लिक किया गया था।

मुझे यकीन नहीं है कि यह इस उदाहरण के लिए इसे पूरा करने का सबसे अच्छा तरीका है या नहीं।

स्रोत

2012-11-07 dansalmo

इस पर काम करने के बाद, मैं एक सरल, लेकिन नवीनतम इतिहास.जेएस का उपयोग करने के लिए एक पूर्ण उदाहरण के साथ आया हूं। यहाँ working jsfiddle example कि 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>

स्रोत

2012-11-09 19:12:31 dansalmo

मैं पार्टी के लिए थोड़ी देर हो चुकी हूँ की अजाक्स लोड करता है, लेकिन यह ध्यान देने योग्य बात है कि 'History.pushState (लायक है {urlPath: window.location.pathname()}, $ (" शीर्षक ")। पाठ(), State.urlPath); 'एक त्रुटि फेंक देगा, क्योंकि window.location.pathname() एक फ़ंक्शन नहीं है। बस कोष्ठक हटा दें और यह एक आकर्षण की तरह काम करता है। – indextwo

इसे पकड़ने के लिए धन्यवाद। यह सुनिश्चित नहीं है कि मैंने इसे कैसे याद किया क्योंकि मैंने सोचा था कि मैं इसे एक वर्किंग वर्जन से चिपका रहा हूं। – dansalmo

@ डान्सल्मो, यदि मैंने ऊपर दिखाए गए उदाहरण की तरह एक उदाहरण लागू किया है (http://stackoverflow.com/a/13314438/1867808) तो मैं index.html फ़ाइल से संबंधित अतिरिक्त सामग्री कहां रखूं? क्या मैं इसे प्रतिक्रिया.html में डालता हूं जो index.html के समान फ़ोल्डर में है? –

क्या यह History.js का उपयोग करने का एक उचित तरीका है?

उत्तर

संबंधित मुद्दे