Skocz do zawartości


tablety.pl
Zdjęcie
- - - - -

Overlibmws - pluginy i ich polecenia




  • Zaloguj się, aby dodać odpowiedź
Brak odpowiedzi do tego tematu

#1 Kolega Dudysa

Kolega Dudysa

    Good Rank

  • Na emeryturze
  • 700 postów
  • Płeć:Mężczyzna

Napisano 26 07 2008 - 20:00

Witam. W tym miejscu postaram sie omówić polecenia dla tworzenia tooltipów na przykładzie skryptów Overlibmws. Jeszcze raz podam stronę wydawcy Macridesweb. Downland znajduje się na samej górze strony.

Może zaczne od konkrentego pluginu, który jest dołączany do głównego skryptu overlibmws, a więc.....



Plugin overlibmws_filter.js

Pluginem tym możemy tworzyć efekty pojawiania się i zanikania tooltipa. Efektów pojawiania się jest 51 i zanikania również.
Plugin także pozwala tworzyć przeźroczyste okna, cień zwykły jak i przeżroczysty, pozwala ustawić czas trwania efektu, ustawić kolor cienia. Zaznaczam że w przeglądarce FF, efekty nie będą działały z uwagi na brak wbudowanych filtrów.

Dostępne polecenia:
- FILTER
- FADEIN
- FADEOUT
- FADETIME
- FILTEROPACITY
- FILTERSHADOW
- FILTERSHADOWCOLOR


Polecenie FILTER - wprowadza efekty pojawiania się i zanikania okna. Podanie samego tego polecenia w budowie tooltipa spowoduje losowe pojawianie się efektów, przykłady będą zawarte w prezentacji, które i tu pokaże:
<Q  onmouseover="return overlib(ef,FILTER)" onmouseout="return nd();">dymek</Q>

Polecenie FADEIN - pozwala wprowadzić wybrany efekt pojawiania się okna, jest ono dostawiane do polecenia FILTER np. FILTER, FADEIN,10. Efekt nastąpi taki że będzie się pojawiał wybrany efekt, a zanikanie okna będzie losowe. Przykład:

<Q  onmouseover="return overlib(ef,FILTER,FADEIN,10)" onmouseout="return nd();">dymek</Q>

Polecenie FADEOUT - pozwala wprowadzić wybrany efekt zanikania okna, jest ono dostawiane do polecenia FILTER np. FILTER, FADEOUT,10. podobnie jak wyżej pojawianie będzie losowe, a zanikanie z wybranej wartośći Przykład:

<Q  onmouseover="return overlib(ef,FILTER,FADEOUT,10)" onmouseout="return nd();">dymek</Q>

W tym przykładzie wybranie konkretnych efektów pojawiania się i zanikania. Polecenia łączymy jakby ze sobą:
<Q  onmouseover="return overlib(ef,FILTER,FADEIN,10,FADEOUT,10)" onmouseout="return nd();">dymek</Q>

Polecenie FADETIME - pozwala ustalić czas pojawiania i zanikania efektu. Domyślnie jest to 800 milisekund. Zależne od polecenia FILTER. W przykładzie, długość pojawiania się i zanikania dymka wynosi nieco ponad 3 sekundy

<Q  onmouseover="return overlib(ef,FILTER,FADEOUT,43,FADEIN,43,FADETIME,3300)" onmouseout="return nd();">
dymek</Q>

Polecenie FILTEROPACITY - pozwala ustawiać przeźroczystość okna. Domyślna wartość 100 - brak przeźroczystości.
np: FILTEROPACITY,50,, im mniejsza podana wartość tym wieksza przeźroczystość. Zależne od polecenia FILTER

<Q  onmouseover="return overlib(ef,FILTER,FADEOUT,44,FADEIN,44,FILTEROPACITY,50)" onmouseout="return nd();">dymek</Q>

Polecenie FILTERSHADOW - tworzy cień dymka. Domyslna wartość 0 - cień wyłączony. Dostępne są dwie wartośći:
- FILTERSHADOW,1, - tworzy nieprzeźroczysty cień
- FILTERSHADOW,2, - tworzy przeźroczysty cień
Zależne od polecenia FILTER. Kolor domyślny #cccccc. Przykład dymka z przeźroczystym tłem:

<Q  onmouseover="return overlib(ef,ABOVE,FILTER,FADEOUT,1,FADEIN,31,FILTERSHADOW,2)" onmouseout="return nd();">dymek</Q>


Polecenie FILTERSHADOWCOLOR - pozwala zmienić cień dymka, a właściwie jego kolor. Domyslny kolor #cccccc. Dostawiane dla polecenia FILTERSHADOW. Przykład:

