[ Pobierz całość w formacie PDF ]
.Struktura programuAplikacja ta zawiera dwa pliki: index.html i multi.html.Pierwszy z nich,pokazany jako przyk³ad 4.1, u¿ywa zagnie¿d¿onych ramek w celu uzyskania efektuotaczaj¹cego obramowania.Przyk³ad 4.1.Index.html123 Witryna multiwyszukiwarki4591011121314151618192021Dwie zmienne JavaScriptu black i white zdefiniowane w wierszach 6 i 7 zawieraj¹kod HTML, który mo¿e zostaæ u¿yty jako wartoœæ atrybutu SRC ramek.Zmienne teu¿yte s¹ w wierszach 12 i 14–16.Omawialiœmy to w ramce opisuj¹cej technikiJavaScriptu w rozdziale 2.(„Oszukany atrybut SRC”).Jeœli czytelnik œledzirozdzia³y po kolei, powinien byæ teraz kopalni¹ wiedzy na ten temat.Jedyneramki realizuj¹ce jakieœ funkcje, to frames[2], która wyœwietla wynikiwyszukiwania, oraz frames[4], która zawiera interfejs wyszukiwarek.Resztas³u¿y tylko do pokazywania.PrzejdŸmy teraz do pliku multi.html, pokazanegow przyk³adzie 4.2.Przyk³ad 4.2.multi.html123 Multi-Engine Menu45198199200201202203206207208209210211212213Przyk³ad 4.2.multi.html (dokoñczenie)214215216217218219220221Mamy tu ponad 200 wierszy kodu, ale wiêkszoœæ tego kodu jest ju¿ czytelnikowiznana, nie powinno byæ wiêc z niczym problemu.Zacznijmy od wiersza 7:parent.frames[2].location.href = 'javascript: parent.white';Jeœli policzymy ramki w index.html, stwierdzimy, ¿e frames[2] znajduje siê tam,gdzie maj¹ byæ wyniki wyszukiwania.Ustawienie w tej ramce w³aœciwoœcilocation.href nieco upraszcza obs³ugê, jeœli zdecydujemy siê powtórnieza³adowaæ aplikacjê.Jako dokument wynikowy za³adowana zostanie jakaœ lokalnastrona HTML, wiêc nie bêdzie trzeba czekaæ na ponowne uzyskanie poprzednichwyników wyszukiwania.Przy okazji warto zaznaczyæ, choæ we frames[2] masz ³adnie pokazane wynikiwyszukiwania, to kiedy klikniesz któreœ z ³¹cz wynikowych, jesteœ zdanyna ³askê i nie³askê projektantów danej wyszukiwarki.Niektóre wyszukiwarkipoka¿¹ odpowiedni¹ stronê w tej samej ramce, inne, wœród nich niestetyInfoSeek, wymusi otwarcie dokumentu w g³Ã³wnym oknie przegl¹darki.Przechadzka Alej¹ PamiêciPrzejdŸmy siê teraz Alej¹ Pamiêci (chodzi o RAM, jak ³atwo siê domyœliæ).Jeœliprzyjrzymy siê poni¿szym zmiennym, stwierdzimy, ¿e niektóre z nich s¹ nowe, aleczêœæ jest uderzaj¹co podobna do tych, z którymi pracowaliœmy w rozdziale 3.Spójrzmy, mamy NN i curSlide! S¹ te¿ hideName i showName, jakrównie¿ imagePath i zIdx:var NN = (document.layers ? true : false);var curSlide = 0;var hideName = (NN ? 'hide' : 'hidden');var showName = (NN ? 'show' : 'visible');var perLyr = 4;var engWdh = 90;var engHgt = 20;var left = 375;var top = 10;var zIdx = -1;var imgPath = 'images/';var arrayHandles = new Array('out', 'over');Zmienne te pe³ni¹ tak¹ sam¹ funkcjê, jak w rozdziale 3.Jeœli chodzi o nowezmienne, perLyr okreœla na przyk³ad liczbê wyszukiwarek, które maj¹ byæwyœwietlane na warstwie.Zmienne engWdh i engHgt opisuj¹ domyœln¹ szerokoœæi wysokoœæ poszczególnych warstw.Zmienne left i top s³u¿¹ do pozycjonowaniawarstw.Zmienna arrayHandles zawiera tablicê u¿ywan¹ do wstêpnego ³adowaniaobrazków.Bêdzie jeszcze o tym mowa w dalszej czêœci rozdzia³u.Przyjrzyjmy siê funkcjom z wierszy 142–156:function genLayer(sName, sLeft, sTop, sWdh, sHgt, sVis, copy) {if (NN) {document.writeln('' +copy + '');}else {document.writeln('' + copy + '');}}oraz z wierszy 163–177:function hideSlide(name) { refSlide(name).visibility = hideName; }function showSlide(name) { refSlide(name).visibility = showName; }function refSlide(name) {if (NN) { return document.layers[name]; }else { return eval('document.all.' + name + '.style'); }}function changeSlide(offset) {hideSlide('slide' + curSlide);curSlide = (curSlide + offset < 0 || curSlide + offset >= lyrCount ?(curSlide + offset < 0 ? lyrCount - 1 : 0) : curSlide + offset);showSlide('slide' + curSlide);}Jest tu piêæ funkcji: genSlide(), refSlide(), hideSlide(), showSlide() ichangeSlide().Wszystkie dzia³aj¹ podobnie jak w rozdziale 3.; jeœli czegoœnie pamiêtasz, po prostu wróæ do tego rozdzia³u.Istniej¹ te¿ dwie nowefunkcje: imagePreLoad() i imageSwap(), które maj¹ te same zadania, ale zosta³yzmodyfikowane na tyle, ¿e zasadne jest ich ponowne omówienie.Dynamiczne ³adowanie obrazkówJednym z wielkich paradygmatów Sieci jest dynamiczne przeprowadzenie operacjizasadniczo statycznych.Po co robiæ coœ statycznie, skoro mo¿na znaczniewygodniej dokonaæ „w biegu”? Tak w³aœnie dzieje siê zazwyczaj ze wstêpnym³adowaniem obrazków.Jak tego wygl¹da wstêpne ³adowanie obrazków, którychchcesz u¿yæ do przewijanego menu? Mo¿e to byæ kod mniej wiêcej taki:var myImage1On = new Image();myImage1On.src = 'images/myImgOn1.gif'var myImage1Off = new Image();myImage1Off.src = 'images/myImgOff1.gif';Wydaje siê to ca³kiem proste, jednak do opisania jednej pary obrazków potrzebnenam by³y cztery wiersze kodu, a co siê stanie, jeœli par bêdzie piêæ czydziesiêæ? Potrzebowalibyœmy 20 lub 40 wierszy.Jeœli tylko zaczniemy robiæjakieœ zmiany, natychmiast zrobi siê kompletny ba³agan.W tej aplikacjiprzedstawimy sposób poradzenia sobie z ³adowaniem dowolnej (teoretycznie)liczby par obrazków.Bêdziemy potrzebowaæ trzech rzeczy:Tablicy obiektów Image dla ka¿dego zestawu obrazków
[ Pobierz całość w formacie PDF ]