Introduktion till jQuery: del 2

Har du inte läst den första delen i introduktionen av jQuery bör du göra det först, men det är inget krav för att du ska klara av detta. Hursomhelst, har du inte skapat en mapp och importerat jQuery-filen till ditt dokument är det dags nu.

Skapa panelen

Nu ska vi skapa en enkel panel som vi sedan ska kunna skicka upp och ned med hjälp av en knapp. Eftersom det är jQuery vi håller på med krävs det väldigt lite kod för att göra denna läckra animation. Hur som helst, antingen kan du skapa en egen panel eller så kopierar du den jag tänker skapa och använda.

slide-down panel

<html>
<head>
<title>Slide-down panel</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
	body{
		margin: 0px;
		padding: 0px
	}
	#box {
		margin: 0 auto;
		width: 500px;
		height: 250px;
		background-color: #4567DE;
		border: 1px dashed #2D2D2D;
		border-top: none
		}
	#knapp {
		margin: 0 auto;
		width: 160px;
		height: 35px;
		background: url(knapp.jpg);
		cursor: pointer
	}
</style>
</head>
<body>
<div id="box"></div>
<div id="knapp"></div>
</body>
</html>

Dags för jQuery!

För att kunna få #box att glida upp eller ner när man klickar på #knapp kan man använda sig av en jQuery-animation som kallas slideToggle. slideToggle kommer att gömma eller ta fram ett objekt genom att låta den glida fram. Man kan även välja hastigheten på denna animation genom att välja slow, medium eller fast.

Vi vill alltså att en funktion skall starta när vi klickar på #knapp och då skriver vi:

<script type="text/javascript">
$(document).ready(function(){
	$("#knapp").click(function(){
	  // Vad som sedan ska hända skriver vi här.
	});
});
</script>

För att sedan lägga till sliden skriver vi helt enkelt till vad som ska hända när man trycker, alltså att vi vill använda oss av slideToggle på #box.

<script type="text/javascript">
$(document).ready(function(){
	$("#knapp").click(function(){
	  $("#box").slideToggle("slow");
	});
});
</script>

Enkelt, eller hur?

Svårare än så var det inte, och resultatet blev ändå riktigt coolt. Du kan antingen kopiera hela koden nedanför eller kolla in en demo här.

<html>
<head>
<title>Slide-down panel
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#knapp").click(function(){
	  $("#box").slideToggle("slow");
	});
});
</script>

<style type="text/css">
	body{
		margin: 0px;
		padding: 0px
	}

	#box {
		margin: 0 auto;
		width: 500px;
		height: 250px;
		background-color: #4567DE;
		border: 1px dashed #2D2D2D;
		border-top: none
		}

	#knapp {
		margin: 0 auto;

		width: 160px;
		height: 35px;
		background: url(knapp.jpg);
		cursor: pointer
	}
</style>

</head>
<body>
<div id="box"></div>
<div id="knapp"></div>
</body>
</html>