Kom igang med JQuery
Av: Øyvind A. Isaksen
JQuery er et JavaScript-bibliotek som inneholder en mengde ferdiglagde komponenter som du kan benytte deg av uten å faktisk kunne JavaScript. Ved hjelp av JQuery kan man på en enkel måte lage “interaktive” websider. Målet med dennen tutorialen er å vise hvordan man kommer i gang med JQuery. Først viser vi hvordan man laster ned og setter opp JQuery, deretter lager vi en enkel løsning som viser hvordan du kan vise/skjule innhold ved mouseover på et valgt element. Når du har blitt ferdig med denne Jquery introduksjonen finner du flere tutorials under "Jquery kurs" i menyen til venstre. Lykke til!
Summary: Learn JQuery step by step.
Vi ønsker å lage en løsning som består av en blå og en grønn boks. Når du tar musa over den blå boksen vil den grønne boksen vises, ellers skal den skjules. Dette ønsker vi å løse ved hjelp av JQuery.
Det første vi må gjøre er å gå inn på http://www.jquery.com og laste ned siste versjon av JQuery (dagens versjon heter jquery-1.3.2.min.js). Det skal være en direkte link til nedlasting på forsiden, alternativt kan du laste ned JQuery her: http://docs.jquery.com/Downloading_jQuery
Start så opp Visual Studio og opprett en nytt web prosjekt. Lag en mappe med navnet "scripts" i webprosjektet ditt og legg jquery-1.3.2.min.js filen i denne mappen. Opprett så en ny .aspx fil i visual studio, gi den feks navnet "default.aspx". Legg inn følgende kode i fila:
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Tutorial: Kom i gang med JQuery</title>
<!-- Referanse til JQuery Library: -->
<script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
<!-- Referanse til stilsett: -->
<link rel="Stylesheet" type="text/css" href="css/style.css" />
<!-- JQuery: -->
<script type="text/javascript">
$(document).ready(function() {
//Skjuler klasse2 når DOM er klar:
$('.boks2').hide();
//Skjuler og viser klasse2 ved mouseover::
$(".boks1").hover(function() {
$('.boks2').show();
}, function() {
$('.boks2').hide();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="boks1">Boks1</div>
<div class="boks2">Boks2</div>
</div>
</form>
</body>
</html>
Det eneste vi mangler nå er å bestemme utseende på de to boksene våre. Vi ønsker å sette størrelsen på dem, samt gi dem forskjellig farge slik at vi lett kan skille dem fra hverandre. Opprett en mappe med navn "css" og lag en fil med navnet style.css i den. Legg inn følgende i stilsettet:
Style.css
body {
}
.boks1{
background-color: #3366cc;
width:100px;
height:100px;
float:left;
}
.boks2{
background-color: #ccff00;
width:100px;
height:100px;
float:left;
}
Da er det bare å teste ditt første JQuery skript! Om du har gjort alt korrekt vil en grønn boks vises når du tar musa over den blå boksen. Når du tar musa vekk fra en blå boksen vil den grønnen boksen forsvinne igjen.
Screenshot av resultat
Se flere kurs under "KURS / TUTORIALS" i menyen til venstre!
|
