File: demo.html

Recommend this page to a friend!
  Classes of Fabian Vogelsteller  >  jsGET  >  demo.html  >  Download  
File: demo.html
Role: Example script
Content type: text/plain
Description: the demo page
Class: jsGET
Set and get variable passed in the page URL hash
Author: By
Last change:
Date: 10 years ago
Size: 2,741 bytes
 

Contents

Class file image Download
<!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>