[ Pobierz całość w formacie PDF ]
.Poka¿ê tymrazem, jak skorzystaæ z kodu omówionego w rozdziale 3.Przyk³ad ten doskonalepoka¿e, jak oszczêdzaæ swój czas, wielokrotnie wykorzystuj¹c ten sam kod.Wymagania programuW tej aplikacji u¿ywamy DHTML, wiêc bêd¹ potrzebne przegl¹darki NetscapeNavigator lub Internet Explorer w wersji co najmniej 4.x.W³¹czy³em do gry 20wyszukiwarek, ale mo¿na tê liczbê zwiêkszyæ nawet do setek.Jednak typowegou¿ytkownika zadowoli ju¿ zapewne liczba 20 wyszukiwarek.Pamiêtajmy te¿, ¿e taaplikacja mo¿e dzia³aæ na maszynie lokalnej, ale – jak pokaz slajdów – zbytdu¿a iloœæ grafiki zwiêkszy czas potrzebny do jej za³adowania w przypadkuu¿ytkowników dzia³aj¹cych za poœrednictwem Internetu.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
[ Pobierz całość w formacie PDF ]