Gör ett element klickbart med jQuery


Dags att titta på hur vi med Javascriptbiblioteket jQuery gör ett helt element med innehåll klickbart (länkat) för besökaren, vilket kan vara mer eller mindre omöjligt med validerad HTML-kod.

Markup

För detta exempel ska vi använda en lista för navigeringen, men samma teknik går att använda för alla element. Notera att du måste lägga till en länk i HTML-koden dit elementet ska peka.

[sourcecode language=’html’]

[/sourcecode]

CSS

Dags att applicera CSS på listan för att göra den mer presentabel.

[sourcecode language=’css’]
.NavList { margin: 0; padding: 0;}
.NavList li{list-style-type: none; background: #f1f1f1; padding: 10px; margin: 0 0 10px 0; border: 1px dotted #c9c9c9; cursor: pointer;}
.NavList li:hover{background: #bbbbbb; border: 1px solid #767676;}
[/sourcecode]

Funktionalitet med jQuery

Först och främst ska du se till att ladda ner den senaste versionen av jQuery. När detta är gjort måste du implementera Javascript-filen mellan HEAD-taggarna i det HTML-dokumentet som du arbetar med. Jag utgår här från att du placerar jQuery-filen i samma katalog som HTML-dokumentet.

[sourcecode language=’html’]

Demo – Gör ett element klickbart med jQuery

[/sourcecode]

Nu är det enda som återstår att även lägga till Javascript-koden som gör elementet klickbart mellan HEAD-taggarna. Javascriptet letar upp alla li-element som har ett överordnat element med namnet NavList och använder sedan värdet för href i den första länk innanför li-elementet för att länka hela objektet.

[sourcecode language=’html’]

Demo – Gör ett element klickbart med jQuery


[/sourcecode]

Gör länken användarvänligare

För att göra denna funktion mer användarvänlig kan det vara på sin plats att lägga till följande CSS på det elementet som jQuery gör om till en länk. Det gör att den muspekare som normalt visas när du för musen över en länk även visas när du för musen över objektet.

[sourcecode language=’css’]
.NavList li { cursor: pointer }
[/sourcecode]

Du kan även med CSS tydligt markera att användaren för över musen över något som är interaktivt genom att förslagsvis ha en annan bakgrundsfärg när musen förs över elementet. Hover på element som inte är länkar fungerar tyvärr inte friktionsfritt i Internet Explorer, men det blir ett ämne för ett senare inlägg.

[sourcecode language=’css’]
.NavList li:hover {background: #000; color: #fff }
[/sourcecode]

Färdig!

Har du lyckats få till allting rätt ska det nu fungera precis som exemplet. Får du det inte att fungera rekommenderar jag att ladda ner exempelfilerna för att jämföra mot det du har gjort. Jag hoppas att denna guide kommer till användning för dig – använd gärna kommentarerna för att ställa frågor eller kommentera guiden.

Web Designer Wall.