<Q  onmouseover="return overlib(ef,ABOVE,FILTER,FADEOUT,1,FADEIN,31,FILTERSHADOW,2,FILTERSHADOWCOLOR,'purple')" onmouseout="return nd();">
dymek</Q>

Przykłady:

Ten tooltip losowo wybiera efekt pojawiania się i zanikania. Posiada ustawione nieprzeźroczyste tło, ale ustawione na 30% przeźroczystości. Cień w kolorze pomarańczowym efektem przeźroczystości przebija dymek.
<Q  onmouseover="return overlib(ef,ABOVE,FILTER,FILTERSHADOW,1,FILTERSHADOWCOLOR,'orange',FILTEROPACITY,70)" onmouseout="return nd();">
dymek</Q>

Ten również posiada 30% przeźroczystości z losowym wybieraniem efektu pojawiania się i zanikania w ustalonym czasie.
<Q  onmouseover="return overlib(ef,FILTER,FILTEROPACITY,70,FADETIME,2300,ABOVE)" onmouseout="return nd();">
dymek,</Q>

Gotowe przykłady z kodu powyżej - pobierz



Plugin overlibmws_modal.js

Plugin ten nakłada tło na stronę w czasie trwania tooltipa, na pierwszym planie będą tooltipy. Stosujemy w dymkach, które wymagają zamknięcia. Polecenia pluginu:

- MODAL
- MODALCOLOR
- MODALOPACITY
- MODALSCROLL


Polecenie MODAL - wprowadza tło, domyślny kolor #bbbbbb, domyślna przeźroczystość 40. Przykład:
<Q  onmouseover="return overlib(ef,FILTER,FILTEROPACITY,70,MODAL)" onmouseout="return nd();">
dymek,</Q>

Polecenie MODALCOLOR - wprowadza kolor tła, domyślny kolor #bbbbbb. Zależne od polecenia MODAL.Przykład:
<Q  onmouseover="return overlib(ef,FILTER,FILTEROPACITY,70,MODAL,MODALCOLOR,'purple')" onmouseout="return nd();">
dymek,</Q>

Polecenie MODALOPACITY - wprowadza przeźroczystość tła. Domyślnie jest to 40. Zależne od polecenia MODAL.Przykład:
<Q  onmouseover="return overlib(ef,FILTER,FILTEROPACITY,70,MODAL,MODALCOLOR,'purple',MODALOPACITY,70)" onmouseout="return nd();">
dymek,</Q>

Polecenie MODALSCROLL - wprowadza możliwość przewijania strony raz z ustalonym tłem, ponieważ polecenie MODAL likwiduje suwak.

Polecenia te mogą być dodawane do styli globalnych, jak i do pojedyńczych tooltipów z własnymi kolorami czy przeźroczystością.

Przykłady są zawarte TUTAJ (dymki są zamykane po zjechaniu z nich kursorem)


Plugin overlibmws_scroll.js

Plugin ten pozwala na przewijanie dymka w pionie. Stosujemy w dymkach, które wymagają zamknięcia. Domyślna wartość 0.

Polecenie SCROLL - wprowadza możliwość przewijania, jednak połączone jest z czterema poleceniami z głównego skryptu oberlibmws. Inaczej efekt nie będzie działał. Polecenia: RELX,MIDX,RELY,MIDY

MIDY - domyślna wartość 0. Ustawia dymek w pionie na środku ekranu, centralnie. Wartość dodatnia ustawi dymek w poniżej środka ekranu o ustaloną wartość pikseli. Wartość minusowa ustawi powyżej środka ekranu. Przykład:
<Q  onmouseover="return overlib(ef,FILTER,FADEOUT,4,FADEIN,40,SCROLL,MIDX,200,MIDY,-200)" onmouseout="return nd();">dymek</Q>

MIDX - domyślna wartość 0. Ustawia dymek w poziomie na środku ekranu, centralnie. Wartość dodatnia ustawi dymek po prawej stronie środka ekranu o ustaloną wartość pikseli. Wartość minusowa ustawi po lewej stronie środka ekranu. Przykład:
<Q  onmouseover="return overlib(ef,FILTER,FADEOUT,4,FADEIN,40,SCROLL,MIDX,200,MIDY,-200)" onmouseout="return nd();">dymek</Q>

RELX - ustawia dymek w poziomie o ustaloną liczbe pikseli. Wartość dodatnia ustawi dymek po lewej stronie, a wartość ujemna po prawej stronie ekranu. Przykład:
<Q  onmouseover="return overlib(ef,FILTER,FADEOUT,4,FADEIN,40,SCROLL,RELX,10,RELY,100)" onmouseout="return nd();">dymek</Q>

