Automatiska ikoner på länkar med jQuery

Postat den 21 juli 2009 av Andreas Karman

Att manuellt lägga till en bild eller en speciell CSS-klass för varje länk är inte bara tidskrävande, det kan också vara svårt att klara för en redaktör. Men det finns en smidig lösning baserad på jQuery som automatiserar detta.

Med jQuery implementerat och ytterligare några rader kod kan du automatiskt få till så att länkar med en speciell filändelse får en egen CSS-klass med en egen ikon.

Implementera jQuery

Först och främst måste du ladda ner jQuery och implementera det på din webbplats. Lägg filen i samma katalog som din webbplats och lägg in följande kod mellan HEAD-taggarna i ditt HTML-dokument.

Fredrik Pahlin tipsar i kommentarerna om att man också kan ladda in jQuery från Google.

jQuery-kod

För att åstadkomma den automatiska tilldelningen av CSS-klasser, använd jQuery-koden nedan. Vad koden gör är att den letar genom ditt HTML-dokument efter länkar till filer som har filändelsen som är nämnd i koden och lägger till en specifik CSS-klass för den länken.

I mitt första exempel är det ”.pdf” som är filändelsen som javascriptet letar efter och dessa länkar får CSS-klassen ”pdf”. Lägg även denna kod mellan webbplatsens HEAD-taggar.

Du kan till exempel också lägga till samma funktionalitet för .doc, en filändelse som används av Microsoft Word.

CSS-kod för ikonerna

Nästa steg är att lägga till CSS-klasser med ikonerna som bakgrundsbilder. Här är ett exempel på en CSS-klass för PDF-ikonerna. Bakgrundsbilden för PDF-ikonerna som jag använder är denna.

Det här inlägget postades i Okategoriserade och har märkts med etiketterna , , , , . Bokmärk permalänken.
  • http://fredrikohlin.com/ Fredrik Ohlin

    Bra tips!

    Jag skulle använt jQuery från Googles servrar istället för min egen. De är ju snälla och har ett AJAX API – enklast är att bara använda denna URL (för samma version som ovan): http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

  • http://www.andreaskarman.se Andreas Karman

    Bra tips Fredrik, lägger in det i inlägget.

  • http://www.pierresoderman.com Pierre Söderman

    Mycket användbart tips. Perfekt för vårt företags publiceringssystem. Kommer att pusha.

  • http://cynatic.org Andreas Johansson

    Varför använda jQuery från Google än att köra det internt?

  • http://www.andreaskarman.se Andreas Karman

    Andreas, här är några fördelar:
    - Filen laddas ner från en server nära besökaren (CDN)
    - Om besökaren redan har besökt en webbplats som använder Googles server för jQuery är filen förmodligen cachad
    - Man delar upp HTTP-förfrågningarna på flera domäner (webbläsare hämtar normalt endast två filer pararellt från samma domän)

  • http://www.svenskwebbutveckling.se Chrille

    Samma fundering som Andreas Johansson, varför använda jQuery från Google när man kan köra internt och ha full kontroll?

  • http://wangstedt.net Karl Wångstedt

    Enklast om du kör WordPress är att använda WP-disten av jQuery genom att lägga till följande i din functions.php:

    function _load_script_libraries() {
    wp_enqueue_script(‘jquery’);
    }
    add_action(‘init’,'_load_script_libraries’);

  • http://sulo.se/ Jonathan Sulo

    HTTP 1.1 rekommenderar max 2 samtidiga anslutningar, men webbläsarna brukar åtminstone köra 4 anslutningar. Sen är det anslutningar/CNAME, inte domän, vilket innebär att man tjänar på att t ex sprida sitt material till olika subdomäner (t ex img.domän.se för bilder, css.domän.se för css osv).

  • http://twitter.com/chmod007 David Remahl

    Kan göras utan att blanda in JavaScript:

    a[type="application/pdf"], a[href$=".pdf"] {
    padding: 0 0 0 25px;
    background: url(images/icon-pdf.gif) no-repeat;
    }

  • http://www.andreaskarman.se Andreas Karman

    Visst går det David, men att alla versioner av Internet Explorer inte gillar det är en nackdel.

  • http://andreaskarman.se/2009/07/23/varfor-ska-man-anvanda-jquery-fran-google/ Varför ska man använda jQuery från Google? | Andreas Karman

    [...] mitt inlägg om automatiska ikoner på länkar med jQuery kom frågan i kommentarerna, varför man ska implementera JavaScript-biblioteket jQuery från [...]

  • http://twitter.com/chmod007 David Remahl

    Andreas: Jag känner ingen som använder IE så det var inte ett övervägande för mig. ;-)

  • http://wpxl.se/tips/wordpress-tips-lankar-v30-09/ WordPress Tips & Länkar v30-09 | wpxl

    [...] Det finns en möjlighet att lägga till en gravatar (Liten bild) på varje artikel för att uppmärksamma vilken som skrivit artikeln. Det är en snygg och bra funktion om man exempelvis är flera stycken som skriver på en blogg. Med hjälp av Nice2all kan ni ganska enkelt lägga in en bit kod för att visa er gravatar av er själv i varje inlägg.   Automatiska ikoner på länkar med jQuery [...]