martedì 18 dicembre 2012

Esempio GUI con HTML5

Seguendo la strada gia' impostata tempo fa ecco un esempio di come realizzare l'esempio GUI con HTML 5

L'impaginazione e' bruttina ma il tutto funziona


-----------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
         body { margin: 0; font-size: 2em; background-color: white; }
         #quit { background-color: gray; color: white; font-weight: bold; display: block; text-align: right; }
  .containter{width: 150px; margin: 0 auto;}
         .containter div{width: 150px;margin: 0 auto;}
        </style>

        <script type="text/javascript">
        function showValue(newValue)
        {
                document.getElementById("range").innerHTML=newValue;
                document.getElementById("progress").value=newValue;
        }

        </script>
    </head>


    <body>
    <div class="containter">
<div>
    <input type="range"  min="0" max="100" onchange="showValue(this.value)"  /></input>
    </div>
        <div>
        <span id="range">50</span>
        </div>
        <div>
        <progress id="progress" value="50" max="100">50%</progress>
        </div>
    </div>
    </body>
</html>

Nessun commento:

Posta un commento

Change Detection with structural similarity

L'idea di base e' quella di cercare le differenze tra le due immagini sottostanti Non e' immediatamente visibile ma ci sono dei ...