• Strona główna
•  
• Projekty
•  
• Smerf - plugin jquery

Smerf - plugin jquery

28 marca 2010

O co chodzi?

Zadaniem opisywanego pluginu jest odwzorowanie w postaci graficznej wartości wprowadzonych w pola formularza. Widząc, że po wprowadzeniu np. loginu i hasła obrazek nie jest taki jak zwykle – użytkownik otrzymuje informację „Hej, musiałem zrobić gdzieś błąd”. Unika przeładowania strony by i tak po chwili dowiedzieć się, że nieprawidłowo wprowadził hasło. Dodatkowym atutem może być swobodny wybór grafiki – a jak wiadomo to ona w głównej mierze tworzy stronę.

Jak działa możesz zobaczyć już teraz pod tym linkiem.

W jakim warunkach zadziała

Do działania „smerfa” niezbędny jest skrypt jQuery (w wersji 1.3 i wyżej). Został przetestowany na głównych przeglądarkach: firefox, ie7+, opera, safari, chrome i na nich na pewno zadziała. Oczywiście, pod warunkiem, że użytkownik ma uruchomioną obsługę js ;-)

Wywołanie

Aby uruchomić skrypt musimy załadować go w kod naszej strony wprowadzając lokalizację do niego

<script type="text/javascript" src="sciezka/jquery-smerf.js"></script>

Samo wywołanie w podstawowej formie odbywa się poprzez wprowadzenie kodu jak poniżej:

<script type="text/javascript">
$("#input1,#input2").smerf({pole:#idokna});
</script>

Gdzie #input1 i #input2 to pola formularza, na których edycję ma reagować, #idokna to identyfikator okna, w którym znajduje się przesuwa element. Co prawda domyślnie ma ono id=”emoIcon” ale na pewno w waszych projektach przyjmie ono inną nazwę.

Parametry

Oto z jakimi jeszcze parametrami można wywołać działanie pluginu:

• anim – przybiera wartość (domyślną) false lub true – wskazanie czy grafika ma być animowana czy startyczna
• expLen – wartość numeryczna od 10 (domyślnie) do 100 - dokładność z jaką ma działać wyliczanie: wartość pól → grafika reprezentująca. Im większa wartość atrybutu tym mniejsza szansa na to że różne kombinacje wartość z pól zostaną zaprezentowane przez tą samą grafikę. Ale należy pamiętać że: ustawiając expLen na 20 należy przygotować 21 grafik, dla 30 – 31 itd.
• grande - przybiera wartość (domyślną) true lub false – wskazanie czy ma rozróżniać wielkości liter czy też „a” traktować identycznie jak „A” - gdy wartość false.
• pole – jak pisałem wcześniej – podanie nazwy (najczęściej będzie to id) kontenera, w którym ma się znaleźć element przesuwany

Zestaw plików (grafika, css, js) do pobrania tutaj. Oczywiście wymagane jest podłączenie jquery (od wersji 1.3 w górę).

Aktualności

Projekty

Chmura tagów

Komentarze