Kontrolka wyboru wyboru z listy

Formularze aplikacji składają się z szeregu pól. Sam HTML ma wbudowany szereg elementów podstawowych takich jak pole tekstowe, wyboru czy też checkbox. W realnej aplikacji to nie wystarcza. Dlatego też większość programów posiada własne kontrolki, których wygląd i zachowanie jest dopasowane do charakteru całości. Jedną z takich kontrolek przedstawię poniżej. Jej zadaniem jest umożliwienie wybrania pozycji z listy (czyli tabelki lub gida, która jest wyświetlana w odrębnym oknie).

 Kontrolka jest stosunkowo prosta: składa się z dwu elementów. Ikony w kształcie strzałki, służącej do przejścia do okna z listą oraz tytułu aktualnie wybranej pozycji. Kod HTML dla powyższego przykładu, obramowanie, wyrównanie jest trywialny więc nie będę go omawiał.

zwiększanie funkcjonalności

Taką kontrolkę możemy wzbogacić o dodatkową funkcjonalność, podnoszącą ergonomię programu. Przykładowo częstym działaniem użytkownika jest potrzeba dopisania nowej pozycji i następnie wybrania jej.

Dodanie przycisku dodaj wydaje się oczywiste. Ale tak nie jest. Taki dodatkowy przycisk to strata cennego miejsca na ekranie oraz drobna utrata czytelności.
Natomiast możemy skonstruować kontrolkę dynamicznie zmieniającą się pod wpływem działania użytkownika. W tym przykładzie Przycisk DODAJ wraz z tytułem ukazuje się dopiero gdy użytkownik najedzie na na pole. Gdy myszka jest poza to kontrolna jest w swojej podstawowej, surowej formie. Taka zmienność naturalnie podkreśla i uwypukla dodatkową funkcjonalność.

kod css

.fieldpicksupp{
position: absolute;
right:0;
top:0;
height:100%;
width:60px;
background:url(mark16.png) no-repeat right top;
display:none;
}

.fieldpick:hover .fieldpicksupp{ display:block;}

Powyżej jest zawarty fragment kodu css. Nie jest to gotowy przykład, myślę jednak że taki fragment wystarczy do przekazanie podstawowej idei. Dość powiedzieć że fieldpick jest identyfikatorem klasy kontrolki, a fieldpicksupp identyfikatorem klasy przypisanej do fragmentu mającego się ujawnić gdy użytkownik najedzie na kontrolkę. Cała dynamika uzyskana jest poprzez wykorzystanie pseudo klasy :hover, dzięki której możemy przypisać różne atrybuty kontrolce w zależności od akcji użytkownika. Dzięki jej istnieniu całe zagadnienie sprowadza się do kilku deklaracji w CSS, nie musimy zupełnie zaprzęgać do tego języka skryptowego.

cieniowanie

Dodanie nowego elementu do kontrolki, który przykrywa (chociaż tylko czasami) tytuł zmniejsza użyteczność programu. Aby to ograniczyć można spowodować aby ten dodatkowy element stał się półprzeźroczysty. Przy odpowiednio dobranych parametrach widzimy i pełny tytuł i ukazujący się przycisk.

.fieldpicksupp span{
background: -moz-linear-gradient(left, rgba(159,210,204,0.9), rgba(235,255,255,0.3));
background: -webkit-gradient(linear,left top ,right top, from( rgba(159,210,204,0.8)), to(rgba(235,255,255,0.3)));
}

Aby podkreślić walory estetyczne wykorzystano gradientowe wypełnienie tła. Jest to jedno z możliwości wprowadzonych w HTML5, dostępnych w przeglądarkach opartych o Mozillę oraz WebKit. Niestety nie jest to jeszcze zatwierdzony standard, więc wpisy są oddzielne dla każdej z przeglądarek (każdy ma indywidualny prefix).

podsumowanie

Powyżej przedstawiono przykład rozbudowy kontrolki. Dokonano jej poprzez dodanie kilku deklaracji w CSS. Takie deklaratywne podejście ma szereg zalet. Po pierwsze jest czytelniejsze od analogicznego zapisu w Javascript. Po drugie Nie musimy się martwić o zgodność z przeglądarką, zgodnie z przyjętą regułą przeglądarka ignoruje wpisy których nie rozumie. Po drugie może być szybsze (teraz lub w przyszłości) gdyż przeglądarka może przeanalizować występujące deklaracje i przygotować wymagane elementy. Przy skryptach ogólnego przeznaczenia jest to utrudnione. Po trzecie mamy program naturalnie dopasowujący się do możliwości komputera. Gradienty, cieniowania itp mogą zostać pominięte na słabszych urządzeniach.