Route32/demo.html at master · rgarro/Route32 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>Route32 Demo</title>
		<meta name="description" content="Example Implementation of Route32 jQuery Anchor Routing Plugin" />
		<meta name="author" content="Rolando Garro<rgarro@gmail.com>" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.route32.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){

				var mynumber = 0;

				function increase(){
					mynumber = mynumber +1;
				}

				var router = new Route32({
					'automatic':true
                });

				router.add('#/caribean/',function(){
					increase();
					$("#arrivalPlace").html("Guapiles by the highway " + mynumber);
				});

				router.add('#/centralvalley/',function(){
					increase();
					$("#arrivalPlace").html("SanJose  Station" + mynumber);
				});

				//Variables example
				//to use variables declare the route normally
				//then add #? query string on your anchor, pass
				//object to your calback function
				router.add('#/pacificzone/',function(varsObj){
					increase();
					$("#arrivalPlace").html(varsObj.beach + " beach " + varsObj.acco);
				});

				router.add('#/mountain/',function(obj){
					increase();
					$("#arrivalPlace").html(obj.name + " mountain ");
				});

				router.drive();

			});
		</script>
	</head>
	<body>
		<ul>
   			<li><a class="nav" href="#/caribean/">Caribean</a></li>
   			<li><a class="nav" href="#/centralvalley/">Central Valley</a></li>
   			<li><a class="nav" href="#/pacificzone/#nonvalidvariablestring">Sandy Beach</a></li>
   			<li><a class="nav" href="#/pacificzone/#?beach=Tamarindo&acco=camping">Tamarindo Beach</a></li>
   			<li><a class="nav" href="#/pacificzone/#?beach=Jaco&acco=bar">Jaco Beach</a></li>
   			<li><a class="nav" href="#/mountain/#?name=BlueMountain">Mountain</a></li>
		</ul>
<div id="arrivalPlace"></div>
	</body>
</html>