RELY - ustawia dymek w pionie o ustaloną liczbe pikseli. Wartość dodatnia ustawi dymek do góry ekranu, a wartość ujemna na dole ekranu ekranu. Przykład:
<Q  onmouseover="return overlib(ef,FILTER,FADEOUT,4,FADEIN,40,SCROLL,RELX,10,RELY,100)" onmouseout="return nd();">dymek</Q>
W dwóch przykładach powyżej dymek został ustawiony 10 pikseli od lewej strony, od góry 100 pikseli. Dymki z poleceniem SCROLL będą się przewijać po ekranie.

Przykłady są zawarte TUTAJ (dymki są zamykane po zjechaniu z nich kursorem)



Plugin overlibmws_bubble.js
Dołączona grafika

Plugin ten wyświetla gotowe chmurki. Polecenia:
BUBBLE - polecenie te wprowadza i daje możliwość wybrania rodzaju grafiki. Domyślnie jest to grafika - flower. Dostępne grafiki:
  • flower
  • oval
  • pushpin
  • quotation
  • square
  • roundcorners


BUBBLETYPE - tym poleceniem wybieramy dostępną grafikę. Przykład wybrania grafiki oval:
<Q onmouseover="return overlib('<center>Chmurka oval</center>',BUBBLE,BUBBLETYPE,'oval');" onmouseout="nd();">oval</Q>

ADJBUBBLE - poleceniem tym możemy zmienić rozmiar chmurki na mniejszy. Powinno być tak że im mniej tekstu, tym mniejsza chmurka, ale nie zawsze się to sprawdza. Przykład użycia:
<Q onmouseover="return overlib('Chmurka oval',FILTER,BUBBLE,BUBBLETYPE,'oval',ADJBUBBLE);" onmouseout="nd();">oval</Q>

BUBBLECLOSE - wprowadza blok dla poleceń STICKY oraz NOCLOSE, które odpowiadają za ręczne zamknięcie dymka. Podanie tego polecenia wraz z wymienionymi spodowuje brak możliwości zamknięcia chmurki.

Polecenia, których nie stosujemy z Bubble:
BGCOLOR, FGCOLOR, BORDER, BASE, BGBACKGROUND, CGBACKGROUND, FGBACKGROUND, BACKGROUND, CAPTION,FULLHTML,SHADOW,LEFT,CENTER,ABOVE,VCENTER,HAUTO,VAUTO,WRAP,WIDTH

Przykłady są TUTAJ

Plugin overlibmws_draggable.js

Plugin ten pozwala przesuwać tooltipami po ekranie, jak normalnymi oknami oraz tworzy pasek przewijania. Stosujemy w dymkach, które wymagają zamknięcia. Dostępne polecenia:
-DRAGGABLE
-DRAGCAP
-DRAGID

Polecenie DRAGGABLE - pozwala na manipulację całym tooltipem, chwytając go lewym przyciskiem myszy
Polecenie DRAGCAP dostawiane zaraz za poleceniem DRAGGABLE - pozwala na manipulację podpisem dymka czy belką tytułową, jeśli dymek takowy ma.

Polecenie DRAGID - tworzy pasek przewijania, a właściwie inaczej - jest to idetyfikator, który dołączamy w budowie zewnetrznej dymka, a wstawiany w warstwe budowy wewnętrznej, połączony z klasą css. Może inaczej, zawartość wewnętrzna dymka jest warstwą - DIV, Div pobiera klase css, a w klasie css do stworzenia suwaka potrzebne jest takie polecenie: overflow:auto. Mniej więcej tak to będzie wyglądało:
W css wpisać i zagnieżdźić ją w warstwe:
.suwak {
	 OVERFLOW: auto;
}
Zawartość wewnętrzną dymka wstawiamy w warstwe z klasą css i idetyfikatorem:
<div class="suwak" id="suw">

W budowie zewnętrznej wstawiamy identyfikator:
DRAGID,'suw'

Przykłady użycia poleceń są w ostatniej prezentacji. Więcej przykładów na stronie producenta CSS overlflow


Plugin overlibmws_shadow.js

Pluginem tym możemy wstawić płaski cień dla dymka. Określić położenie cienia, wstawić grafike oraz określić przeżroczystość cienia oraz grafiki. Jest to oddzielny plugin spełniający to zadanie. Plugin nie współpracuje z Bubble, ale za pomocą pluginu FILTER można je stworzyć.

Dołączona grafika

Dołączona grafika

Dołączona grafika

Polecenia pluginu:

- SHADOW
- SHADOWX
- SHADOWY
- SHADOWCOLOR
- SHADOWIMAGE
- SHADOWOPACITY

