kode Forklaring for Commercial Horisontal webside Menyer Commercial Horisontal webside Menyer - Del 3 Innledning Dette er del 3 av serien min, Commercial Horisontal webside Menyer. I denne delen av serien ser vi på koden for eksempel. Den flerdimensjonale matrise er beskrevet i den foregående delen er også en del av den fullstendige koden. I sin forklaring adskilt fra denne del, på grunn av sin unike natur. Merk: For kodeeksempler for å jobbe, bør du endre prikk like før det reserverte ordet, innerhtml, til en full-stop.
Merk: Hvis du ikke kan se koden, eller hvis du tror noe mangler i denne artikkelen (brutt link, bilde fraværende), bare kontakte meg på [email protected]. Det er, kontakt meg for den minste problemet du har om hva du leser. Container for kode All Javascript-kode og HTML Table som skal produsere radene for menyene er i en HTML DIV element, DIV element nevnt i del en av serien. Hei, det er også et stilark. Dette stilark er også i DIV element. I DIV element, har du style sheet, Table element og deretter Javascript.
Singelen plass enhet vi nevnt i første del av serien er skrevet under Table koden i DIV. Å ha alt i DIV, kan du selge den DIV element og alt dens innhold. Kjøperen vil bare nødt til å lime inn DIV element i sin nettside, som du ikke trenger å vite noe om. Og koden vil tjene ham; som er, vil han ha sin meny. Bare husk at kunden er den å skape flerdimensjonal array, som er lett å lage; du vil vise ham hvordan. Brukeren er en nettside designer. HTML Table kode Dette er HTML Table kode:
Du gir en svært høy verdi for z-indeks (f.eks 20). Brukeren kan ha høy z-indeksverdier i sin kode.
Den du velger her bør være en som du tror er høyere enn hva brukeren måtte ha. Det er en rekke med en celle ovenfor; dette er for hovedmenyen. Denne raden og celle vises alltid. Hver rad lagt vil ha en celle. Det vil være fire hyperkobling tagger i en celle, atskilt med likt antall enkelttegn mellomrom (). Bordet har en onclick event. Dette brukes til å fjerne de ekstra rader for undermenyen, når bordet er klikket. Verdien av tittelen koden indikerer til brukeren om at hvis han ikke ønsker den ekstra rader han kan klikke i tabell utenfor en hyperlink.
Javascript-kode segmenter Det er seks koden segmenter i Javascript-kode. Noen er lang; andre er kort. Den første Javascript-kode segment er den flerdimensjonal array. Den andre kodesegmentet skaper hovedmenyen; som er det skaper hyperkoblinger (leser fra det øverste nivået matrise) og mellomrom og mater dem inn i cellen i den første raden i tabellen. DIV element ha Javascript vil alltid være i HTML BODY element av brukeren. Så, når siden er lastet, blir Script utført og den andre kodesegmentet er utført som et resultat. Den tredje kodesegmentet er bare en linje.
Det er erklæringen og tildeling av en variabel som sporer det totale antallet rader som vises. Hver hyperkobling har en onmouseover hendelsen. Den fjerde kodesegmentet er en funksjon som reagerer på onmouseover ved hver meny hyperlink. I eksempelet i denne serien, endrer funksjon bakgrunnsbildet for hyperkoblingen, og hvis hyperkoblingen har en undermeny, produserer funksjonen undermenyen (leser fra tilsvarende matrisen lagt til flerdimensjonal array). Enhver hyperkobling har en onmouseout hendelse. Den femte kodesegmentet er en funksjon som reagerer på denne hendelsen.
I eksempelet i denne serien, det bare erstatter det nye bakgrunnsbildet for kobling med den forrige. Tabellen element har en onclick event. Den sjette kodesegmentet er en funksjon som reagerer på denne hendelsen. Denne funksjonen fjerner noen ekstra rad for undermenyer, når brukeren klikker på Tabell ha menyene. Hvis brukeren ønsker bare å fjerne undermenyene uten å åpne en ny side, bør han klikker i bordet og ikke på en hyperkobling. Hvis han klikker på en hyperkobling, vil undermenyene fjernes og en ny nettside vil bli åpnet. Vi skal nå se på detaljene i Javascript-kode segmenter.
The First Javascript-koden Segment Dette er flerdimensjonal array. Vi har sett dette i forrige del av serien. The Second Javascript-koden Segment Dette er den andre Javascript-kode segment: //fylle i hovedmenyen for (i = 0; i {if (navigator.appName == "Microsoft Internet Explorer") {//Internet Explorer if (larr [ ,,,0],i] [0]) {foundArr = larr [i] [0] .match (/[^,] + /g);} else {foundArr = larr [i] .match (/[^,] + /g) ;}} else {//andre nettlesere if (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] + "\\; \\; \\; \\; \\; \\; \\; \\; "; } Denne koden segment er en for-løkke. Det er fire iterasjoner for varer de fire meny (hyperkoblinger). Den første setningen er en stor if-statement. Den hvis en del av if-setningen er for Internet Explorer; den andre delen er for andre nettlesere. Hver av disse delene, har også en if-setning. Som for-loop gjentas 4 ganger, er hver indeks for indeksen på det øverste nivå array.
Hvis et menyelement har en undermeny, da det tilsvarende tabellindekser vil ha en ekstra (sub) array. De indre if-setning sjekker først hvis den nåværende tabellindekser har en (sub) array. Hvis den gjør det, bruker det vanlige uttrykket for å få href verdi og link innhold fra første del av den ekstra (sub) array. Hvis gjeldende indeksen ikke har en (sub) matrise, da ellers en del av den indre if-setningen innhenter href verdi og kobling innhold fra elementet av den gjeldende indeksen.
Enten det er den hvis-delen eller den andre delen som er utført, det vanlige uttrykket funksjon (kamp ()) returnerer en endimensjonal array, som har to elementer. For denne vanlige uttrykk matrisen, er det første elementet i href verdi, og den andre er koblingen innhold fra en streng av multidimensjonalt matrisen. Avkastningen utvalg her har navnet, foundArr. Den siste setningen i denne andre kodesegmentet, produsere hyperkoblinger og mater dem inn i cellen i den første raden i tabellen. Denne uttalelsen benytter verdiene av foundArr matrisen. Det gir hver kobling en ID.
ID-en til hver kobling begynner med 'l' etterfulgt av indeksen for den øverste array, i flerdimensjonal array. Denne siste uttalelsen gir også hver koble et onmouseover og onmouseout hendelsen. Argumentet for onmouseover arrangementet er linken ID og flerdimensjonal array element identifikator, konstruert. Legg merke til enkeltområder tegnkoder som ville skille koblingene. The Third Javascript-koden Segment den tredje kodesegmentet er: maxRowIndx = 0; Hovedmenyen bruker den første raden i tabellen. Noen lagt undermeny betyr ekstra rad.
Denne variabelen inneholder det maksimale antallet rader på et bestemt tidspunkt for tabellen. Det indikerer det totale antall rader som er tilstede til enhver tid. Den fjerde Javascript-koden Segment Dette er første halvdel av fjerde kodesegmentet: function mouse (ID, arr) {document.getElementById (ID) .style.backgroundImage = "url ('lImg1.jpg')"; //først fjerne alle radene som kan være under gjeldende rad currentIDNo = ID.slice
(1); currentRow = currentIDNo.length; beginIndx = currentRow - 1; //tabellen radnummer etter som rader må fjernes for (m = maxRowIndx; m> = (beginIndx + 1);-M).
{document.getElementById ('T0') deleteRow (m); } MaxRowIndx = beginIndx; //null maxRowInd IDNO = ID.slice
(1); //få antallet delen av ID //utvikle neste tom rad om koblinger er tilgjengelig if (navigator.appName == "Microsoft Internet Explorer") {//Internet Explorer hvis (arr [0]) {//oppretter rad og tomme cellen maxRowIndx + = 1; //øke noe. rader TrID = "TR" + maxRowIndx; //oppretter rad ID document.getElementById ('T0') insertRow (maxRowIndx.); document.getElementById ('T0') rader [maxRowIndx] .id = TrID.; document.getElementById (TrID) .style.
backgroundColor = "Turquoise"; spanID = "TD" + maxRowIndx + "0"; //oppretter rad ID; document.getElementById (TrID) .insertCell
(0); spanIDStr = ""; document.getElementById (TrID) .cells [0] ⋅innerHTML = spanIDStr; for (j = 1, j //få href og innholdet i hver koblingen i en matrise hvis (arr [j] [0]) {seenArr = arr [j] [0] .match (/[^,] + /g);} else {seenArr = arr [j] .match (/[^,] + /g);} //satt i celleinnholdet TDStr = "for (k = 0; k TDStr = TDStr +" [" + IDNo.
substr (k, 1) + "]";} TDStr = TDStr + "[" + j + "]" + ") \\" onmouseout = \\ "mouseout ('l" + IDNO + j + "') \\ ">