Tantárgy:Webes rendszerek kliens oldali programozása 2. [IM3314, WP3316]
Tananyag:jQuery - Bevezetés
Feladat:Hőmérő emuláció

Megoldás forráskódja

<!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">
   <head>
      <title>Hőmérő emuláció</title>
      <meta name="author" content="Tóth Péter" />
      <meta name="copyright" content="© 2012, NYME SEK" />
      <meta http-equiv="date" content="2012-09-23" />
      <meta name="revised" content="Tóth Péter, 23/09/2012" />
      <meta name="description" content="jQuery - Hőmérő emuláció" />
      <meta http-equiv="content-language" content="hu" />
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <style type="text/css">
         body{
            margin:10px
            }
         #idHomero{
            background-color:#eeeeec;
            z-index:100;
            position:absolute;
            top:57px;
            left:45px;
            width:28px;
            height:324px;
            }
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
      <script type = "text/javascript">
         <!--
         // Betöltődés lekezelése
         $(document).ready(function(){
            // Meleg állapot lekezelése
            $("#idMeleg").click(
               function(){
                  $("#idHomero").animate({height:"0px"});
                  }
               );
            // Hideg állapot lekezelése
            $("#idHideg").click(
               function(){
                  $("#idHomero").animate({height:"324px"});
                  }
               );
            // Pont jó állapot lekezelése
            $("#idPontjo").click(
               function(){
                  $("#idHomero").animate({height:"162px"});
                  }
               );
            });
         -->
      </script>
   </head>
   <body>
      <div>
         <img src="jquery_homero.png" alt=""/><br/>
         <button id="idHideg">Hideg</button>
         <button id="idPontjo">Pont jó</button>
         <button id="idMeleg">Meleg</button>
      </div>
      <div id="idHomero"></div>
   </body>
</html>