[ Pobierz całość w formacie PDF ]
.which;if (ie4) return event.button;}Na zakoñczenie funkcja, która wypisze na pasku statusu, ¿e dany przycisk zosta³zwolniony:function Puszczony(e) {status="przycisk zwolniony";} Istnieje mo¿liwoœæ tak skonstruowania zdarzenia, ¿e bêdzie ono aktywne tylkodla konkretnej warstwy.Poni¿szy przyk³ad pokazuje, jak wywo³aæ zdarzenie dlakonkretnego bloku.Oznacza to, ¿e poza tym blokiem zdarzenia nie bêd¹dzia³a³y.if(nn4) { document.layers['Blok'].onmousemove=Ruch document.layers['Blok'].captureEvents(Event.MOUSEMOVE);}if (ie4) document.all['Blok'].onmousemove=Ruch; Poni¿ej jest tabela dostêpnych zdarzeñ dla Dynamicznego HTML-a zwi¹zanych zmyszk¹:onmouseoverwskaŸnik myszki wje¿d¿a w obszar elementuonmouseoutwskaŸnik myszki opuszcza obszar elementuonmousedownnaciœniecie przycisku myszkionmouseupzwolnienie przycisku myszkionmousemoveruch myszki ponad elementemonclickklikniêcie przycisku myszki, bez przytrzymania!ondblclickpodwójne klikniêcie przyciskiem myszki Z obs³ug¹ klawiatury jest trochê mniej problemów.Zdarzenia do obs³ugiklawiatury s¹ dwa.Kiedy klawisz jest naciœniêty i puszczony:document.onkeydowndocument.onkeyupFunkcja tak jak wy¿ej pobiera argument:function PrzyciskDown(e) {if (nn4) Key=e.which;if (ie4) Key=event.keyCode;}Za zmienn¹ Key zostaje podstawiony kod przycisku.Problemem jest to, ¿e ka¿daprzegl¹darka ma swoje w³asne kody przycisków, dlatego nie polecam korzystania zkodu.W zamian za to mo¿na konwertowaæ kod do zmiennej przezString.fromCharCode():alert(String.fromCharCode(Key));Po konwersji podstawowe klawisze literowe i cyfry s¹ takie same.Wad¹ jest to,¿e Explorer nie rozró¿nia klawiszy z SHIFT-em.Tooltip (baloniki)Ciekawym rozwi¹zaniem jest stworzenie Tooltip-ów.Takie chmurki s¹ pomocne, bomog¹ zawieraæ informacje dotycz¹ce pomocy dla danego elementu.Zasada dzia³aniapolega na umieszczeniu warstwy tam, gdzie mia³o miejsce zdarzenie onMouseOver.Nowy Explorer pozwala stworzyæ tak¹ chmurkê poprzez uzupe³ninie atrybutuw linkach.Tyle, ¿e takie rozwi¹zanie dzia³a tylko w nowychExplorerach.Chmurki dzia³aja wszêdzie.Na pocz¹tek nale¿y zdefiniowaæ style.Aby wszystko by³o nie za d³ugie proponujeskorzystania z w³aœciwoœci CLASS.Definiujemy w stylach przyk³adow¹ klasê:.tooltip{POSITION:Absolute; VISIBILITY:Hidden; BACKGROUND-COLOR:Yellow;LAYER-BACKGROUND-COLOR:Yellow; WIDTH:150px; COLOR:Black; FONT-SIZE:12px}Wy¿ej wymienione elementy s¹ niezbêdne do prawid³owego i ³adnego dzia³aniabalonika.Kolejnym etapem jest stworzenie warstw, które bêd¹ zawiera³y tekstydo wyœwietlenia.Nale¿y wykorzystaæ stworzon¹ klasê:ZawartoœæW ten oto prosty sposób nie trzeba definiowaæ ka¿dej warstwy w stylach poprzez#Blok{}.Mo¿na to w ogóle opuœciæ, bo warstwa zostanie ustawiona wg klasy.Je¿eli ka¿da chmurka ma jakieœ inne parametry, to mo¿na czêœæ w³aœciwoœcipozostawiæ w klasie, resztê umieœciæ w stylach, tworz¹c dla ka¿dej warstwyosobne parametry.Funkcje obs³uguj¹ce pokazywanie i ukrywanie wygl¹da nastêpuj¹co:function Pokaz(Blok, e) {if (nn4) { document.layers[Blok].left=.pageX + 10; document.layers[Blok].top=e.pageY + 10; document.layers[Blok].visibility="visible";}if (ie4) { document.all[Blok].style.pixelLeft=document.body.scrollLeft + event.clientX + 10; document.all[Blok].style.pixelTop=document.body.scrollTop + event.clientY + 10; document.all[Blok].style.visibility="visible"; }}function Ukryj(Blok) {if (nn4) document.layers[Blok].visibility="hidden"if (ie4) document.all[Blok].style.visibility="hidden";}Do funkcji Pokaz() s¹ przekazywane dwa argumenty.Pierwszy zawiera informacjê,jaki blok ma byæ pokazany, drugi gdzie zdarzenie mia³o miejsce, aby mócpoprawnie wyœwietliæ balonik obok np.linki.Obiekt event zawiera wspomnianeinformacje o po³o¿eniu myszki, ale ka¿da przegl¹darka inaczej go odczytuje.Ponadto dla Exploratora nale¿y jeszcze dodaæ informacje o tym, o ile zosta³adana strona przesuniêta paskami przewijania.Mo¿na ten sk³adnik opuœciæ, je¿elijest pewnoœæ, ¿e dana strona jest na tyle krótka, ¿e przewijanie nie pojawisiê.Liczby 10 s¹ konieczne, by Tooltip nie pojawi³ siê pod, ale obok myszki.Wad¹ takiego dzia³ania jest fakt, ¿e mo¿e siê zdarzyæ, ¿e linka jest na koñcuwiersza i chmurka niestety pojawi siê za ekranem.Mo¿na temu zaradziæ,sprawdzaj¹c, czy dane uzyskane za pomoc¹ event nie s¹ takie, ¿e chmurka bêdziepoza rozmiarem przegl¹darki.Ponadto ³adne efekty mo¿na uzyskaæ poprzezopró¿nienie wyœwietlania warstwy i po kilkusekundowym czasie ukryciu bloku.Ró¿neDynamiczny HTML oferuje tak¿e inne funkcje, o których warto tylko wspomnieæ.window.location="view-source:" + window.location.href ten kod wygeneruje Ÿród³oaktualnej strony.Spowoduje otwarcie programu, gdzie domyœlnie takie Ÿród³ojest pokazywane.- ta funkcja jest dostêpna tylko w Exploratorze4+.Powoduje odwrócenie zawartoœci warstwy do góry nogami - symetryczniepoziomo.- jak wy¿ej, ale symetrycznie pionowo.Aby filtry dobrze dzia³a³y, nale¿y podaæ co najmniej jedn¹ z wielkoœcidotycz¹cych wielkoœci bloku.document.body.style.backgroundPosition= x+ " " +y; - funkcja poruszaj¹ca t³em. Dostêpna tylko dla przegl¹darki Explorer 4+.umieszczenie tych dwóch linijek w bloku spowoduje ró¿nego rodzaju(losowe) ods³anianie i zas³anianie ³adowanej strony WWW.Wad¹ jest d³ugi czastrwania animacji oraz jej dostêpnoœæ tylko w Exploratorze 4+Linka - dodaje stronê do ulubionych.Explorer 4+.Linka - ustawia dan¹ stronê jakopocz¹tkow¹, startow¹.Explorer 4+. To nie s¹ oczywiœcie wszystkie dostêpne mo¿liwoœci."Artyku³ œci¹gniêty ze strony Damiana Szczepanika:http://www.republika.pl/dszczepanik"
[ Pobierz całość w formacie PDF ]