Etsi sivuiltani:

	Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > I Miten luoda dynaamisia valikoita > Käytetty JavaScript-koodaus (jakso 2/6)

Sivun jaksot:

Introjakso

Edellinen jakso

Seuraava jakso

Viimeinen jakso

Käytetty JavaScript-koodaus

Aiheet

• Mallitiedostot
• Funktiot

Mallitiedostot

DHTML/DOM valikoissa JavaScrip-koodaus liittyy HTML ja CSS-koodaukseen. Systeemi tarvitsee toimiakseen yhden JavaScript- ja muutaman CSS-tiedoston sekä ohjauksen dokumentin HEAD-elementin sisään sekä BODY-elementin sisälle ns. tapahtumankäsittelijöihin (event handlers). Seuraavia mallitiedostoja (olen käyttänyt niitä suomen- ja englanninkielisillä CSS-sivuilla) voi käyttää apuna suunniteltaessa dynaamisia valikoita:

• Dynaamisten valikoiden JavaScript-tiedosto ../Menumodels/layers.js.
• Dynaamisten valikoiden CSS-tiedostot:
  • ../Menumodels/basicScreen.css. Dynaamisten valikoiden CSS on tiedoston alussa. Se soveltuu hyvin Opera 5.x+, MS IE 5.0+ ja Netscape 6.x/ vastaaville Mozilla -selaimille mutta ei optimaalisesti MS IE 4.0 Windows -selaimelle.
  • ../Menumodels/layersMozilla4.css. CSS Netscape 4.x -selaimille.
• Dokumentin head-osan koodaus, josta on kaksi mallia (viittaukset linkitettyihin tiedostoihin sekä osa tarvittavasta JavaScript-koodauksesta on näissä tiedostoissa):
  • ../Menumodels/AdviceMetaSu.inc (käytetty suomenkielisillä CSS-sivuilla; olen tehnyt tähän versioon muutamia uusia funktioita)
  • ../Menumodels/AdviceMetaEn.inc (käytetty englanninkielisillä CSS-sivuilla)
• Dynaamisten valikoiden koodi tiedostoina:
  • ../Menumodels/AdviceNavigationSu.inc (käytetty suomenkielisillä CSS-sivuilla; tässä versiossa on lyhyemmät funktiokutsut)
  • ../Menumodels/AdviceNavigationEn.inc (käytetty englanninkielisillä CSS-sivuilla)
• Esimerkkisivut:
  • ../Menumodels/NetscapeSuModel.html (suomenkielinen)
  • ../Menumodels/NetscapeEnModel.html (englanninkielinen)

Yleisiä huomautuksia:

• Nykysin vastaavat tiedostot ovat sivuillani hieman erilaisia. En enää käytä Netscape 4.x -selaimissa toimivia dynaamisia valikoita. Netscape 4.x saa else {} - Netscape 4.x ei tee yhtään mitää! MS IE 4.0 Windows ja MS IE Mac -selaimet, jotka tukevat MS IE:n epästandardia DHTML:ää on tuettu. Koodissa ei ole ajastusfunktioita, sillä ne aiheuttavat monissa selaimissa ongelmia. Jos et kaipaa Netscape 4.x tukea etkä ajastuksia voit ladata seuraavan yksinkertaistetun koodin:

  • http://netti.nic.fi/~tapio1/Navigoinnit/layersSimple.js.

• Jos et halua tukea sellaisia MS IE -selaimia, jotka tukevat vain selainkohtaista DHTML:ää, muuta koodia ja määrittele CSS ehdollisesti siten, että sellaiset MS IE -selaimet, jotka eivät tue DOM1:tä, saavat eri CSS:n. Minimikoodi on seuraava:

  function MM_showHideLayers() {if (document.getElementById)
  { var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3)
  {
  v=args[i+2];/* tätä kohtaa ei tule muuttaa muotoon
  i<(args.length-1); i+=2)... v=args[i+1], sillä silloin skripti ei toimi MS IE 5.0 Windows -selaimessa */
  {var Cmenu = document.getElementById(args[i]);
  v=(v=='show')?'visible':(v='hide')?'hidden':v;
  Cmenu.style.visibility = v;
  }
  }
  }
  else {} /* muodollinen päätös, joka ei ole välttämätön */
  }

Funktiot

Dynaamisten valikoiden linkit voivat olla itse sivulla tai ne voidaan tuotattaa JavaScript-koodauksilla or palvelinpuolen systeemeillä. Esimerkkisivuilla linkit ovat taulukoissa. JavaScript, jota olen käyttänyt määrittää vain sen, mitkä valikot paljastetaan/ piilotetaan ja millä tavalla paljastaminen/ piilottaminen tapahtuu.

Dynaamisten valikoiden toimintaidea on hyvin yksinkertainen. Sivun tekijä määritellään lohkoja, jotka toimivat dynaamisina valikkoina. Näille annetaan id-attribuutti, joilla on tapahtumankäsittelijöissä vastaava arvot eli parametrit (käytetään myös nimitystä argumentit). Yleisimmät tapahtumankäsittelijät ovat onmouseover, onmouseout ja onclick - viimeksi mainittu voidaan korvata href="javascript:" tilanteissa, missä ei tarvita tapahtumankäsittelyn ohella tavanomaista linkitystä). Opetan niiden käyttöä. Funktioita, jotka Web-suunnittelijan täytyy tunnistaa dynaamisten valikoiden suunnittelussa on vain kolme:

• Pääfunktio MM_showHideLayers(), jolle annetaan joukko kolmisarjaisia argumenttijoukkoja. Ensimmäinen vastaa id-attribuuttia, esim. MM_showHideLayers('Pages','','show') koskee elementtiä, jolla on id="Pages". Kolmas arvo koskee sitä, että piilotetaanko/paljastetaanko valittu elementti (se saa joko arvon hide tai show). Arvojoukkoja voi olla kuinka paljon tahansa ja jokainen argumentti erotetaan toisistaan '' merkeillä ja pilkuilla, esim. MM_showHideLayers('indexPages','','hide','allSites','','hide','Pages','','show');. Suosittelen, että käytät vain tätä funktiota.

• Ajastusfunktiot, esim. piilota_valikot_hitaimmin('MainPages'), joilla kontrolloidaan sitä, miten pitkäksi aikaa valikko jää näkyviin, kun hiiri poistuu aktiivisen linkin tai alueen päältä. Funktiosta on useita versioita. Olen muuttanut funktioiden nimet haluamakseni (jos muutat ajastusarvoja tai funktioiden nimiä suosittelen, ettet muilta osin koske JavaScript-tiedostoon).

• Apufunktio ajastin_pois(), jota käytetään ensiksi mainitsemani funktion yhteydessä ottamaan pois päältä ajastusfunktiot (mikäli linkille tai alueelle ei ole annettu missään olosuhteissa ajastusta tätä funktiota ei tarvita).

Sivun jaksot:

Introjakso

Edellinen jakso

Seuraava jakso

Viimeinen jakso