Funkcje JavaScript

Zobaczmy pierwszy przykład. W omówieniu, dla uproszczenia i jasności, będą pokazane tylko linie odwołujące się wprost do CSS. Tutaj jest cały kod JavaScript:

<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
    return; 
    Rounded("div#nifty","all","#FFF","#D4DDFF","smooth"); 
    }
   </script>

Funkcja NiftyCheck sprawdza wsparcie DOM [Document Object Model]. Jeśli próba przebiegnie pomyślnie, wywoływana jest tylko jedna tworząca zaokrąglony narożnik funkcja Rounded, w której trzeba ustawić minimum cztery z pięciu parametrów. Te parametry to:

1. Selektor elementu blokowego, który będzie mieć zaokrąglone narożniki
2. Wyszczególnienie narożników, które mają być zaokrąglone
3. Oznaczenie koloru zewnętrznego dopełnienia zaokrąglonych narożników
4. Oznaczenie koloru wewnętrznego dopełnienia zaokrąglonych narożników
5. Kształt zaokrąglonych narożników - parametr fakultatywny.
6. Omówimy je kolejno.

Parametr pierwszy: Selektor CSS

Selektor jest parametrem określającym elementy dokumentu, w których zostaną zastosowane zaokrąglone narożniki. Możesz stosować następujące selektory:

• selektor prosty, wskazujący element dokumentu, np.: p, blockquote czy h2
• selektor identyfikatora (id), wskazujący niepowtarzalny element dokumentu, z wyspecyfikowanym identyfikatorem: np. div#content, p#news czy li#home
• selektor klasy, z wyspecyfikowanym elementem: np. div.entry czy h2.highlight
• selektor potomka (kontekstowy), z pewnym ograniczeniem : możesz skomponować go z dowolnego selektora identyfikatora z następującym po nim selektorem prostym. Oto poprawne przykłady: div#news div lub ul#menu li

Parametr drugi: wskazanie narożników

Spójrz ponownie do przykładowego kodu JavaScript:

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

Drugi parametr wskazuje tutaj, że należy zaokrąglić wszystkie narożniki. Wyszczególniając naróżniki, które mają być zaokraglone, możesz zastosować następujące słowa kluczowe, oddzielając je spacją:

• all: zaokrąglone będą wszystkie narożniki,
• top: zaokrąglone będą górne narożniki,
• bottom: zaokrąglone będą dolne narożniki,
• tl: zaokrąglony będzie lewy górny narożnik [top-left],
• tr: zaokrąglony będzie prawy górny narożnik [top-right],
• bl: zaokrąglony będzie lewy dolny narożnik [boottom-left],
• br: zaokrąglony będzie prawy dolny narożnik [bottom-right].

Możesz łączyć słowa kluczowe. Na przykład, możesz użyć parametru top br - zaokrągli górne narożniki i prawy dolny. Uwaga: wszystkie narożniki możesz zaokrąglić w trojaki sposób, stosując top bottom albo tl tr bl br lub all. To równoważne rozwiązania

Parametry trzeci i czwarty: deklaracja kolorów

Spójrz znowu do przykładu:

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

Trzeci i czwarty parametr określają kolejno zewnętrzny i wewnętrzny kolor dopełnienia przestrzeni, jaka powstaje w yniku zaokraglenia. Kolor musi być określony w formacie szesnastkowym z symbolem #, trzema lub sześcioma cyframi. Możesz również skorzystać z wartości transparent (przezroczyste), zarówno dla otoczenia zewnętrznego, jak i wypełnienia wewnętrznego. Z wartości transparent możesz skorzystać tylko w jednym przypadku, nie można uzyskać równocześnie przeźroczystego tła i otoczenia. Przezroczystość wewnątrz, nowa w tej wersji Corners Nifty opcja, może być niezwykle użyteczna - poeksperymentuj, stosując przeźroczyste tło i kolor wewnętrzny oraz odwrotnie.

Parametr piąty: opcje narożników

Poniżej jest przykład kodu JavaScript:

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

Jak widzisz, jest tutaj piąty parametr: smooth. W efekcie otrzymasz lekko złagodzone przejście od koloru narożnika do koloru tła. Piąty parametr jest fakultatywny. Jeśli zostanie zastosowany, otrzymasz różnego rodzaju zaokrąglone narożniki. Możesz skorzystać z opcji wymienionych poniżej, wpisując odpowiednie słowa kluczowe:

• smooth: tworzy zaokrąglone narożniki z łagodnym antyaliasingiem. Biblioteka Javascript dokona autoamatycznego wyliczenia koloru pośredniego między zewnętrznym i wewnętrznym; oczywiście, oba kolory muszą być wyszczególnione
• border #xxxxxx: tworzy krawędzie narożników. Możesz więc otrzymać przezroczyste tło zewnątrz i wewnątrz, ale jedynie w tym przypadku - efektem jest bowiem sama obwódka, zaokrąglona krawędź (pamiętaj, kolory muszą być określone w formacie szesnastkowym wraz ze znakiem #, wyrażonym trzema lub sześcioma cyframi).
• small: tworzy niewielkie zaokrąglenia, które możesz stosować w połączeniu z wymienionymi powyżej, a więc small smooth czy small border #xxxxxx.

Dopełnienie pionowe

Zanim przeanalizujemy przykłady, pozwól mi objaśnić cenną właściwość Nifty Corners, ale ukrytą. Dodałem proste (podstawowe) pionowe dopełnienie (padding) wokół elementów. Skrypt automatycznie usuwa je przed utworzeniem zaokrąglonych narożników. To bardzo użyteczne rozwiązanie z trzech powodów. łatwiej jest zaadaptować zaokrąglone narożniki w istniejących stronach, strony będą wyglądać lepiej w przypadkach, gdy wyłączona jest obsługa JavaScript, a także unika się nagłego przeskoku w wyglądzie, gdy zaokrąglone narożniki zostaną zastosowane na już istniejących stronach. Optymalną wartością jest dopełnienie szerokości 5px, jeśli chcesz stosować "normalne" zaokrąglone narożniki, a 2px, jeśli chcesz uzyskać niewielkie narożniki.

Skoro omówiliśmy wszystkie punkty, możemy rozważyć konkretne przykłady.