in Guider

Kompakta formulär med jQuery och CSS

För någon dag sedan snubblade jag över en artikel på alistapart.com där Mike Brittain går igenom hur man kan göra sina inloggningsformulär (och andra formulär också för den delen) lite mer kompakta och samtidigt behålla tillgängligheten.

I artikeln använder sig Mike av Javascript och CSS för att visa/dölja label’s (hädanefter kallar jag dem för etiketter) ovanpå input-fälten. I stället för att som i Mark’s exempel använda ett ”vanligt” Javascript så hade jag tänkt gå igenom hur man kan använda sig av det utmärkta Javascript-biblioteket jQuery, och dessutom få till lite snygga effekter.

Innan vi sätter igång så rekomenderar jag att ni läser igenom hela artikeln på alistapart.com.
Jag kommer utgå från Mark’s Färdiga Exempel och vidareutveckla det.

Eftersom vi inte kommer använda oss av Marks javascript så kan vi helt ta bort det.
Exempel utan javascript

1) Ladda ner jQuery och inkludera det i dokumentet
För att vi ska kunna använda oss av jQuery på sidan så måste vi inkludera det i dokumentet, det finns två sätt att göra detta på.

Alternativ 1)
Ladda ner senaste versionen av jQuery och lägg jquery-latest.js i samma mapp som semicolor_login.html. Lägg sedan till följande innanför head-taggarna:

Alternativ 2)
Istället för att ladda ner jQuery så kan vi bara länka till senaste versionen som ligger ute genom att lägga till följande i innanför head-taggarna:

Fördelen med den här lösningen är att du aldrig kommer behöva uppdatera jQuery om det kommer ut i en ny version, du länkar alltid till den senaste. Nackdelen är att scripten på din sida inte kommer fungera om jQuery’s sida är nere eller är överbelastad.

2) Börja scripta
Nu kan vi börja lägga till lite jQuery-kod i dokumentet. Börja med att lägga till följande längst ner i head-taggen:

Ok, vad är det vi vill uppnå då, jo till att börja med så vill vi att alla etiketter ska ligga ovanpå respektive input-fält. I exemplet finns redan all css vi behöver för att uppnå detta.

Klassen overlabel
Alla etiketter i exemplet har klassen ”overlabel” som standard.
Klassen ”overlabel” gör inte mycket annat än ändrar färg på alla labels, i det här fallet till en grå nyans. Det här är standardklassen för alla etiketter, endast denna visas för användare utan javascript.

Klassen overlabel-apply
Den är den här klassen som vi vill att alla etiketter ska få så fort sidan laddas. Klassen gör så att alla etiketter hamnar i ett eget lager och därav hamnar input-fälten automatiskt under dem.

Anledningen varför användarnamn- och lösenords-etiketterna inte har overlabel-apply som standard är att utifall att användaren inte har javascript aktiverat i webbläsaren så kommer etikettern bara ha klassen overlabel och därav visas korrekt brevid input-fälten. Istället kommer vi med hjälp av jQuery lägga till klassen overlabel-apply till etiketterna.

Så låt oss börja. Som sagt så ska först och främst alla etiketter få klassen overlabel-apply. Tack vare jQuery krävs inte mer än en liten rad med kod.

$(document).ready(function(){
	/*Alla jQuery-script nedanför den här raden */
	$("label.overlabel").addClass("overlabel-apply");
});

Ser väl rätt enkelt ut?

$("label.overlabel")
Skapar ett jQuery-objekt som innehåller alla etiketter (label) och som har klassen overlabel.

addClass
är en jQuery-funktion som i det här fallet lägger till klassen ”overlabel-apply” till alla element i objektet $(”label.overlabel”).

Sidan ser nu ut Exempel med jQuery och overlabel-apply.
Som ni ser så försvinner inte etiketterna när man klickar på de underliggande input-fälten, det ska vi fixa med ytterligare några rader jQuery-kod:

$("input#username-field, input#password-field").focus(function() {
	if($(this).val() === "") {
		$(this).prev().fadeOut("fast");
	}
});

Kanske aningen krångligare än koden innan, men samtidigt mycket logiskt.

$("input#username-field, input#password-field")
Skapar ett jQuery objekt som innehåller alla input-fält med ID satt till username-field eller password-field.

focus(function() { });
Focus är en jQuery funktion som känner av ifall något av elementen inne i jQuery-objektet får fokus (i det här fallet om man klickar i något av input-fälten) i så fall så ska funktionen innanför parenteserna köras.

if($(this).val() === "") { }
En if-sats som kollar om $(this) (this är i det här fallet det input-fältet som har fått fokus) har värdet ”” (ingenting), i så fall ska koden innanför { } köras.

$(this).prev().fadeOut("fast");
Det är här magin sker, $(this) är objektet som fått fokus, prev() väljer det element som ligger ovanför input-fältet (etiketten ligger ovanför input-fältet i html-koden och blir då det element som nästa funktion kommer påverka). Nästa funktion är fadeOut som ”tonar ut” etiketten och får den därmed att försvinna (”fast”) anger hur snabbt detta ska ske.

Sidan ser nu ut Exempel med fadeOut. Och som ni ser så funkar fadeOut prima, men någonting fattas, såklart vill vi ju att etiketterna kommer tillbaka om man inte har skrivit någonting i input-fältet och lämnar det. Vi lägger därför till ytterligare en funktion.

$("input#username-field, input#password-field").blur(function() {
	if($(this).val() === "") {
		$(this).prev().fadeIn("fast");
	}
});

Det här är i princip samma som funktionen innan, med två små ändringar i stället för focus så använder vi blur, som är motsatsen till focus, dvs kollar om fältet mister fokus och lämnas. Och i stället för fadeOut så använder vi här fadeIn, vilket tonar in etiketten.

Sådär, nu är vi färdiga!
Såhär ser det färdiga inloggningsformuläret ut.

Sammanfattning
Det finns självklart för och nackdelar med att köra jQuery istället för som i Mark’s exempel bara använda ”vanligt” javascript.

Fördelar:

  • Man har ett robust bibliotek bakom sig som man kan använda till så mycket mer på sidan.
  • Funktionerna är väldokumenterade och just jQuery har en fantastisk community där man snabbt kan få svar på frågor och hjälp med script.
  • Det finns flera plugins till jQuery som kan göra ganska fantastiska saker. De är dessutom mycket enkla att implementera.
  • Scripten är lätta att förstå, även för personer som inte har full koll på jQuery.
  • Det går att göra egna funktioner och plugins för jQuery ganska enkelt.

Nackdelar:

  • Man har inte 100% koll på precis vad som sker under ytan, något som många tycker om att ha.
  • Kommer inte på fler nackdelar just nu.

Det här var min första guide och jag hoppas att någon kommer finna användning av den. Kom gärna med förslag.

[tags]jQuery, ajax, web 2.0, css, webbdesign[/tags]

  • Jonas

    Snyggt!
    Du gör ALAs artikel lättförståerlig och du går igenom alla steg i jQuery mycket pedagogiskt.
    *tummen upp*

  • Jonas

    Snyggt!
    Du gör ALAs artikel lättförståerlig och du går igenom alla steg i jQuery mycket pedagogiskt.
    *tummen upp*

  • Markus

    Får inte länkarna i denna artikel att funkgera…:(

  • Markus

    Får inte länkarna i denna artikel att funkgera…:(