Kode Betydning for Commercial Vandret webside Menuer Commercial Vandret webside Menuer - Del 3 Indledning Dette er del 3 i min serie, Commercial Vandret webside Menuer. I denne del af serien ser vi på koden for eksempel. Den flerdimensional tabel beskrevet i det foregående del er også en del af den komplette kode. I adskilt sin forklaring fra denne del, på grund af sin unikke natur. Bemærk: For kodeeksempler til at arbejde, skal du ændre prik lige før det reserverede ord, innerHTML, til en fuld-stop.
Bemærk: Hvis du ikke kan se koden, eller hvis du tror noget mangler i denne artikel (brudt link, billede fraværende), bare kontakte mig på [email protected]. Det vil sige, kontakt mig for det mindste problem, du har om, hvad du læser. Beholder til koden Alle JavaScript-kode og HTML-tabel, der vil producere rækkerne for menuerne er i en HTML DIV element, DIV element er nævnt i første del af serien. Hey, er der også et typografiark. Denne typografiark er også i DIV element. I DIV element, har du typografiark, tabel elementet og derefter JavaScript.
Det indre rum enhed vi nævnte i den første del af serien er skrevet under tabellen kode i DIV. Have alt i DIV, kan du sælge den DIV element og alt dens indhold. Køberen vil bare nødt til at indsætte DIV element i hans webside, som du ikke behøver at vide noget om. Og koden vil tjene ham; det vil sige, han vil have sin menu. Bare husk, at kunden er den, at skabe den flerdimensionale array, som er let at skabe; vil du vise ham hvordan. Brugeren er et websted designer. HTML Table Code Dette er HTML-tabel-kode:
Du giver en meget høj værdi for z-indeks (fx 20).
Brugeren kan have en stor z-indeksværdier i sin kode. Den ene, du vælger her bør være en, som du synes er højere, end hvad brugeren måtte have. Der er en række med en celle ovenfor; dette er for hovedmenuen. Denne række og celle vises altid. Hver række tilsættes, vil have en celle. Der vil være fire hyperlink tags i en celle, adskilt af lige antal enkeltværelser karakter mellemrum (). Bordet har en onclick event. Dette bruges til at fjerne de tilføjede rækker til undermenuen, når bordet er klikket.
Værdien af titlen tag indikerer for brugeren, at hvis han ikke ønsker de tilføjede rækker han kan klikke i tabellen uden for enhver hyperlink. JavaScript-kode Segmenter Der er seks kode segmenter i JavaScript-kode. Nogle er lange; andre er korte. Den første JavaScript-kode segment er multidimensional array. Den anden kode segment opretter hovedmenuen; det er det skaber hyperlinks (læsning fra det øverste niveau matrix) og mellemrum og føder dem i en celle i den første række i tabellen. DIV element har JavaScript vil altid være i HTML legemselementet af brugeren.
Så når siden er indlæst, er JavaScript henrettet, og det andet kodesegmentet udføres som følge heraf. Den tredje kode segment er blot én linje. Det er angivelsen og tildeling af en variabel, der sporer det samlede antal rækker, der vises. Hvert hyperlink har en onmouseover begivenhed. Den fjerde kode segment er en funktion, der reagerer på onmouseover tilfælde af hver menu hyperlink.
I eksemplet med denne serie, den funktion ændrer baggrundsbilledet for hyperlinket, og hvis hyperlinket har en undermenu, funktionen producerer undermenuen (læsning fra den tilsvarende matrix tilføjet til flerdimensional tabel). Enhver hyperlink har en onMouseOut begivenhed. Den femte kode segment er en funktion, der reagerer på denne begivenhed. I eksemplet med denne serie, kun erstatter det nye baggrundsbillede af forbindelsen til den foregående. Tabellen element har en onclick begivenhed. Den sjette kode segment er en funktion, der reagerer på denne begivenhed.
Denne funktion fjerner tilsat række for undermenuerne, når brugeren klikker i tabellen med menuerne. Hvis brugeren kun ønsker at fjerne undermenuerne uden at åbne en ny side, skal han klikke i tabellen og ikke på et hyperlink. Hvis han klikker på et hyperlink, vil undermenuerne fjernes og en ny web-side vil blive åbnet. Vi skal nu se på detaljerne i JavaScript-kode segmenter. Den første JavaScript Code Segment Dette er den flerdimensionale array. Vi har set det i den foregående del af serien.
Den anden JavaScript-kode Segment Dette er den anden JavaScript-kode-segment: //udfylde hovedmenuen for (i = 0; i {if (navigator.appName == "Microsoft Internet Explorer") {//Internet Explorer, hvis (LARR [ ,,,0],i] [0]) {foundArr = LARR [i] [0] .match (/[^,] + /g);} else {foundArr = LARR [i] .match (/[^,] + /g) ;}} else {//andre browsere, hvis (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 kode segment er en for-løkke. Der er fire gentagelser for de fire menupunkter (hyperlinks). Den første sætning er en stor, hvis-erklæring. Den hvis en del af if-sætning er for Internet Explorer-browser; den anden del er for andre browsere. Hver af disse dele, har også en if-sætning. Som for-løkke gentager 4 gange, hvert indeks er indekset for den øverste mest niveau array.
Hvis et menupunkt har en undermenu, så den tilsvarende matrix-indekset vil have en ekstra (under) array. De indre if-sætning første tjekker, om den aktuelle vifte indekset har en (under) array. Hvis den gør, det bruger regulære udtryk for at opnå den href værdi og link indhold fra det første element i den tilføjede (under) array. Hvis det aktuelle indeks ikke har en (sub) array, derefter andet del af den indre if-sætning opnår href værdi og link indhold fra den del af det aktuelle indeks.
Uanset om det er den, hvis dele eller andet, del, der er udført, det regulære udtryk funktionen (match ()) returnerer en endimensional array, der har to elementer. Til denne regulære udtryk array, det første element er den href værdi, og den anden er linket indhold fra den ene streng af den flerdimensionale array. Afkastet vifte her har navnet, foundArr. Den sidste opgørelse over denne anden kodesegmentet, producerer hyperlinks og føder dem ind i cellen i den første række i tabellen. Denne sætning bruger værdierne i foundArr array. Det giver hver linke et ID.
ID på hvert link begynder med 'l' efterfulgt af indekset for den øverste mest array, i den flerdimensionale array. Denne sidste udtalelse giver også hver knytte en onmouseover og onMouseOut begivenhed. Argumentet for onmouseover begivenhed er linket id og flerdimensional tabel element id, konstrueret. Bemærk de enkelte rum tegnkoder, der ville adskille links. Den tredje JavaScript Code Segment Det tredje kode segment er: maxRowIndx = 0; Hovedmenuen bruger den første række i tabellen. Enhver ekstra undermenu betyder ekstra række.
Denne variabel holder det maksimale antal rækker på et bestemt tidspunkt for tabellen. Det angiver det samlede antal rækker til stede på et givet tidspunkt. Den fjerde JavaScript Code Segment Dette er den første halvdel af det fjerde kodesegmentet: funktion mouseover (ID, arr) {document.getElementById (ID) .style.backgroundImage = "url ('lImg1.jpg") "; //først fjerne alle de rækker, der kan være under den aktuelle række currentIDNo = ID.slice
(1); currentRow = currentIDNo.
length; beginIndx = currentRow - 1; //tabelrække nummer, hvorefter rækker skal fjernes for (m = maxRowIndx; m> = (beginIndx + 1) --m). {document.getElementById ("T0") deleteRow (m); } MaxRowIndx = beginIndx; //nulstille maxRowInd ID NO = ID.slice
(1); //få nummeret del af id //udvikle næste tomme række, hvis links er til rådighed, hvis (navigator.appName == "Microsoft Internet Explorer") {//Internet Explorer, hvis (arr [0]) {//skabe række og tom celle maxRowIndx + = 1; //tilvækst nr. af rækker TRID = "TR" + maxRowIndx; //opretter rækken ID document.
getElementById ("T0") insertRow (maxRowIndx.); document.getElementById ('T0 «) rækker [maxRowIndx] .id = TRID.; document.getElementById (TRID) .style.backgroundColor = "Turkis"; spanID = "TD" + maxRowIndx + "0"; //opretter rækken ID; document.getElementById (TRID) .insertCell
(0); spanIDStr = ""; document.getElementById (TRID) .cells [0] ⋅innerHTML = spanIDStr; for (j = 1; j //få href og indholdet af de enkelte link i en matrix, hvis (arr [j] [0]) {seenArr = arr [j] [0] .match (/[^,] + /g);} else {seenArr = arr [j] .
match (/[^,] + /g);} //sat i cellen indhold TDStr = "for (k = 0; k TDStr = TDStr +" [" + IDNo.substr (k, 1) + "]";} TDStr = TDStr + "[" + j + "]" + ") \\" onMouseOut = \\ "mouseout ('l" + ID NO + j + "') \\ ">