Ramverk-Lösningsexempel

**Tabs & Panels med och utan JQuery UI plugin**

 * Av: Jevgenijs Kulikovs
 * Ramverk: JQuery, JQuery UI plugin
 * Kort beskrivning: Jag är mycket fascinerad hur JQuery kan hantera Html/Text innehåll på ett smart sätt och därför jag har skapat 2st versioner av Tabs & Panels med Jquery UI plugin och utan den för att jämföra de två.
 * Länk med användning av JQuery UI plugin: []
 * Länk utan användning av JQuery UI plugin (bara vanlig JQuery): []


 * Av: Mikael Lommerdal
 * Ramverk använt: JQuery, JQuery UI
 * Kort beskrivning: Använde JQuery för att skapa ett windows liknande skrivbord på webben med ikoner som går att flytta runt och klicka på.
 * Länk:[]

**Svends handlekurv**

 * Av: Svend Andreas Horgen
 * Ramverk brukt: RICO
 * Kort beskrivelse: Ajax-basert handlekurvløsning. Forutsetter filene rico.js og prototype.js. Se gjerne kildekoden (høyreklikk/vis kilde)
 * Link: [|http://aitel.hist.no/~svendah/ajax/handlekurv-rico/handlekurv-RICO.html]

**Drag and drop med JQuery**

 * Av: Jonny Nordin
 * Ramverk använt: JQuery, JQuery UI
 * Kort beskrivning: Utnyttjade ramverket JQuery och tillägget UI för att visa hur enkelt man kan skapa drag and drop funktionalitet med lite extra finesser. Man behöver jquery-1.3.2.js, ui.core.js, ui.draggable.js, samt ui.droppable.js.
 * Länk: http://student.labb.itm.miun.se/~jono0402/lab7/jq_dragndrop.htm

Drag & drop med MooTools

 * Av: Patrik Lantz
 * Ramverk använt: MooTools
 * Kort beskrivning: Använde MooTools för att skapa en sida där det går att ändra storleken på en bild med hjälp av drag & drop.
 * Länk: [|http://student.labb.itm.miun.se/~pala0902/ovn7/]

Pusselspel (Drag & drop) med Prototype

 * Av: Alexander Hansson
 * Ramverk använt: Prototype, Scriptaculous
 * Kort beskrivning: Med hjälp av Prototype med tillägget Scriptaculous skapades ett enkelt pusselspel utan logik med drag & drop funktionalitet. Filer som krävs: prototype.js, scriptaculous.js, effects.js och dragdrop.js.
 * Länk: http://student.labb.itm.miun.se/~alha0501/Uppgift7

Tabnvigation using jQuery and CSS Tabs 2.0

 * Av: Kevin Lund
 * Ramverk använt: jQuery
 * Kort beskrivning: Med hjälp av ytterst lite kod jQuery och [|CSS Tabs 2.0] skapades en enkel tabbnavigation med fade-in effekt.
 * Länk: [|http://student.labb.itm.miun.se/~kelu0900/labb7/index.html]

Flyttbara boxar, Tooltips mm.

 * Av: Przemyslaw Rutkowski
 * Ramverk använt: JQuery och JQuery UI
 * Kort beskrivning: det här exemplet kan ses som ett (väldigt) förenklad version av BBC.co.uk. Det finns ett par boxar på sidan som man kan flytta mellan tre kolumner. Med hjälp av toggle-funktionen i JQuery kan man gömma eller visa olika boxar. Eftersom det finns inget "title" attribut för button-elementet hjälper oss JQuery med en liten tooltip som visar en kort förklaring.
 * Länk: []

Beställning av flygbiljetter (uppgift 4.3) + animeringar
> [|uppgift 4.3]
 * Av: Haris Drapic
 * Ramverk använt: Dojo
 * Kort beskrivning: löste uppgiften 4.3 med hjälp av Dojo + på en html sida illustreras de olika animeringarna som kan göras med Dojo
 * Länk:[|animeringar]

Uppgift 3.2 med Prototype

 * Av: Lars Nohle
 * Ramverk använt: Prototype
 * Kort beskrivning: Återimplementerade uppgift 2 i labb 3 med ramverket Prototype.
 * Länk: [|http://webblabb.miun.se/~lano0400/lab7/exercise2.html]

Validering av formulärdata med JQuery och plugin

 * Av: Johan Norberg.
 * Ramverk använt: [|JQuery 1.4.2] + [|JQuery Validation Plugin].
 * Kort beskrivning: Använder mig av en plugin med standardiserade regler för validering för att utföra en tillförlitlig kontroll av formulärdata. T.ex kan den kontrollera formen av en mailadress eller kontrollera validiteten hos en URL och returnera ett booleansk värde.
 * Länk: []

RSS-läsare med jQuery UI

 * Av: Anders Honkamaa
 * Ramverk: jQuery UI
 * Kort beskrivning: Löst uppgift 8 med jQuery UI. Visar exempel på xml hantering med jQuery, animation för att visa/dölja element, animerade dialogrutor, och drag och släpp funktion. Fungerar inte med IE8 (har ej testat andra versioner). Fungerar dåligt i Chrome, men med Firefox eller Opera fungerar allt som det ska :)
 * Länk: http://webblabb.miun.se/~anho0803/ajaxrss/rss.html

Byta CSS dynamiskt med Dojo
> till div elementet dynamiskt.
 * Av: Anders Tobian
 * Ramverk: Dojo
 * Kort beskrivning: Ett div element har ingen CSS kopplat till det. När du trycker på de 3 olika knapparna lägger du till olika stillar
 * Länk: [|http://webblabb.miun.se/~anto0903/dojoex.html]

**Visualisering av data med Google ajax api**

 * Av: Errol Ljunghorn
 * Ramverk: Google Visualization API
 * Kort beskrivning: Ett ramverk som skapar visualisering av data, du väljer själv data som ska presenteras. I mitt exempel är det gjort i funktionen
 * Länk: []

Uppgift 3.2 återbesökt med echo-ramverket
> > (ps. jag har vissa problem med mitt labkonto; det går bra att lägga dit filer, men det verkar inte gå att komma åt dem utifrån. jag har felrapporterat det hela).
 * Av: Mats Ljungquist
 * Ramverk: Echo3
 * Kort beskrivning: En uppspicead version av uppgift 3.2 (lösenordshantering) där man öppnar upp ett fönster (flyttbart) och kan skriva in ett lösenord. När lösenordet skrivits in, stängs det lilla fönstret och resultatet av inloggningen presenteras i huvudfönstret. Lösenordet ligger i en fil 'losenord.txt' och hämtas via ajax (via echo-apiet). Det korrekta lösenordet (det finns bara ett), är 'hemligt'. Viel spass!
 * Länk: http://webblabb.miun.se/~halj0800/lab7/index.html

Uppgift 2 - Thumbnails med jQuery
= =
 * Av: Joakim Söderberg
 * Ramverk: jQuery
 * Kort beskrivning: Denna sida gör samma som i uppgift 2 fast med lite mindre och snyggare kod tack vare jQuery <3
 * Länk: [|http://webblabb.miun.se/~joso1020/uppgift07/uppgift07-02.html]

Sorterbar tabell med jQuery

 * Av: Morgan Bengtsson
 * Ramverk: jQuery, med plugin [|tablesorter]
 * Kort beskrivning: Ett enkelt sätt att sortera html tabeller med jQuery. I detta fall sorteras buggar i en bugtracker/scm som heter [|Fossil scm].
 * Exempel på orginal [|tabell].
 * Länk: förbättrad [|tabell].

Master Mind-spel

 * Av: Christoffer Fink
 * Ramverk: []
 * Kort beskrivning: En webbaserad implementering av logikspelet master mind.
 * Effekter: Fade, Appear, Drag and Drop, Grow, Shrink, Highligt
 * Länk: http://finkn.net/wmm/

Gruppera bilder dynamiskt

 * Av: Joakim Lindskog
 * Ramverk:[|jQuery] med [|jQuery UI]
 * Kort beskrivning: Ett exempel på bildgruppering med drap-and-drop och dynamisk ändring av elements storlek.
 * Effekter: Draggable, Droppable, Rezisable
 * Länk: [|på webblabb-servern]

Gästbok med jQuery och Ajax

 * Av: Andreas Engelkes
 * Ramverk: jQuery
 * Kort beskrivning: En gästbok som sparar och visar meddelanden asynkront från en MySQL databas.
 * Länk: @http://andreasengelkes.com/jquery_ajax/

Fraktaler med Raphael och AJAX

 * Av: Jonas Krook
 * Ramverk: jQuery och Raphael (egentligen ett bibliotek)
 * Kort beskrivning: Ett exempel på några olika fraktaler. Datan för att rita ut fraktalerna hämtas asynkront med jQuery och sedan ritas fraktalen upp med Raphael.
 * Länk: Fraktaler

**Varukorg med script.aculo.us**

 * Av: Joakim Ekendahl
 * Använt ramverk: script.aculo.us
 * Kort beskrivning: Varukorgsexemplet från lektion 7, löst med användning av Draggable- och Droppable-klasserna från ramverket script.aculo.us.
 * Länk: @http://webblabb.miun.se/~joek1106/lab7/scriptaculous_drag.html

Realtids Validering av input fält med JQuery
> Nu har jag gjort det väldigt enkelt för mig genom att bara kolla om det finns en snabel @ i email adressen eller inte. > Men det går ju att bygga ut hur mycket som helst. Viktigast var ju att jag fick det att fungera. > Jag utgick från denna nybörjar guide och byggde sedan på själv. PHP kunde jag sedan tidigare så det är inget nytt där > direkt. > Funktionen går ut på att varje gång som det sker en KEYUP så kollar värdet i input fältet om det är en email adress som > har ett snabel A eller inte och skickar tillbaka ren text som skrivs ut i ett divID element på sidan.
 * //Av Patrik Iden//
 * **Ramverk:** JQuery
 * **Kort förklaring**: Det är tänkt att denna webb applikation skall validera en email adress i realtid och tala om den är validerad eller ej.
 * **Länk exempel:**[]

Persistent kanbanboard utan server med JQuery

 * **Av:** Leif Ershag
 * **Ramverk:** JQuery
 * **Kort förklaring**: Ett kanbanboard som använder LocalStorage för att se likadant ut när man går in olika gånger. Helt DHTML-baserat nu, dvs ingen serverinteraktion, ingen lagring i databas eller liknande. Allt sparas hos klienten.
 * **Länk**: []

Data binding med knockout.js

 * **Av:** Anatoly Mironov
 * **Ramverk:** [|knockout.js]
 * **Kort förklaring**: Ett litet exempel på hur man "bindar" data till html-elementen och låter datamodellen uppdateras i och med innehållet i html-elementen ändras.
 * **Länk**: []