,

Ajax i webbdesign

ajax-i-webbdesign

I modern webbdesign är AJAX nästan ett måste. Förutom funktionalitet så erbjuder det även en bättre upplevelse med övergångseffekter som exempelvis animationer.

Tack vare många befintliga Ajax-ramverk så slipper vi skriva en massa kod och kan istället fokusera på design och funktionalitet. Här har du 18 Ajax-plugins som du kan använda för att förhöja användarens upplevelse när han/hon besöker din hemsida.

Bildförstoring och popups

Lightbox
Lightbox känner du förmodligen till. Den visar upp bilder genom att lägga sig över och mörklägga innehållet. Sen Lightbox släpptes har ett antal varianter dykt upp.

Thickbox
Thickbox fungerar i samma princip som Lightbox, fast med mer möjligheter. Med Thickbox kan du visa upp en bild, flera bilder, textbaserat innehåll mm.

FancyBox
Med Fancybox får du en snyggare övergån från miniatyr till stor bild. Designen är väldigt ”Mac”. Ett bra alternativ till Lightbox.

Highslide JS
Med Highslide visas bilderna genom att ”zoomas” fram när du klicka på thumbnailen.

jQZoom
jQZoom låter dig visa en förstorad bild av thumbnailen, i realtid. Väldigt användbar till exempelvis e-shops.

Bildgalleri och Slideshows

Slideshow 2 for Mootols
Ett JavaScript för Mootols 1.2 för att animera bildpresentationer på din webbplats.

SmoothGallery
Genom Mootools använder du detta script för att visa en simpel slideshow av dina bilder med diskreta övergångar.

jQuery Galleria
Galleria är ett script skriver i jQuery. Det laddar in bilderna en åt gången från en lista och visar bilderna när som thumbnails när de laddats klart. Du kan själv styra thumbnailens utseende med hjälp av lite CSS.

Noobslide
Med Noobslide kan du köra tidsbestämda slideshows och styrning med paneler.

Tabbar

jQuery UI Tabs
jQuery UI Tabs, ett väldigt effektivt sätt att visa information i en box. Vill du behålla boxens dimensioner men även ha mycket information? Använd då detta tabb-systemet!

MooTabs
MooTabs är ett väldigt litet script (3kb) som används för att göra ett enklare tabb-system.

Sliding Tabs Tutorial
En tutorial från Nettuts.com där du lär dig göra ”sliding tabs” med jQuery.

Accordion menyer

jQuery Accordion
Detta script skapar en s.k. Accordion menu. Fungerar med listor, nästlade listor eller nästlade divar.

Apple Accordion
Lär dig skapa en accordion-meny i stil med Apple.com

Apple Accordion
Ett annat sätt att skapa en accordion-meny. Här använder du dig av MooTools.

Bild- och textersättning

sIFR 3
sIFR är ett script som i kombination med Flash och CSS ger dig möjligheten att använda vilket typsnitt du än vill, utan att förstöra din optimering!

jQuery sIFR
jQuery plugin som gör grovjobbet åt dig…

FLIR
Facelift Image Replacement är ett script som dynamiskt genererar en bild av ditt typsnitt. Fungerar i alla moderna webbläsare.

Relaterade inlägg

9 Kommentarer
  1. Lars
    Lars says:

    Ursäkta, men de flesta exemplen är väl inte Ajax utan bara olika slags DHTML-effekter. Måhända är de bra mycket mer välgjorda än under den fruktansvärda DHTML-eran, men Ajax är det inte.

    Svara
  2. Lars
    Lars says:

    Ursäkta, men de flesta exemplen är väl inte Ajax utan bara olika slags DHTML-effekter. Måhända är de bra mycket mer välgjorda än under den fruktansvärda DHTML-eran, men Ajax är det inte.

    Svara
  3. Antonio Riveras
    Antonio Riveras says:

    Lars, du har helt rätt. De flesta exemplen är bara välgjorda JavaScript lösningar.

    Men eftersom många relaterar Ajax med att ”inte behöva ladda om eller öppna upp en ny ruta”- teknik så valde jag att kalla detta inlägg för ”Ajax i webbdesign”.

    Det har blivit norm att kalla sådana lösningar för just ”Ajax”, fast de egentligen inte är det…

    Tack!

    Svara
  4. Antonio Riveras
    Antonio Riveras says:

    Lars, du har helt rätt. De flesta exemplen är bara välgjorda JavaScript lösningar.

    Men eftersom många relaterar Ajax med att ”inte behöva ladda om eller öppna upp en ny ruta”- teknik så valde jag att kalla detta inlägg för ”Ajax i webbdesign”.

    Det har blivit norm att kalla sådana lösningar för just ”Ajax”, fast de egentligen inte är det…

    Tack!

    Svara
  5. Richard Olsson
    Richard Olsson says:

    Om det nu har blivit en norm så är det endast därför att vi som vet bättre låter folk missförstå det. Det är beundransvärt att du lägger tid på att hjälpa folk på det här viset, men hjälp rätt istället för att underbygga missförståndet och ursäkta det med att skadan redan är skedd.

    Svara
  6. Richard Olsson
    Richard Olsson says:

    Om det nu har blivit en norm så är det endast därför att vi som vet bättre låter folk missförstå det. Det är beundransvärt att du lägger tid på att hjälpa folk på det här viset, men hjälp rätt istället för att underbygga missförståndet och ursäkta det med att skadan redan är skedd.

    Svara

Trackbacks & Pingbacks

  1. […] JQuery at it best!? Downloadable JQuery plugins and Widgets for you | Spicy News @ Express Speed. Emblematiq :: Niceforms :: Overview Search-based keyword tool 8 CSS Techniques for Charting Data – Six Revisions Ajax i webbdesign | Grafix Studio – webbdesign och grafik […]

Lämna en kommentar

Want to join the discussion?
Feel free to contribute!

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *