agrublev/usingCrossroads.html

## usingCrossroads.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {background:black;color:white;}
    </style>
    <script src="jquery.js"></script>
    <script src="signal.js"></script>
    <script src="history.js"></script>
    <script src="history.adapter.js"></script>
    <script src="routes.js"></script>
    <script>

        $(function(){
            // Prepare
            crossroads.addRoute('/test/{id}', function(id){
                console.log(id,'888888888888888');
            });

            // Bind to StateChange Event
            History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
                var State = History.getState(); // Note: We are using History.getState() instead of event.state
                console.log(State);
                crossroads.parse(document.location.pathname + document.location.search);
            });

            $("body").on("click","a[data-href]",function(e){
                e.preventDefault();
                History.pushState({state:1}, "State 1", "/test/3");
            });
        });
    </script>
</head>
<body>
 hi
<a href="#">Test</a>
<a href="/test/two">Test2</a>
<a href="#" data-href="/test/three">Test3</a>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	body {background:black;color:white;}
	</style>
	<script src="jquery.js"></script>
	<script src="signal.js"></script>
	<script src="history.js"></script>
	<script src="history.adapter.js"></script>
	<script src="routes.js"></script>
	<script>

	$(function(){
	// Prepare
	crossroads.addRoute('/test/{id}', function(id){
	console.log(id,'888888888888888');
	});

	// Bind to StateChange Event
	History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
	var State = History.getState(); // Note: We are using History.getState() instead of event.state
	console.log(State);
	crossroads.parse(document.location.pathname + document.location.search);
	});

	$("body").on("click","a[data-href]",function(e){
	e.preventDefault();
	History.pushState({state:1}, "State 1", "/test/3");
	});
	});
	</script>
	</head>
	<body>
	hi
	<a href="#">Test</a>
	<a href="/test/two">Test2</a>
	<a href="#" data-href="/test/three">Test3</a>
	</body>
	</html>