Koodi Selitys kaupallista Vaaka Web Sivu Valikoiden Kaupalliset Vaaka Web-sivu Valikot - Osa 3 Johdanto Tämä on osa 3 minun sarja, kaupalliset Vaaka Web-sivu valikot. Tässä osa sarjasta, katsomme koodi esimerkki. Moniulotteinen array kuvattu edellisessä osassa on myös osa koko koodi. Olen erotettu sen selitys tästä osasta, koska sen ainutlaatuinen luonto. Huomautus: mallikoodit työskennellä, sinun pitäisi vaihtaa piste juuri ennen varattu sana, innerHTML, täyteen-stop.
Huomautus: Jos et näe koodia tai jos luulet jotain puuttuu tässä artikkelissa (rikki linkki, kuva poissa), vain yhteyttä minuun [email protected]. Eli minuun yhteyttä pienintäkään ongelmaa olet mitä luet. Säiliö koodin Kaikki JavaScript-koodin ja HTML Taulukko, joka tuottaa rivit valikot ovat yksi HTML DIV elementin DIV elementti mainittu osa yksi sarjan. Hei, siellä on myös tyylisivu. Tämä tyylisivu on myös DIV elementti. Vuonna DIV elementin, sinulla on tyylisivu, taulukon elementti ja sitten JavaScript.
Yksi välilyönti kokonaisuus mainitsimme ensimmäinen osa sarjan kirjoitetaan taulukon alla koodi DIV. Ottavat kaiken DIV, voit myydä DIV elementin ja kaikki sen sisältö. Ostajan täytyy vain liittää DIV elementti hänen web-sivun, jossa sinun ei tarvitse tietää mitään. Ja koodi toimii häntä; eli hän on hänen valikko. Vain muistaa, että asiakas on yksi luoda moniulotteinen array, joka on helppo luoda; voit näyttää hänelle, kuinka. Käyttäjä on sivusto suunnittelija. HTML Taulukko-koodi Tämä on HTML Taulukko koodi:
Annat erittäin suuri arvo z-indeksi (esim 20).
Käyttäjällä voi olla korkea z-indeksin arvot hänen koodi. Valitsemaasi täällä olisi sellainen, joka luulet on korkeampi kuin mitä käyttäjä voi olla. On yksi rivi yhden solun yläpuolella; tämä on päävalikko. Tämä rivi ja solu on aina näkyvissä. Kukin rivi lisätään on yksi solu. Tulee neljä hyperlinkki tagit yhdessä solussa, erotettu yhtä monta yksittäisen merkin tilat (). Taulukossa on onclick tapahtuma. Tätä käytetään poistamaan lisätään rivit alivalikko kun pöytä napsautetaan.
Arvo otsikkokoodi osoittaa käyttäjälle, että jos hän ei halua lisätä rivejä hän voi klikata sisällä taulukossa ulkopuolella hyperlinkin. JavaScript-koodi Segmentit on kuusi koodi segmenttejä JavaScript-koodin. Jotkut ovat pitkiä; toiset ovat lyhyitä. Ensimmäinen JavaScript-koodi segmentti on moniulotteinen array. Toinen koodisegmentti luo päävalikkoon; että se luo linkkejä (lukee ylimmän tason array) ja välilyöntejä ja ruokkii ne soluun ensimmäisen rivin taulukon. DIV elementti, jossa JavaScript on aina HTML BODY osa käyttäjän.
Joten, kun sivu on ladattu, JavaScript suoritetaan ja toinen koodisegmentin suoritetaan seurauksena. Kolmas koodisegmentti on vain yksi rivi. Se on julistus ja luovutus muuttuja, joka seuraa kokonaismäärä rivien näytetään. Jokainen hyperlinkki on onmouseover tapahtuma. Neljäs koodisegmentti on toiminto, joka vastaa onmouseover jos kunkin valikon hyperlinkin. Esimerkissä tämän sarjan, Toiminto muuttaa taustakuvan hyperlinkin, ja jos hyperlinkin on Alivalikossa toiminto tuottaa alivalikon (lukee vastaavasta array lisätty moniulotteinen array). Hyperlinkin on onmouseout tapahtuma.
Viides koodisegmentti on toiminto, joka vastaa tähän tapahtumaan. Esimerkissä tämän sarjan, se vain korvaa uuden taustakuvan yhteys edelliseen. Taulukko elementti on onclick tapahtuma. Kuudes koodisegmentti on toiminto, joka vastaa tähän tapahtumaan. Tämä toiminto poistaa kaikki lisätty rivi alivalikoita, kun käyttäjä napsauttaa taulukossa jolla valikot. Jos käyttäjä haluaa vain poistaa alivalikkoja avaamatta uutta sivua, hän tulee klikata taulukon sisällä eikä hyperlinkkiä. Jos hän napsauttaa hyperlinkkiä, alivalikot poistetaan ja uusi web-sivun avataan.
Meillä on nyt tarkastella yksityiskohtia JavaScript-koodin segmentit. Ensimmäinen JavaScript koodisegmentti Tämä on moniulotteinen array. Olemme nähneet tämän edellisessä osa sarjasta. Toinen JavaScript koodisegmentti Tämä on toinen JavaScript-koodi segmentti: //täyttää päävalikosta (i = 0; i {jos (navigator.appName == "Microsoft Internet Explorer") {//Internet Explorerin jos (LARR [ ,,,0],i] [0]) {foundArr = LARR [i] [0] .match (/[^,] + /g);} else {foundArr = LARR [i] .match (/[^,] + /g) ;}} else {//muita selaimia jos (LARR [i] [0] .length> 1) {foundArr = LARR [i] [0] .
match (/[^,] + /g);} else {foundArr = LARR [i] .match (/[^,] + /g); }} Document.getElementById (TD00) ⋅innerHTML = document.getElementById (TD00) ⋅innerHTML + "" rel = "nofollow" class = "exlnk" target = "_ blank" + foundArr [1] + "\\; \\; \\, \\, \\, \\, \\, \\ "; } Tämä koodi segmentti on for-silmukka. On neljä toistojen varten neljä valikkokohdetta (hyperlinkkejä). Ensimmäisessä lausumassa on suuri, jos-selvitys. Jos osa, jos-selvitys on Internet Explorer-selain; muu osa on muille selaimille. Jokainen näistä osista, myös jos-selvitys.
Kuten for-silmukka toistetaan 4 kertaa, kukin indeksi on indeksi ylimmän tason array. Jos valikossa on alivalikko sitten vastaava taulukkoindeksin on lisätty (ala) array. Sisempi jos-selvitys tarkistaa ensin, jos nykyinen taulukkoindeksin on (ala) array. Jos se, se käyttää säännöllinen lauseke saamiseksi href arvon ja linkin sisältöä ensimmäinen osa lisätään (ala) array. Jos nykyinen indeksi ei ole (ala) array, niin muu osa sisemmän jos-selvitys saa href arvon ja linkin sisällön osa indeksin.
Onko se on jos-osa tai muu osa, joka suoritetaan, säännöllinen lauseke toiminto (ottelu ()) palauttaa yksiulotteinen, jossa on kaksi elementtejä. Tämän säännöllinen lauseke array, ensimmäinen elementti on href arvo ja toinen on linkki sisältöä yhdeltä merkkijono moniulotteinen array. Tuotto array tässä on nimi, foundArr. Viimeinen lausunto Tämän toisen koodisegmentti, tuottaa hyperlinkkejä ja syöttää ne soluun ensimmäisen rivin taulukon. Tämä lausunto käyttää arvoja foundArr array. Se antaa jokaiselle linkittää tunnus.
ID kunkin linkin alkaa 'L' jälkeen indeksi Ylimmässä mä, moniulotteinen array. Tämä viimeinen toteamus antaa myös kunkin linkin onmouseover ja onmouseout tapahtuma. Väite onmouseover tapahtuma on linkki tunnus ja moniulotteinen array elementti tunnisteen, rakennettu. Huomaa yhdellä välilyönnillä yhteisöjä, erottaisi linkkejä. Kolmas JavaScript koodisegmentti kolmas koodisegmentti on: maxRowIndx = 0; Päävalikko käyttää ensimmäinen rivi taulukossa. Lisättyä alivalikko tarkoittaa lisätään rivi. Tämä muuttuja pitää rivien enimmäismäärä tiettynä ajankohtana taulukon.
Se osoittaa kokonaismäärän riviä läsnä kulloinkin. Neljäs JavaScript koodisegmentti Tämä on alkupuoliskolla neljännen koodisegmentin: toiminto mouseover (ID, sov) {document.getElementById (ID) .style.backgroundImage "url ('lImg1.jpg')" //Ensin poistaa kaikki rivit, jotka voivat olla alle nykyisen rivin currentIDNo = ID.slice
(1); currentRow = currentIDNo.length; beginIndx = currentRow - 1; //Taulukon rivi numeron, jonka jälkeen rivit on poistettava (m = maxRowIndx; m> = (beginIndx + 1); --m) {document.getElementById ('T0').
DeleteRow (m); } MaxRowIndx = beginIndx; //Reset maxRowInd IDNo = ID.slice
(1); //Saada numero osa ID //kehittää uuden tyhjän rivin, jos yhteydet ovat käytettävissä, jos (navigator.appName == "Microsoft Internet Explorer") {//Internet Explorerin jos (arr [0]) {//luoda rivi ja tyhjään soluun maxRowIndx + = 1; //Lisäys ei. rivien TRID = "TR" + maxRowIndx; //Luoda rivi ID document.getElementById ('T0'). InsertRow (maxRowIndx); document.getElementById ("T0 '). rivit [maxRowIndx] .id = TRID; document.getElementById (TRID) .style.
backgroundColor = "Turquoise"; spanID = "TD" + maxRowIndx + "0"; //Luoda rivi tunnus; document.getElementById (TRID) .insertCell
(0); spanIDStr = ""; document.getElementById (TRID) .cells [0] ⋅innerHTML = spanIDStr; for (j = 1, j //saada href ja sisältö kunkin linkin taulukkoon, jos (arr [j] [0]) {seenArr = arr [j] [0] .match (/[^,] + /g);} else {seenArr = arr [j] .match (/[^,] + /g);} //laittaa solun sisällön TDStr = "varten (k = 0; k TDStr = TDStr +" [" + IDNo.
substr (k, 1) + "]";} TDStr = TDStr + "[" + J + "]" + ") \\" onmouseout = \\ "mouseout ('l" + IDNo + J + "") \\ ">