Polecenie SHADOW - jest to główne polecenie, które wprowadza cień. Domyślny kolor - #666666, domyślna przeźroczystość - 60, domyślne położenie cienia - po prawej stronie na dole, wysunięte 5 pikseli.

Polecenie SHADOWX - określa w poziome przesunięcie cienia. Wartość dodatnia ustawi cień po prawej stronie krawędzi dymka, a wartość ujemna po lewej. Przykład: SHADOWX,14,

Polecenie SHADOWY - określa pionowe przesunięcie cienia. Wartość dodatnia ustawi cień w dole, a ujemna do góry. Przykład: SHADOWY,14,

Polecenie SHADOWCOLOR - pozwala zmienić cień na wybrany kolor

Polecenie SHADOWIMAGE - pozwala wstawić w cień dowolną grafike.

Polecenie SHADOWOPACITY - pozwala ustawić przeźroczystość cienia, dla grafiki również.

Przykład:

<Q onmouseover="return overlib('<center>Dymek z cieniem</center>',SHADOW,SHADOWY,8,SHADOWCOLOR,'red',SHADOWOPACITY,20);"onmouseout="nd();">przykład</Q>
Cień dymka jest czerwony z 80% przeźroczystością z przesunięciem cienia w pionie o 8 pikseli od dolej krawędzi dymka.

Przykłady są TUTAJ, zawarte są w nich również efekty tworzenia cieni pluginem FILTER dla BUBBLE.



Plugin overlibmws_exclusive.js

Jest to plugin dla tootlipów wymagających zamknięcia. Wprowadza blok, tzn. wymusza ręcznie zamknięcie dymka, inaczej nie pojawi się inny dymek, który chcemy zobaczyć po wejchaniu na obiekt czyt. wyraz, link, itp.

Dostępne polecenia:

- EXCLUSIVE
- EXCLUSIVESTATUS
- EXCLUSIVEOVERRIDE

Polecenie EXCLUSIVE wprowadza blok czyli wymuszenie zamknięcia tooltipa, który się otwarło, inaczej nie otworzymy innych. Domyślnie na dole w pasku przeglądarki wyświetli się informacja : Please act on or close the open popup.

Polecenie EXCLUSIVESTATUS wprowadza własny tekst informacji na pasku w przeglądarce. Przykład:
EXCLUSIVE,,EXCLUSIVESTATUS,'Zamkni by otworzyć inny'

Polecenie EXCLUSIVEOVERRIDE - przejmuje hierarchie nad innymi tooltipami, które posiadają polecenie EXCLUSIVE. Zastosowanie polecenia EXCLUSIVEOVERRIDE wymusi zamknięcie otwartego już tooltipa, a otwarcie ważniejszego.
EXCLUSIVE,EXCLUSIVEOVERRIDE

Przykłady są zawarte TUTAJ



Plugin overlibmws_function
Dołączona grafika

Pluginem tym możemy dodawać jakieś funkcje, które będą ładowane do zawartości tootlipa. Na tej stronie producenta jest prezentacja dołączenia skryptu, który pobiera date, a wynik wyświetla się w dymku. Pozwoliłem sobie dołączyć funkcje wyswietlającą ostatnią modyfikację strony:
Dołączona grafika

Dołączona grafika

Przykłady powyżej są TUTAJ




Plugin overlibmws_print.js
Dołączona grafika

Dołączona grafika

Pluginem tym możemy dodac funkcję wydrukowania tooltipa. W sposób zwykły oraz poprzez zewnętrzne formatowanie dokumentu serwer-side, a drukowane client-side jednak ta metoda jest dość zawiła. Przedstawie może przykłady, które są wykonywane po stronie użytkownika. Polecenia pluginu:
-PRINT
-PRINTBUTTON
-NOAUTOPRINT
-PRINTCOLOR
-PRINTFONT
-PRINTSIZE
-PRINTTEXT
-PRINTBUTTONTEXT
-PRINTTITLE
-PRINTFONTCLASS
-PRINTCSSFILE

Polecenie PRINT - główne polecenie. Użycie samego polecenia spowoduje dodanie do podpisu tootlipa(Caption) funkcje Print. Domyślnie wyświetli się link PRINT.

Polecenie PRINTBUTTON - wprowadza przycisk, który znajduje się na dole tabeli (domyślny napis - PRINT)

Polecenie NOAUTOPRINT - wprowadza blok dla wydruku. Zostanie wyświetlona zawartość dla wydrukowania, ale otrzymamy stosowny komunikat.

Polecenie PRINTCOLOR - dodaje możliwość wybrania koloru dla tekstu linku drukowania.

