Dziudek's jogger

Nietrudno zauważyć, że wiele elementów współczesnych stron posiada zaokrąglenia - według wielu polepszają one wygląd strony, ale są też osoby, które są zwolennikami "kanciastych" stron. Cóż nie da się wszystkim dogodzić, ale jedno jest pewne - zrobić stronę bez zaokrągleń jest o wiele łatwiej niż taką z zaokrąglonymi elementami. Moglibyśmy się męczyć z obrazkami, odpowiednio je pozycjonując, rozciągając, ale po co ? Mamy przecież do dyspozycji świetny skrypt - Nifty Corners Cube (pobierz), który spełni większość naszych zachcianek i to w dodatku bez kombinowania z obrazkami :)

Kompatybilność

Nifty Corners Cube jak zapewnia autor jest kompatybilne z IE 5.5, Operą 8.5, Firefoksem 1.5 i Safari 2.0 - czyli wszystkie nowsze wersje tych przeglądarek, także powinny obsłużyć Nifty Corners Cube. Od siebie dodam, że przetestowałem działanie przykładów na Konquerorze i niestety ale większość testów kończyła się pojawieniem czarnego tła w miejsce zaokrąglonych rogów - ale jak ktoś robi zaokrąglone elementy na ciemnym tle to także na tej przeglądarce będzie to dobrze wyglądać ;)

Oczywiście należy pamiętać, że osoby z wyłączonym JS nie obejrzą zaokrąglonych rogów, ale skoro wyłączyły go to muszą brać poprawkę na to, że nie wszystkie funkcjonalności strony będą dla nich dostępne ;)

Jak to działa ?

Co jest potrzebne do działania skryptu ? Potrzebujemy do tego dwóch plików niftycornerscube.js i niftycorners.css. Do naszej strony dołączamy jednak tylko plik niftycornerscube.js, a plik stylów dla skryptu jest automatycznie dołączany już przez sam skrypt.

Zaokrąglenie danego elementu sprowadza się do wywołania funkcji Nifty z dwoma parametrami (a w najprostszym wypadku do wywołania tejże funkcji z jednym parametrem - selektor, parametr opcje dodatkowe jest opcjonalny) podczas zdarzenia onload:

window.onload = function(){
    Nifty("selektor","opcje dodatkowe");
}

Jak już się pewnie domyślacie - parametr selektor służy do określenia elementu, który ma zostać zaokrąglony, natomiast parametr opcje dodatkowe wykorzystuje się do ustalenia wyglądu tego elementu.

Jak odwoływać się do poszczególnych elementów na stronie ? Przykłady prezentuję poniżej:

• "div" - powoduje zaokrąglenie wszystkich elementów div w dokumencie,
• "div#wpis-1" - taki zapis spowoduje zaokrąglenie diva posiadającego identyfikator "wpis-1",
• "div.wpis" - ten zapis spowoduje zaokrąglenie divów przypisanych do klasy "wpis",
• "div.wpis p" - zapis ten sprawi, że zaokrągleniu ulegną wszystkie paragrafy w divach przypisanych do klasy "wpis"
• "div#wpis-1 p" - taki zapis zaokrągli wszystkie paragrafy w divie posiadającym identyfikator "wpis-1"

Dodatkowo możemy grupować powyższe selektory rozdzielając je przecinkiem - w ten sposób zamiast pisać kilka razy wywołanie funkcji Nifty możemy to zrobić w jednej funkcji:

"div.wpis,div.wpis p" - ten zapis spowoduje zaokrąglenie wszystkich divów przypisanych do klasy "wpis" oraz paragrafów znajdujących się wewnątrz divów przypisanych do klasy "wpis". Czyli na przykład:

window.onload = function(){
    Nifty("div");
    Nifty("div.wpis");
}

Uwaga natury technicznej - należy pamiętać, że jeśli zaokrąglamy element to powinien on posiadać styl z ustawioną właściwością padding - w powyższych wypadkach na 5px, ponieważ przy zaokrąglaniu elementu bez paddingu zostanie "ucięta" treść.

Pora przejść do omawiania opcji dodatkowych. Można powiedzieć, że od tego momentu zabawa zaczyna się na dobre :) Opcji jest naprawdę dużo - oto ich lista wraz z wyjaśnieniem działania :

Opcje do określania, które rogi elementu mają zostać zaokrąglone:

• tl - zaokrąglenie lewego górnego rogu,
• tr - zaokrąglenie prawego górnego rogu,
• bl - zaokrąglenie lewego dolnego rogu,
• br - zaokrąglenie prawego dolnego rogu,
• top - zaokrąglenie górnych rogów,
• bottom - zaokrąglenie dolnych rogów
• left - zaokrąglenie rogów po lewej stronie elementu
• right - zaokrąglenie rogów po prawej stronie elementu
• all - zaokrąglenie wszystkich rogów. Ta opcja jest ustawiona domyślnie,
• none - wyłączanie zaokrąglania rogów - opcja przydatna gdy chcemy stworzyć kolumny o tej samej wysokości bez zaokrąglonych rogów, wtedy łączymy opcję none z opcją same-height.

Oczywiście powyższe opcje można ze sobą łączyć. Przykładowo - jeśli chcemy zaokrąglić górne rogi i prawy dolny róg możemy stosować opcje:

"tr tl br"

lub:

"top br"

Opcje do określania rozmiarów zaokrągleń:

• small - małe zaokrąglenia - 2 piksele,
• normal - standardowe zaokrąglenia - 5 pikseli. Opcja ustawiona domyślnie,
• big - duże zaokraglenia - 10 pikseli

Oczywiście musimy pamiętać aby do odpowiednich zaokrągleń ustawić odpowiednio właściwość padding elementu - dla powyższych opcji odpowiednio - 2, 5 i 10 pikseli.

Inne opcje:

• transparent - opcja domyślnie włączona gdy element nie ma ustawionego koloru tła (a ma np. ustawiony obrazek w tle), jest ona niezbędna przy tworzeniu efektu rollover (czyli efektu zmiany wyglądu elementu po najechaniu na niego kursorem).
• fixed-height - opcja, którą wykorzystujemy gdy korzystamy z ustawiania wysokości elementów za pomocą styli CSS (normalnie rogi pojawią się na przykład w divie na tej wysokości gdzie kończy się tekst),
• same-height - Dzięki wykorzystaniu tej opcji możemy uzyskać elementy o tej samej wysokości dostosowanej do elementu najwyższego (oczywiście wszystkie elementy powinny być wymienione w parametrze selektor). Jeśli chcemy skorzystać tylko z tej funkcjonalności bez zaokrąglania rogów to wywołujemy funkcję dodatkowo z opcją none.

Jeszcze uwaga odnośnie elementów liniowych - nie zawsze działa zaokrąglanie rogów, dla takich elementów (znaczy działa, ale niewłaściwie) - w takich wypadkach najlepiej dodać im właściwość display z wartością block - wtedy zaokrąglanie elementów liniowych działa bez zarzutu ;)

Pozostała nam jeszcze jedna funkcja Nifty Corners Cube - NiftyLoad : czasami nie możemy / nie chcemy wywoływać funkcji nifty w zdarzeniu onload - wtedy wykorzystujemy funkcję NiftyLoad o następującej składni :

NiftyLoad = function(){
    Nifty("selektor","opcje_dodatkowe");
}


Podsumowanie

Myślę, że Nifty Corners Cube to bardzo przydatna biblioteka - duże możliwości przydatne na wielu stronach internetowych, mały rozmiar i kompatybilność z najpopularniejszymi przeglądarkami - czego chcieć więcej ;)