egyetem:webc2:jquery:f2:reszek4m
Tartalomjegyzék
| Tantárgy: | Webes rendszerek kliens oldali programozása 2. [IM3314, WP3316] | |
| Tananyag: | jQuery - Bevezetés | |
| Feladat: | Hőmérő emuláció | |
| Kidolgozás: | Feladat megoldása fejlesztési részfeladatok segítségével | |
| Részfeladat: | 4. részfeladat | |
Részfeladat
„Meleg” állapot létrehozása
Részfeladat megoldásának forrása
// Meleg állapot lekezelése
$("#idMeleg").click(
function(){
$("#idHomero").animate({height:"0px"});
}
);
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ó - 4</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"});
}
);
});
-->
</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>
egyetem/webc2/jquery/f2/reszek4m.txt · legutóbbi módosítás: (külső szerkesztés)