Polecenie PRINTFONT - dodaje możliwość wprowadzenia wybranej czcionki dla tekstu linku drukowania.

Polecenie PRINTSIZE - dodaje możliwość ustawienia wielkości czcionki dla tekstu linku drukowania.

Polecenie PRINTTEXT - dodaje możliwość wybrania własnego tekstu linku drukowania.

Polecenie PRINTBUTTONTEXT - dodaje możliwość wybrania własnego tekstu w przycisku linku drukowania. Musi być użyte z poleceniem PRINTBUTTON.

Polecenie PRINTTITLE - dodaje w przycisku lub tekście linku drukowania mały dymek informacyjny, wyświetlany po najechaniu na przycisk lub tekst linku drukowania.

Polecenie PRINTFONTCLASS - dodaje możliwość wprowadzenia styli css dla tekstu linku drukowania.

Polecenie PRINTCSSFILE - dodaje możliwość pobierania styli css z konkretnego adresu url.


Tworzenie funkcji z przyciskiem:
PRINT,PRINTBUTTON,PRINTBUTTONTEXT,'Drukuj',PRINTTITLE,'Klikni by wydrukować'

Tworzenie własnego tekstu linku drukowania w tytule tootlipa:
PRINT,PRINTTEXT,'DRUKUJ',PRINTTITLE,'Drukuj',PRINTFONTCLASS,'Klasa'

Pozostałe polecenia:
PRINTXML, PRINTDOCTYPE, PRINTROOT , PRINTTYPE, PRINTCHARSET, PRINTURL, PRINTJOB. Przykłady ich użycia na stronie producenta External Print Job Function Examples

Przykłady okien powyżej są TUTAJ




Plugin overlibmws_overtwo.js

Plugin ten pozwala na budowanie wielu tootipów w jednym. Gotowe przykłady są na stronie producenta secondary popups

// INARRAY - Array with texts.
var ol_texts = new Array(
 "Text 0",
 "Text 1");

// CAPARRAY - Array with captions.
var ol_caps = new Array(
 "Caption 0",
 "Caption 1");

Dwa przykłady są TUTAJ



Polecenia głównego skryptu overlibmws.js

