Selektor koloru w formularzu

Często w formularzach chcemy mieć pole pozwalające podać wartość koloru. Pewnie są tacy co potrafią z pamięci podać szesnastkową wartość niejednego koloru, ale przeciętny użytkownik Internetu na pewno nie posiada takiej umiejętności, a poza tym wpisywanie kodów z klawiatury jest niezbyt wygodne. Z pomocą przychodzi selektor koloru dołączony do formularza.

Tworze właśnie dla klienta konwerter, pozwalający stworzyć plik pdf na podstawie danych z cvs. Po drodze klient chce mieć możliwość sparametryzowania kolorów i krojów czcionek jakie mają być w pdf użyte. No jest tego sporo i tym bardziej selektor koloru ułatwi pracę. Nie musiałam długo szukać, żeby natknąć się na przyjemne i proste w użyciu narzędzie jakim jest dodatek do jQuery o wdzięcznej nazwie miniColors.

Zatem po kolei. Jeśli nie mamy pobieramy sobie skrypt jQuery ze strony projektu http://jquery.com/. Następnie pobieramy sobie plugin z github. Umieszczamy te pliki w podkatalogu js i przystępujemy do działania.

W nagłówku naszego dokumentu html dodajemy stosowne skrypty:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/miniColors/jquery.miniColors.js"></script>
<link type="text/css" rel="stylesheet" href="js/miniColors/jquery.miniColors.css" />		
<script type="text/javascript" src="js/colorSelectors.js"></script>

Ostatni skrypt będzie zawierał kod wiążący selektor koloru z odpowiednim polem formularza.

Załóżmy więc, że w formularzu mamy pole do wpisywania koloru:

<label for="color">kolor:</label><input type="input" name="color" value="#000000" id="color" />

Wystarczy więc w skrypcie colorSelectors.js umieścić następujący kod:

$(document).ready( 
      function() {
	  $("#color").miniColors();	
});

I można się już cieszyć efektem. Obok pola służącego do wpisywania kodu koloru (ciągle można to zrobić ręcznie) pojawia się dodatkowy kwadracik o barwie odpowiadającej aktualnie wpisanemu kodowi. Po kliknięciu myszką na pole formularza lub na ten kwadracik pojawia się bardzo zgrabny selektor koloru:

To najprostsze użycie tego pluginu, ale ma on jeszcze trochę możliwości, których na razie nie zgłębiłam. Polecam samodzielne studia. Sama może będę kiedyś wykorzystam jego bardziej zaawansowane właściwości.