File manager - Edit - /home/jardides/www/Jardi-design/CodePerso/Javascript/justgage-1.2.2/justgage-1.2.2/examples/custom-node.html
Back
<!doctype html> <html> <head> <title>Custom Node</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width"> <style> button { padding: 8px 14px; } .container { width: 850px; margin: 20px auto 0 auto; text-align: center; } .gauge { width: 150px; height: 150px; display: inline-block; border: 1px solid #ccc; margin: 5px; } a:link.button, a:active.button, a:visited.button, a:hover.button { margin: 20px 5px 0 2px; padding: 7px 13px; } </style> </head> <body> <div id="cont" class="container"> <div id="gauge2" class="gauge"></div> <div id="gauge3" class="gauge" data-title="#3" data-value="75" data-counter="true"></div> </div> <div class="container"> <button type="button" id="g1_show">Show G1</button> <button type="button" id="g4_show">Show G4</button> </div> <div class="container"> <button type="button" id="g1_refresh">Refresh G1</button> <button type="button" id="g2_refresh">Refresh G2</button> <button type="button" id="g3_refresh">Refresh G3</button> <button type="button" id="g4_refresh">Refresh G4</button> </div> <script src="../raphael-2.1.4.min.js"></script> <script src="../justgage.js"></script> <script> document.addEventListener("DOMContentLoaded", function(event) { var gNode1 = document.createElement('div'); gNode1.setAttribute("class", "gauge"); var gNode4 = document.createElement('div'); gNode4.setAttribute("class", "gauge"); gNode4.setAttribute("data-title", "#4"); gNode4.setAttribute("data-value", "100"); gNode4.setAttribute("data-counter", "true"); var gauge1 = new JustGage({ parentNode: gNode1, width: 150, height: 150, title: "#1", value: 25, min: 0, max: 100, decimals: 0, counter: true }); var gauge2 = new JustGage({ id: "gauge2", title: "#2", value: 50, min: 0, max: 100, humanFriendly: false, decimals: 0, counter: true }); var gauge3 = new JustGage({ id: "gauge3" }); var gauge4 = new JustGage({ parentNode: gNode4, width: 150, height: 150 }); document.getElementById('g1_refresh').addEventListener('click', function() { gauge1.refresh(getRandomInt(0, 100)); }); document.getElementById('g2_refresh').addEventListener('click', function() { gauge2.refresh(getRandomInt(0, 100)); }); document.getElementById('g3_refresh').addEventListener('click', function() { gauge3.refresh(getRandomInt(0, 100)); }); document.getElementById('g4_refresh').addEventListener('click', function() { gauge4.refresh(getRandomInt(0, 100)); }); document.getElementById('g1_show').addEventListener('click', function() { var container = document.getElementById("cont"); container.insertBefore(gNode1, container.childNodes[0]); container = null; }); document.getElementById('g4_show').addEventListener('click', function() { var container = document.getElementById("cont"); container.appendChild(gNode4, container.childNodes[0]); container = null; }); }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0 |
proxy
|
phpinfo
|
Settings