File manager - Edit - /home/jardides/www/Jardi-design/CodePerso/Javascript/justgage-1.2.2/justgage-1.2.2/examples/customize-style.htm
Back
<!doctype html> <html> <head> <title>Customize style</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> body { text-align: center; } #g1, #g2, #g3, #g4, #g5, #g6 { width:200px; height:160px; display: inline-block; margin: 1em; } p { display: block; width: 450px; margin: 2em auto; text-align: left; } </style> </head> <body> <div id="g1"></div> <div id="g2"></div> <div id="g3"></div> <div id="g4"></div> <div id="g5"></div> <div id="g6"></div> <p> Not digging default style? Then mock your own, Picasso! JustGage features bunch of styling options including gauge width, gauge color and shadow, gauge level colors, colors for title, value, min & max etc. </p> <p> Check non-minified version of justgage.js for list of all setup parameters. </p> <script src="../raphael-2.1.4.min.js"></script> <!--<script src="../justgage-1.0.1.js"></script>--> <script src="../justgage.js"></script> <script> document.addEventListener("DOMContentLoaded", function(event) { var g1, g2, g3, g4, g5, g6; var g1 = new JustGage({ id: "g1", value: getRandomInt(0, 100), min: 0, max: 100, title: "Custom Width", label: "", gaugeWidthScale: 0.2 }); var g2 = new JustGage({ id: "g2", value: getRandomInt(0, 100), min: 0, max: 100, title: "Custom Shadow", label: "", shadowOpacity: 1, shadowSize: 5, shadowVerticalOffset: 10 }); var g3 = new JustGage({ id: "g3", value: getRandomInt(0, 100), min: 0, max: 100, title: "Custom Colors", label: "", levelColors: [ "#00fff6", "#ff00fc", "#1200ff" ] }); var g4 = new JustGage({ id: "g4", value: getRandomInt(0, 100), min: 0, max: 100, title: "Hide Labels", hideMinMax: true }); var g5 = new JustGage({ id: "g5", value: getRandomInt(0, 100), min: 0, max: 100, title: "Animation Type", label: "", startAnimationTime: 2000, startAnimationType: ">", refreshAnimationTime: 1000, refreshAnimationType: "bounce" }); var g6 = new JustGage({ id: "g6", value: getRandomInt(0, 100), min: 0, max: 100, title: "Minimal", label: "", hideMinMax: true, gaugeColor: "#fff", levelColors: ["#000"], hideInnerShadow: true, startAnimationTime: 1, startAnimationType: "linear", refreshAnimationTime: 1, refreshAnimationType: "linear" }); setInterval(function() { g1.refresh(getRandomInt(0, 100)); g2.refresh(getRandomInt(0, 100)); g3.refresh(getRandomInt(0, 100)); g4.refresh(getRandomInt(0, 100)); g5.refresh(getRandomInt(0, 100)); g6.refresh(getRandomInt(0, 100)); }, 2500); }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0 |
proxy
|
phpinfo
|
Settings