source: branches/MootoolsFileManager-Update/plugins/MootoolsFileManager/mootools-filemanager/Assets/js/demo.html @ 1309

Last change on this file since 1309 was 1309, checked in by gogo, 8 years ago

Part 2: Add new mootools-filemanager

File size: 3.8 KB
RevLine 
[1309]1<!doctype html> 
2
3<html lang="en">
4<head>
5  <meta charset="utf-8">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7
8  <title>jsGET demo</title>
9  <meta name="description" content="simple demos, which show what you can do with jsGET">
10  <meta name="author" content="Fabian Vogelsteller">
11
12  <meta name="viewport" content="width=device-width, initial-scale=1.0">
13 
14  <script type="text/javascript" src="jsGET.js"></script>
15 
16  <style type="text/css">
17  body {
18    font-size: 12px;
19    font-family: verdana, sans-serif;
20    background-color:#000;
21    color: #fff;
22  }
23 
24  a {
25    color: #fff;
26    border-bottom: 1px dotted #eee;
27  }
28 
29  #menu h1 {
30    color:#fff;
31    font-size: 15px;
32  }
33 
34  #output {
35    width: 200px;
36    border: 1px solid white;
37    padding: 5px;
38    color: #ccc;
39  }
40  </style>
41</head>
42<body>
43 
44  <div id="menu">
45  <h1>Navigation</h1>
46  <a href="#" onclick="jsGET.set('myNavi=firstpage');return false;">First page</a><br />
47  <a href="#" onclick="jsGET.set({'myNavi':'secondpage'});return false;">Second page</a><br />
48  <a href="#" onclick="jsGET.set({'myNavi':'lastpage','newVar':'newValue'});return false;">Last page</a><br /><br />
49  <a href="#" onclick="jsGET.remove('myNavi');return false;">Remove "myNavi" var</a><br />
50  <a href="#" onclick="jsGET.clear();return false;">Clear all</a><br />
51  <h2>Mode</h2>
52  <a href="?mode=regular">Fire jsGET listener (and update output box below) with every change</a><br />
53  <a href="?mode=only-browser-history">Fire jsGET listener (and update output box below) ONLY when you change the URL by going back in the browser history (or by manually editing the hash section)</a><br />
54  Listener test frequency:<br />
55  <a href="?freq=100">very fast (0.1s)</a> |
56  <a href="?freq=250">fast (0.25s)</a> |
57  <a href="?freq=500">regular/default (0.5s)</a> |
58  <a href="?freq=1000">slow (1s)</a> |
59  <a href="?freq=5000">very slow (5s)</a><br />
60  </div>
61  <br />
62  <div id="output">
63  </div>
64 
65  <script type="text/javascript">
66
67  // run the putInOutpuBox always when the hash value changes
68  // (when the second parameter is FALSE, it only calls the function when the browser history button (back, forward) is clicked)
69  var newListener = jsGET.addListener(putInOutputBox, (get_uri_arg('mode') !== 'only-browser-history'), null, parseInt(get_uri_arg('freq'))); // the "newListener" var get the setIntervallId necessary for removeListener()
70 
71  // the function which get called by the listener
72  function putInOutputBox(hashVars) {
73    var outputBox = document.getElementById("output");
74    outputBox.innerHTML = '';
75    var output = '';
76
77    // show changed vars in the output box
78    output += '<b>Changed var(s)</b><br />';
79    for(var key in hashVars.changed) {
80      output += key+' = '+hashVars.changed[key]+'<br />';
81    }
82   
83    // show all current vars in the output box
84    output += '<br><b>Current var(s)</b><br />';
85    for(var key in hashVars.current) {
86      output += key+' = '+hashVars.current[key]+'<br />';
87    }
88   
89    // show all current vars in the output box
90    output += '<br /><b>Old var(s)</b><br />';
91    for(var key in hashVars.old) {
92      output += key+' = '+hashVars.old[key]+'<br />';
93    }
94   
95    output += '<br /><br /><b>This uses the get() method, to fetch the "myNavi" var:</b><br />'+jsGET.get('myNavi');
96   
97    outputBox.innerHTML = output;
98        blink(1);
99        setTimeout(blink, 250);
100  }
101 
102  function blink(toggle) {
103    var outputBox = document.getElementById("output");
104        outputBox.style.backgroundColor = (toggle == 1 ? '#800' : '');
105  }
106       
107        // derived from  http://www.netlobo.com/url_query_string_javascript.html
108        function get_uri_arg(name)
109        {
110          var re = '[?&]' + name + '=([^&#]*)';
111          var regex = new RegExp(re);
112          var results = regex.exec(window.location.href);
113          if (results == null)
114                return '';
115          else
116                return results[1];
117        } 
118  </script>
119</body>
120</html>
Note: See TracBrowser for help on using the repository browser.