Fordelaktig.no
Webutvikler kurs ASP.NET, C#, CSS mm.

WebRessurs.no - Webprogrammering og ressurs innen ASP, ASP.NET, PHP, SQL, HTML, CSS, Javascript, XML, C#, VB, Flash  mm.

Brukernavn: 
Passord:

Registrèr deg Glemt passord?
Logg deg inn




  ASP.net (199)
  ASP 3.0 (111)
  PHP (30)
  HTML (66)
  SQL (89)
  CSS (46)
  XML (7)
  JavaScript (78)
  Diverse kode (13)


  Programmering (22)
  System og drift (15)
  Trafikk og inntekt (11)
  Guider og tips (22)
  Nyttig lesestoff (23)
  Web forum (603)
  Link galleri (566)


  ASP.NET kurs(5)
  CSS kurs (2)
  JQuery kurs (2)


  Øk trafikken (8)
  Facebook App. (4)
  Microsoft CEO (6)


  Server & web
  Internett & epost
  Systemverktøy
  Sikkerhet
  Fildeling
  Lyd & media
  Diverse software


  Domenesalg
  Metagenerator
  Websikre farger
  Gratis epost
  WebMail


  Bli medlem!
  Siste innlegg
  Gjestebok
  Tips en venn
  Kontakt oss
  Forsiden




Kode Artikler
Linker


Mål internetthastigheten din.


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.



Illustrasjonsbilde

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



Illustrasjonsbilde


Se flere kurs under "KURS / TUTORIALS" i menyen til venstre!


WebRessurs.no anbefaler:    StackOverflow.com | Experts-Exchange.com | W3schools | ASP.NET | Codeproject | 4Guys
WebRessurs.no er utviklet og drives av SoftMaker LTD
Sett som startside: [ ]. Bokmerk denne siden: [ klikk ]. Sitemap. http://twitter.com/webressurs_no/. Antall brukersesjoner: 9239039.
Copyright WebRessurs.no © 2003 - 2015
Turvenn.no