Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Florian Fiegel 15. Januar 2009

Smile-Designer Smile – jQuery-Plugin für pixelgenaues Design

Kein Beitragsbild

Einige wer­den das Firefox-Firebug-Plugin Pixel Perfect ken­nen, das sich unter ande­rem auch im Artikel Mehr Power für Firebug fin­det. Es ermög­licht den Overlay eines Screendesigns auf einer Webseite um Designs pixel­ge­nau ver­glei­chen zu kön­nen. Eine wun­der­ba­re Geschichte, lei­der funk­tio­niert das Plugin nicht in den ande­ren Browsern für die regel­mä­ßig nach­ge­bes­sert wer­den muss.

Den Jungs von 9elements ist zwar das Plugin ent­gan­gen, aber dafür haben sie gleich einen Schritt wei­ter­ge­dacht, denn sie haben ein jQuery-Plugin gebaut das unab­hän­gig vom Firefox auch in allen ande­ren Browsern funk­tio­niert.

Das klei­ne Helferlein benö­tigt natür­lich jQuery und das Plugin selbst, sowie ein paar Zeilen Code zur Initialisierung. Nach dem Einbinden lässt sich das Screenlayout ein­fach mit­tels eines Doppelklicks ein­blen­den und ver­schie­ben. So sieht der benö­tig­te Code dann bei­spiels­wei­se aus:

//Initialisierung jQuery(document).ready(function() { jQuery('#dummy').smileDesignerSmile('my_awesomelayout', { backgroundPosition : "-100px 100px", opacity : "0.7"} ); });

Den Beitrag zum Smile Designer Smile fin­det man im Blog von 9elements und auch eine Demo kann man sich direkt anschau­en.

Florian Fiegel

Seit 2008 freier Webworker mit Schwerpunkt auf journalistischer Berichterstattung und (Online-)PR. Täglich konfrontiert mit unzähligen Tools und Technologien im Web.

2 Kommentare

  1. > Das klei­ne Helferlein benö­tigt natür­lich jQuery und das Plugin selbst, …

    Das Plugin braucht jQuery und das Plugin. Und das Plugin benö­tigt das Plugin. Und…

    ;-)

  2. ui nicht schlecht. das wer­de ich bei gele­gen­heit mal aus­pro­bie­ren den­ke ich :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.