<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jsGET demo</title>
<meta name="description" content="simple demos, which show what you can do with jsGET">
<meta name="author" content="Fabian Vogelsteller">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="jsGET.js"></script>
<style type="text/css">
body {
font-size: 12px;
font-family: verdana, sans-serif;
background-color:#000;
color: #fff;
}
a {
color: #fff;
border-bottom: 1px dotted #eee;
}
#menu h1 {
color:#fff;
font-size: 15px;
}
#output {
width: 200px;
border: 1px solid white;
padding: 5px;
color: #ccc;
}
</style>
<script type="text/javascript">
// run the putInOutpuBox always when the hash value changes
// (when the second parameter is FALSE, it only calls the function, when the browser history button (back, forward) is clicked)
var newListener = jsGET.addListener(putInOutputBox,true); // the "newListener" var get the setIntervallId necessary for removeListener()
// the function which get called by the listener
function putInOutputBox(hashVars) {
var outputBox = document.getElementById("output");
outputBox.innerHTML = '';
var output = '';
// show changed vars in the output box
output += '<b>Changed var(s)</b><br />';
for(var key in hashVars.changed) {
output += key+' = '+hashVars.changed[key]+'<br />';
}
// show all current vars in the output box
output += '<br><b>Current var(s)</b><br />';
for(var key in hashVars.current) {
output += key+' = '+hashVars.current[key]+'<br />';
}
// show all current vars in the output box
output += '<br /><b>Old var(s)</b><br />';
for(var key in hashVars.old) {
output += key+' = '+hashVars.old[key]+'<br />';
}
output += '<br /><br /><b>This uses theget() method, to fetch the "myNavi" var:</b><br />'+jsGET.get('myNavi');
outputBox.innerHTML = output;
}
</script>
</head>
<body>
<div id="menu">
<h1>Navigation</h1>
<a href="#" onclick="jsGET.set('myNavi=firstpage');return false;">First page</a><br />
<a href="#" onclick="jsGET.set({'myNavi':'secondpage'});return false;">Second page</a><br />
<a href="#" onclick="jsGET.set({'myNavi':'lastpage','newVar':'newValue'});return false;">Last page</a><br /><br />
<a href="#" onclick="jsGET.remove('myNavi');return false;">Remove "myNavi" var</a><br />
<a href="#" onclick="jsGET.clear();return false;">Clear all</a><br />
</div>
<br />
<div id="output">
</div>
</body>
</html>
|
Download
