Technologie i narzędzia: język PHP 5, Java, JavaScript, Python, system Zend Framework, Django, biblioteka jQuery, Smarty, platforma Eclipse, MySQL, SVN, CVS, UML, Firefox.
WebProgramming - wszystko o serwisach internetowych
O serwisach internetowych.
[javascript|jquery] Labin - Wtyczka obsługująca etykiety w polach typu input.
Dzisiaj mam dla Was prostą wtyczkę jQuery, która obsługuje etykiety opisujące pola tekstowe typu input w środku tego pola, na przykład: 
Podstawowa funkcjonalność “etykiet w środku” polega na tym, iż po kliknięciu na pole tekstowe napis “Wpisz frazę” powinien zniknąć, natomiast po opuszczeniu pola powinien ponownie się pojawić, pod warunkiem jednak, iż użytkownik nie wpisał żadnej wartości.
Dodatkowo moja wtyczka (którą nazwałem labin) potrafi podmienić (lub tylko dodać) klasę CSS w zależności od sytuacji: jedna klasa dla nieaktywnego pola (gdy pojawia się etykieta - patrz rysunek wyżej) i druga dla aktywnego (gdy użytkownik coś wpisał lub aktualnie wpisuje - patrz rysunek obok) 
.
Etykieta jest pobierana na podstawie pierwszego argumentu wtyczki lub z atrybutu alt danego pola tekstowego, oto przykłady wykorzystania:
-
$(‘#searchInput’).labin("Wpisz frazę", "active"); // wpisz w pole etykietę "Wpisz frazę" oraz dodaj klasę CSS "active" dla aktywnego pola
-
$(‘#login’).labin("Wpisz login", "active", "noactive"); // wpisz w pole etykietę "Wpisz login", dla aktywnego pola ustawiaj klasę CSS "active" dla nieaktywnego podmieniaj ją na "noactive"
-
$(‘input[@alt]‘).labin(false, "active"); // dla wszystkich pól typu input z ustawionym atrybutem alt ustawiaj etykietę na podstawie wartości tego atrybutu oraz dodaj klasę CSS "active" dla aktywnego pola
Pozostaje jeszcze jeden problem związany z tak obsługiwanymi etykietami - gdy użytkownik nie wpisze żadnej wartości, to podczas wysyłania formularza wartość pola będzie równa etykiecie, a to nie jest pożądane zachowanie. Aby temu zapobiec stworzyłem jeszcze jedną funkcję jQuery, która zwraca czystą wartość, wg zasady:
- jeżeli wartość pola równa się etykiecie zwróć pusty napis (tzn “”),
- w przeciwnym przypadku zwróć wartość, która zwraca funkcja val();
Wykorzystanie funkcji jest trywialne:
-
var login = $(‘#login’).labinVal(); // zwróć wartość wpisaną przez użytkownika
Możliwe udoskonalenia:
- Automatyczne czyszczenie wartości pola w trakcie wysyłania (ang submit) formularza, w którym dane pole się znajduje.
- Większa konfigurowalność wtyczki.
Aby podejrzeć kod źródłowy kliknij tutaj, aby ściągnąć je kliknij tutaj.
Napisz komentarz