Simple sammy example

Example of how to use Sammy to detect and act on hash changes,

HTML

<script src="https://raw.github.com/quirkey/sammy/master/lib/min/sammy-latest.min.js"></script>
<!-- very simple container that may be changed with clicks -->
<div id="container">
    <h1>Default Page</h1>
    <p>This is the default page</p>
</div>

<!-- Dummy navigation list using hash links -->
<ul>
    <li><a href="#foo">Load "foo.html"</a></li>
    <li><a href="#bar">Load "bar.html"</a></li>
</ul>

<!-- fake ajax content--for the purposes of this demo, we just load
     content from another source (in this case named divs) -->
<div id="pages" style="display:none">
    <div id="foo_html">
        <h1>Foo page</h1>
        <p>This is the foo page.</p>
    </div>
    <div id="bar_html">
        <h1>Bar page</h1>
        <p>This is the bar page</p>
    </div>
</div>

CSS

#container {
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

JavaScript

$(function(){
    // Use sammy to detect hash changes
    $.sammy(function(){
        // bind to #:page where :page can be some value
        // we're expecting and can be retrieved with this.params
        this.get('#:page',function(){
            // Demo just finds the div within #pages and loads it
            // within the #container
            $('#container').empty().append(
                $('#pages #'+this.params['page']+'_html').clone()
            );
        });
    }).run();
});