Dziudek's jogger

Po bardziej teoretycznych rozważaniach pora znów zająć się czymś efektownym :) Tym razem padło na plugin tips.js służący do generowania ładnych "dymków". Nie ukrywam, że sprawa przydatności tego typu skryptów jest troszkę kontrowersyjna - jednej osobie będą się bardzo podobać ładnie pojawiające się i znikające informacje, a druga osoba uzna to za zbędny gadżet . Warto pamiętać, że IE często oprócz efektownych dymków pokazuje także własne dymki, co wygląda dość brzydko - na pocieszenie dodam iż dotyczy to tylko atrybutu alt w grafikach - plugin tips.js usuwa atrybut title po wygenerowaniu dymków. Ja osobiście stosuję warunek z window.ie by uniknąć problemów w niektórych miejscach by wyłączyć wtedy dymki. Oczywiście ktoś kto ma więcej czasu po prostu w IE pousuwa atrybuty alt z wybranych obrazków (korzystając również z window.ie) "w locie".

Cały plugin tips.js tworzy klasa Tips, która nie posiada żadnych metod, jednak posiada bardzo dużo opcji. Składnia klasy Tips wygląda następująco:

var dymki = new Tips($$("kolekcja_elementow"), {opcje});

zmienna kolekcja_elementow to oczywiście selektor CSS, który oznacza wszystkie elementy dla jakich chcemy stworzyć "dymki", obiekt {opcje} to oczywiście pozostałe parametry klasy Tips.

Opcje klasy Tips:

• maxTitleChars - opcja ta określa maksymalną długość tytułu dymka. Warto dodać, że w atrybucie title danego elementu wszystko co jest umieszczone przed podwójnym dwukropkiem "::" oznacza tytuł dymka. Wszystko po oznacza treść dymka.
• showDelay - opóźnienie pojawiania się dymka w milisekundach.
• hideDelay - opóźnienie ukrywania dymka w milisekundach.
• className - nazwa klas stosowanych w stylach CSS. Domyślna wartość to "tool". Poszczególne klasy są tworzone następująco : className + sufiks "-tip" - klasa całego dymka, className + sufiks "-title" - klasa tytułu dymka, className + sufiks "-text" - klasa treści dymka .
• offsets - obiekt określający odległość dymka od kursora. Oczywiście obiekt ma postać: {x : wartość, y : wartość}
• fixed - wartość logiczna określająca czy dymek ma podążać za kursorem (false), czy też pozostać w jednej pozycji (true)

Dodatkowo mamy do dyspozycji dwa zdarzenia:

• onShow - zdarzenie występujące w momencie pojawienia się dymka,
• onHide - zdarzenie występujące podczas ukrywania dymka.

Pora na praktykę - zacznijmy od stworzenia najprostszego dymka, który pojawi się po najechaniu na wybrane akronimy w tekście - tworzymy podstawowy kod klasy Tips, a jako kolekcja elementów posłużą nam wszystkie elementy ACRONYM:

var dymki = new Tips($$("acronym"));

Po małej stylizacji poprzez stworzeniu w pliku CSS klas tool-tip, tool-title oraz tool-text uzyskamy następujący efekt:

PRZYKŁAD 1

Pora na małe ulepszenia naszego dymka - dodajmy opóźnienie pojawiania się dymka i ustalmy inną odległość dymka od kursora:

var dymki = new Tips($$("acronym"), {
    showDelay: 500,
    offsets: {x: 10, y: 10}
});

Powyższy kod spowoduje zmiany widoczne w następnym przykładzie:

PRZYKŁAD 2

A teraz zanim przejdziemy do bardziej złożonego przykładu, wykorzystajmy w praktyce opcję fixed:

var dymki = new Tips($$("acronym"), {
    showDelay: 500,
    offsets: {x: 10, y: 10},
    fixed: true
});

I powyższy kod w akcji:

PRZYKŁAD 3

Pora skorzystać ze zdarzeń jakie oferuje klasa Tips - stwórzmy dymki, które zawierają dużą ilość treści i animują się z efektem zmiany przezroczystości podczas pojawiania się i znikania. Do podstawowego kodu klasy Tips dodajemy zdarzenia onShow i onHide oraz definicję efektu:

var dymki = new Tips($$("acronym"), {
    onShow: function(toolTip) {this.efekt.start(0,1);},
    onHide: function(toolTip) {this.efekt.start(1,0);}
});
   
dymki.efekt = new Fx.Style(dymki.toolTip,"opacity",{wait: false});

Efekt jest według mnie interesujący:

PRZYKŁAD 4

I to by było na tyle jeżeli chodzi o mootoolsowe dymki :) W następnej części kursu omówię plugin accordion.js .