Uživatelské nástroje

Nástroje pro tento web


vyuka:jquery_ii

Jquery II

Efekty

Můžeme ovládat zobrazování a pohyb vybraných objektů Efekty se vykonají pokaždé, kdy jsou spuštěné - pokud je zrovna vykonáván jiný efekt, další se zařadí do pořadí a efekty jsou vykonány postupně v řadě za sebou.

Určujeme u nich délku trvání animace (v milisekundách)

  • Hide - schová
  • Show - zobrazí
  • Toggle - zajede mimo obrazovku (schová objekt pokud je zobrazený, zobrazí ho, pokud je schovaný)
  • fadeOut - zprůhlední
  • fadeIn - zneprůhlední - vrátí zpět
  • fadeTo - zprůhlední a zase vrátí zpět - určujeme i jak dlouhou dobu má objekt zůstat průhledný

příklad:

$("#odstavec").toggle(500));

Metoda Animate

I kaskádové styly se dají měnit efekty, k tomu slouží efekt Animate

Má tyto parametry:

  • funkce při spuštění animace (povinný parametr)
  • doba trvání (povinný parametr)
  • lineární zrychlení
  • funkce po dokončení animace

příklad:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Karel jede na kole</title>
<script src="jquery-1.10.2.min.js"></script>
<script>
	 $(document).ready(function(){
	 	$("#odstavec").animate({ width: "600px", }, 500 );
	 	
	})
	
</script>
<style>
	#odstavec {
	width:200px;
	background-color:gray;
	
	}
</style>
</head>

<body>
	<div id="odstavec">Karel jede na kole.</div>
</body>
</html>

Příklad s vnořenou funkcí po dokončení (vytvoří vyskakovací okno s nápisem „Hotovo“):

	 $(document).ready(function(){
	 	$("div").animate({
  			height: 500,
 			 width: 200,
 			 opacity: 0.5
			}, 1000, "linear", function() {
  			alert( "Hotovo" );
			});	 	
	})

Události

Dokáží zachytit určité chování objektů.

Události se zapisují takto:

 $(element).událost(function(){
	 co se má vykonat, když se událost stane	 	
	})

Typy událostí:

  • ready - dokument (nebo objekt) se načetl

příklad:

   $(document).ready(function(){
             /*co se má vykonat*/
   })
  • click - kliknutí myši

příklad:

   $("#tlacitko").click(function(){
       /* co se má vykonat */  })

Jiný typ zápisu události pomocí „bind“:

      $("#tlacitko").bind("click", function(){
      /*co se má vykonat*/
      })

Můžeme adresovat objekt pomocí „this“. příklad:

      $("p").bind("click", function(){
      $( this ).toggle(200);
      })

Další typy událostí:

  • dblclick - double click, dvojklik
  • mouseenter - nájezd myši
  • mouseleave - sjezd myši
  • hover - registruje myš nad objektem a její sjetí
  • mousedown - stisknutí myši
  • mousemove - pohyb myši nad objektem
  • mouseout - sjetí myši z objektu
  • mouseover - myš nad objektem
vyuka/jquery_ii.txt · Poslední úprava: 2013/11/21 10:37 autor: verca