W tym skrypcie znajdują się podstawowe polecenia tworzenia wyglądu, pozycjonowania i innych fukcji dla tooltipów. Spis poleceń na stronie overlibmws [url="http://''http://www.macridesw...commandRef.html""]Command Reference[/url]. Polecam również polskie opracowanie na temat tworzenia tooltipów pierwszej rodziny overlib pod adresem : swmarek - overlib. Jest na niej pokazana masa przykładów tworzenia z głównego skryptu. Jak pisałem polecenia z pierwszej rodziny (mowa o głównym skrypcie) niewiele się zmieniły, doszło kilka nowych poleceń, a parę funkcji jest pod inną nazwą.

Polecenie ABOVE - ustawia dymek nad kursorem
Polecenie STATUS - można nim wstawić własny tekst jakiegoś opisu w pasku stanu przeglądraki
Polecenie AUTOSTATUS - automatycznie wyświetla treść dymka w pasku stanu przeglądarki
Polecenie AUTOSTATUSCAP - automatycznie wyświetla tekst zawarty z opisu nagłówka
Polecenie BACKGROUND - wstawia wybraną grafikę dla całego dymka
Polecenie BORDER - ustawia grubość obramowania
Polecenie BELOW - ustawia dymek pod kursorem
Polecenie FGBACKGROUND - wstawia w tło dymka wybraną grafikę
Polecenie BGBACKGROUND - wstawia w obramowanie wybraną grafikę
Polecenie TEXTCOLOR - ustawia wybrany kolor tekstu w samym dymku. Domyślny kolor #000000
Polecenie TEXTFONT - ustawia wybraną czcionkę dla tekstu w samym dymku. Domyślna czcionka Verdana,Arial,Helvetica
Polecenie TEXTSIZE - ustawia wielkość tekstu. Domyślna wartość 1
Polecenie RIGHT - ustawia dymek po prawej stronie kursora
Polecenie LEFT - ustawia dymek po lewej stronie kursora
Polecenie HEIGHT - ustawia wysokość dymka. Domyślna wartość 1
Polecenie FGCOLOR - ustawia wybrany kolor tła dymka. Domyślny kolor #CCCCFF
Polecenie BGCOLOR - ustawia wybrany kolor obramowania dymka. Domyślny kolor #333399
Polecenie WIDTH - ustawia szerokość dymka. Domyślna wartość 200
Polecenie WRAP - powoduje nie załamywanie się tekstu poniżej, jeżeli nie jest ustalona szerokość, a tekst jest szerszy niż 200 pikseli.
Polecenie WRAPMAX - dla polecenia WRAP, ustawia do jakiej szerokości nie ma się załamywać tekst poniżej.
Polecenie TEXTPADDING - ustala margines prawy, lewy, górny, dolny dla tekstu w dymku
Polecenie BASE - wstawia na dole dymka dodatkową rame
Polecenie TEXTFONTCLASS - pozwala dla tekstu w dymku wstawić własne style css
Polecenie STICKY - tworzy zamknięcie dymka w nagłówku. Domyślny link CLOSE
Polecenie CLOSETEXT - pozwala wstawić własny tekst zamknięcia
Polecenie CLOSESIZE - pozwala ustawić wielkość tekstu zamknięcia
Polecenie CLOSECLICK - powoduje by zamknąć dymek to musi kliknąć na tekst zamknięcia
Polecenie CLOSECOLOR - pozwala ustawić własny kolor tekstu zamknięcia. Domyślny kolor #9999FF
Polecenie CLOSETITLE - wstawia mały dymek opisowy w tekście zamknięcia. Pojawia się, gdy trzymamy kursor na tekście. Domyślny tekst - Click to Close
Polecenie CLOSEFONTCLASS - pozwala zdefiniować za pomoca styli css wygląd tekstu zamknięcia
Polecenie CLOSEFONT - pozwala ustawić wybraną czcionkę dla tekstu zamknięcia. Domyślna czcionka Verdana,Arial,Helvetica
Polecenie TIMEOUT - pozwala ustawić czas trwania dymka
Polecenie FULLHTML - powoduje że wyświetla się sam tekst bez obramowania, tła,itp.
Polecenie NOFOLLOW - ustawia dymek w jednej pozycji, nieruchomo
Polecenie HAUTO - automatycznie określa czy dymek ma być po prawej czy lewej stronie kursora
Polecenie VAUTO - automatycznie określa czy dymek ma wyświetlany pod kursorem czy nad kurosrem
Polecenie DELAY - pozwala ustawić opóznienie pojawiania się dymka
Polecenie FGCLASS - pozwala ustawić kolor tła dymka lub wstawić grafike za pomocą styli css
Polecenie BGCLASS - pozwala ustawić kolor obramowania dymka lub wstawić grafikę czy rodzaj obramowania za pomoca styli css
Polecenie CAPTION - dodaje własny tekst w nagłówku dymka
Polecenie CAPICON - dodaje wybraną małą grafikę - np. mały obrazek gif do naglówka dymka
Polecenie CAPTIONFONT - dodaje możliwość wybrania konkretnej czcionki dla tekstu w nagłówku dymka. Domyślna czcionka - Verdana,Arial,Helvetica
Polecenie CAPTIONSIZE - pozwala ustawić wielkość tekstu w nagłówku dymka
Polecenie CAPTIONPADDING - ustala margines prawy, lewy, górny, dolny dla tekstu w nagłówku dymka. Wartość domyślna 2px
Polecenie CAPTIONFONTCLASS - dodaje możliwość wprowadzenia styli css dla tekstu w nagłówku dymka
Polecenie CAPBELOW - ustawia nagłówek na dole dymka
Polecenie CAPCOLOR - ustala kolor tekstu w nagłówku dymka. Domyślny kolor #FFFFFF
Polecenie CGCOLOR - ustala kolor tła nagłówka. Domyślny kolor #333399
Polecenie CGBACKGROUND - pozwala wstawić w tło nagłówka dowolną grafikę
Polecenie CGCLASS - pozwala za pomocą styli css zdefiniować kolor tła nagłówka lub wstawić grafikę
Polecenie NOCLOSE - zamyka dymek po opuszczeniu kursora z obszaru dymka, nie wymaga innych poleceń
Polecenie MOUSEOFF - zamyka dymek po opuszczeniu kursora z obaszaru dymka, używany z poleceniem sticky
Polecenie OFFDELAY - wprowadza czas zamknięcia dla polecenia NOCLOSE lub MOUSEOFF w ustalonym czasie. Uzywany tylko dla wymienionych poleceń. Domyślny czas trwania dymka po opuszczeniu z niego kursora, wynosi 300 milisekund
Polecenie FIXX - umieszcza dymek od lewej strony ekranu o wyznaczoną wartość, przy przewinięciu ekranu w poziomie jeśli strona jest szeroka dymek będzie widoczny, tzn. sklei się z lewa strona ekranu
Polecenie FIXY - umieszcza dymek od góry ekranu o wyznaczoną wartość, przy przewiznięciu ekranu w dół dymek będzie sklejony przy górnym erkanie
Polecenie NOJUSTX - dla polecenia FIXX, spowoduje że dymek nie będzie się kleił do lewej strony ekranu. Czyli nie będzie widoczny jeśli przewiniemy strone w poziomie
Polecenie NOJUSTY - dla polecenie FIXY, podobnie spowoduje że dymek nie będzie się kleił na górze ekranu. Nie będzie widoczny po przewinięciu w dół strony
Polecenie MIDX - Ustawia dymek w poziomie na środku ekranu, centralnie. Wartość dodatnia ustawi dymek po prawej stronie środka ekranu o ustaloną wartość pikseli. Wartość minusowa ustawi po lewej stronie środka ekranu.
Polecenie MIDY - Ustawia dymek w pionie na środku ekranu, centralnie. Wartość
dodatnia ustawi dymek w poniżej środka ekranu o ustaloną wartość pikseli. Wartość minusowa ustawi powyżej środka ekranu.
Polecenie OFFSETX - pozwala ustawić pozcyję dymka w poziomie wględem kursora. Domyślna wartość 10px
Polecenie OFFSETY - pozwala ustawić pozcyję dymka w pionie wględem kursora. Domyślna wartość 10px
Polecenie RELX - ustawia dymek w poziomie o ustaloną liczbe pikseli. Wartość dodatnia ustawi dymek po lewej stronie, a wartość ujemna po prawej stronie ekranu
Polecenie RELY - ustawia dymek w pionie o ustaloną liczbe pikseli. Wartość dodatnia ustawi dymek do góry ekranu, a wartość ujemna na dole ekranu ekranu.
Polecenie SNAPX - pozwala ustawić przeskakiwanie dymka w poziomie o określoną wartość podczas przesuwania kursora na linku czy grafice
Polecenie SNAPY - pozwala ustawić przeskakiwanie dymka w pionie o określoną wartość podczas przesuwania kursora na linku czy grafice
Polecenie PADX - wyznacza margines tekstu po prawej i lewej stronie krawdzędzi jeżeli całym dymkiem jest grafika wprowadzona poleceniem BACKGROUND
Polecenie PADY - wyznacza dolny i górny margines tekstu jeżeli całym dymkiem jest grafika wprowadzona poleceniem BACKGROUND

Oraz ostatnie polecenia tego skryptu, które używane są razem. Służą do pozycjonowania dymka dla jakiegoś obiektu, np. zdjęcia czy warstwy. Wstawiając w budowe dymka i zdjęcie identyfikator czyli ID.

REF - wprowadza identyfikator obiektu, który wstawiamy również np. w zdjęcie
REFC - pozycjonuje dymek względem prawej krawędzi obiektu
REFP - pozycjonuje dymek względem lewej krawędzi obiektu. Domyślna wartość UL.

gotowe przełączniki pozycjonowania dla poleceń REFC,REFP:

UR czyli (Upper Right)
UL czyli (Upper Left)
LR czyli (Lower Right)
LL czyli (Lower Left)

REFX - pozwala na dodatkowe pozycjonowanie z wyżej wymienonymi poleceniami. Pozwala ustawiać dymek w poziomie względem obiektu. Wartość dodatnia przesunie dymek w prawo od zdjęcia, a ujemna w lewo o wyznaczoną wartość.

REFY - pozwala na dodatkowe pozycjonowanie z wyżej wymienionymi poleceniami. Pozwala ustawić dymek w pionie względem obiektu. Wartość dodatnia ustawi dymek wyżej o ustaloną wartość, a ujemna poniżej.

Demonstracja użycia poleceń na stronie producenta REFerence-based Positioning. Zrobiłem kilkanaście przykładów zastosowania poleceń, znajdują się tutaj. Ogólnie jest to metoda troche zakręcona.



Optymalizacja czyli ręczne ustawianie głównego skryptu overlibmws

Wspominałem wcześniej o stylach globlanych dla wygody oraz oszczędnośći kodu na stronie. Nie każdemu musi się podobać ten sposób. Zamiast tego dla dalszej oszczędności kodu i wygody można modyfikować zawartość ustawień w skrypcie overlibmws np: kolor tła, kolor obramowania, rodzaj czcionki, wielkość czcionki, grubość obramowania, kolor rekstu, itp... Edytujemy skrypt, zmiany wprowadzamy zaraz na samej górze w skrypcie, zmieniając wartośći. Przykład:
// DEFAULT CONFIGURATION -- See overlibConfig.txt for descriptions
if(OLud('fgcolor'))var ol_fgcolor="red";
if(OLud('bgcolor'))var ol_bgcolor="black";
if(OLud('textcolor'))var ol_textcolor="blue";
if(OLud('textfont'))var ol_textfont="Courier";
if(OLud('textpadding'))var ol_textpadding=5;
// END CONFIGURATION -- Don't change anything below, all configuration is above.

To tyle...


Gradient Filter
W zastosowaniu dla tooltipów. FIltrami tymi można tworzyć rózne efekty. Od razu dodam że działają tylko w przeglądarkach IE6 i IE7. Jeszcze raz przypomne strone z szerokim opisem i zastosowaniem filtrów Static Filters. Filrty dodajemy poprzez style css, poleceniami takimi jak FGCLASS, BGCLASS,TEXTFONTCLASS czy CGCLASS

Zastosowanie filtru Gradient, który zespala ze sobą dwa kolory. Przykład:
FILTER: progid:DXImageTransform.microsoft.Gradient(gradientType=1,StartColorStr='#f6358a',EndColorStr='#d462ff');
Dołączona grafika

Zastosowanie filtru Alpha dla uzyskania efektu przeźroczystości. Jak widać można ustalić przeźroczystość początkową i końcową. Przykład:
FILTER: progid:DXImageTransform.Microsoft.Alpha( style=1,opacity=100,finishOpacity=10);
Dołączona grafika

Zastosowanie filtru Glow, który dodaje dodatkową przeźroczystą ramę. Przykład:
filter: progid:DXImageTransform.Microsoft.Glow (Strength=10,color=white );
Dołączona grafika

Filtrami można tworzyć rozmazaną grafikę czy wyrazy, cień dla wyrazów, grafiki, obrócenie do góry, przeżucenie obrazu w pion czy zdania. Kreator kodu znajduje się tutaj. Kreator kodu tworzenia przeźroczystego efektu znajduje się tu. Zrobiłem kilka przykładów gradient.


Przeźroczystość dla FF i Opery wraz IE
Jak pisałem plugin FILTER i możliwość w nim ustawiania przeźroczystości jest tylko dla przeglądarki IE. Podaje sposób jak uzyskać przeźroczystość poprzez wstawienie odpowiedniej klasy css. Dodać musze że jedno polecenie overlibmws poprawnie definiuje te klase css, mianowicie polecenie BGCLASS i tylko nim uzyskamy efekt.
BGCLASS,'opacity',

.opacity {
moz-opacity: 0.3; filter: alpha(opacity=30); opacity: 0.3;
}
Kod dla FF, IE, Opera.

Dołączona grafika
Przykłady opacity do przetestowania.


Dymek w dymku w głównym dymku...
Dołączona grafika
pobierz

Tak się bawiłem i do skryptu overlibmws dodałem inny skrypt, który znalazłem na webhelp. Pod IE działa bez problemu. Na innych przeglądarkach jeszcze nie sprawdzałem.


Flower- Power
Dołączona grafika

To taki eksperyment. Wsadziłem perkusiste do dymka i niech w nim gra. Dymka można przesuwać chwytając za belkę tytułową. Jedyny mankamet jest taki że jeśli filmik sie nie skończy, a zamkniemy dymka to w kolumnach będzie dalej słychać gre. Tak bynajmniej się dzieje u mnie. Pobierz.


Następne okienko... Podobnie posiada dymek w dymku w głównym dymku. Podmiane grafiki w głównym oknie, w przycisku zamknięcia. Również dodałem skrypt z webhelp, który dodaje 3 dymek opisowy. Troche mi przy tym czasu zeszło. Cóż moge więcej napisać, mam nadzieje że w innych przeglądarkach poprawnie działa, więc zapraszam do testowania.
Dołączona grafika

Dołączona grafika
pobierz - test.rar



Galeria kwiatów
Dołączona grafika

Miała być galeria zwierzaków, ale zdjęcia jeszcze do mnie nie dotarły i projekt ten poświęciłem na kwiatki. Po najechaniu kursorem na jakąś miniature obrazu, pojawi się tooltip z pełnym wymiarem zdjęcia oraz tooltip opisowy. Po zejściu kursorem z galerji, tooltip zniknie. pobierz - galeria

Galeria zwierzaków
Dołączona grafika

Zdjęcia przyszły!!! Oczywiście jest to galeria, zrobiona na podbudowie tooltipu powyżej. Zawiera główny dymek z miniaturami obrazów, po najechaniu na miniaturę pojawi się pełnowymiarowy obraz zwierzaka oraz tooltip opisowy.

Kuchnia królika
Dołączona grafika

Jak już jesteśmy przy temacie króliczków to może trzeba sie dowiedzieć jak je karmić. Opis wziołem z pewnego forum króliczkowego bo nie mam o karmieniu zielonego pojęcia. Pobierz.

Jest to ostatnia prezentacja.
Jeśli są błędy - napiszcie. Pozdrawiam




Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych