Sammy.js - simple page swap

by johnpapa

HTML

<script src="https://raw.github.com/quirkey/sammy/master/lib/sammy.js"></script>
<a href="#/test1">Yes</a>
<a href="#/test2">No</a>
<a href="#/test2/17">No - 17</a>
<a href="#/test2/?arg1=somedate">No - test - arg1</a>
<a href="#/test2/?arg2=sometrack">No - test - arg2</a>
<a href="#/test2?arg2=sometrack&arg3=whoknows">No - test - arg2 - arg3</a>
<a href="#/invalid">invalid</a>
<section class="response">
    <div id="test1" class="hidden">I thought you'd see it my way.</div>
    <div id="test2" class="hidden">Ok. Maybe next time.</div>
    <div id="test2-id" class="hidden">Ok. test 2 id</div>
    <div id="test2-string" class="hidden">Ok. test 2 string</div>
</section >

CSS

body{
    background-color:#2b2b29;
    font-family:"Helvetica", Arial, sans;
    font-size: 18px;
}
a{
    padding:2px 7px;
    background-color:#7bcaf7;
    text-decoration:none; 
    color:#323232;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
a:hover{
    background-color:#94d3f7;   
}
.hidden{
    color:#FFF;
    position:absolute;
    float:left;
    margin-top:20px;
    display:none;
}

JavaScript

//initialize "SAMMY"
var app = $.sammy(function() {

    this.get('#/test1', function(context) {
        $('section > div').hide()
        $('#test1').fadeIn();
    });

    this.get('#/test2', function(context) {
        $('section > div').hide()
        $('#test2').fadeIn();
    });

    this.get('#/test2/:id', function(context) {
        $('section > div').hide()
        $('#test2-id').fadeIn();
    });

    this.get(/^#\/test2\?/, function(context) {
        $('section > div').hide()
        $('#test2-id').fadeIn();
        alert(context.path);
    });

    this.get(/.*/, function(context) {
        $('section > div').hide()
    });
})
.run('#');//run it with default html fragment