code Verklaring voor commerciële Horizontaal webpagina's Commercial Horizontaal webpagina's - deel 3 Inleiding Dit is deel 3 van mijn reeks, Commercieel Horizontaal webpagina's. In dit deel van de serie, kijken we naar de code voor het voorbeeld. De multidimensionale array in het vorige deel beschreven is ook onderdeel van de volledige code. Ik gescheiden zijn uitleg van dit deel, vanwege zijn unieke karakter. Opmerking: Voor de codevoorbeelden om te werken, moet je de stip wijzigen vlak voordat het gereserveerde woord, innerHTML, een full-stop.
Opmerking: Als u de code niet kunt zien of als u denkt dat er iets ontbreekt in dit artikel (gebroken koppeling, het afwezig), neem dan contact met mij op [email protected]. Dat wil contact met mij op voor het geringste probleem dat je hebt over wat je aan het lezen bent. Container voor code Alle JavaScript-code en de HTML-tabel die de rijen voor de menu's zal produceren in een HTML DIV element, de in het eerste deel van de serie genoemd DIV element. Hey, er is ook een style sheet. Deze style sheet is ook in de DIV-element.
In het DIV element, heb je de style sheet, de tabel element en de JavaScript. De interne ruimte entiteit we in het eerste deel van de reeks wordt genoemd onder de tabel code in de DIV getypt. Met alles in de DIV, kunt u de DIV-element en alle inhoud te verkopen. De koper zal alleen maar om het DIV element in zijn web pagina, die je niet hoeft om iets over te weten te plakken. En de code zal hem dienen; dat wil, zal hij zijn menu. Bedenk dat de klant de ene naar de multidimensionale array, die gemakkelijk te creëren; je zal hem laten zien hoe. De gebruiker is een website ontwerper.
De HTML tabel Code Dit is de HTML-code Tabel:
Je geeft een zeer hoge waarde voor de z-index (bv 20). De gebruiker kan hoog z-index waarden in zijn code. Degene die je hier kiest moet er een zijn die je denkt dat hoger is dan wat de gebruiker zou kunnen hebben. Er is een rij met een cel boven; dit is voor het hoofdmenu. Deze rij en cel wordt altijd weergegeven. Elke rij toegevoegd zal een cel hebben. Er zullen vier hyperlink labels in een cel, gescheiden door evenveel één tekenspaties (). De tafel heeft een onclick event.
Dit wordt gebruikt om de toegevoegde rijen te verwijderen voor het submenu, wanneer de tafel wordt geklikt. De waarde van de title tag geeft aan de gebruiker dat als hij niet wil dat de toegevoegde rijen hij kan klikken in de tabel buiten een hyperlink. JavaScript-code Segmenten Er zijn zes code segmenten in de JavaScript-code. Sommige zijn lang; anderen zijn kort. De eerste JavaScript-code segment is de multidimensionale array.
De tweede code segment maakt het hoofdmenu; die het creëert de hyperlinks (lezen van het bovenste niveau array) en de spaties en voert ze in de cel van de eerste rij van de tabel. De DIV element met de JavaScript zal altijd in de HTML BODY element van de gebruiker. Dus, wanneer de pagina wordt geladen, de JavaScript wordt uitgevoerd en de tweede code segment wordt uitgevoerd als gevolg. De derde code-segment is slechts één regel. Het is de verklaring en toewijzing van een variabele die het aantal rijen weergegeven tracks. Elke hyperlink heeft een onmouseover evenement.
De vierde code segment is een functie die reageert op de onmouseover geval van elk menu hyperlink. In het voorbeeld van deze reeks, verandert de functie de achtergrondafbeelding van de hyperlink, en als de hyperlink een submenu, de functie geeft het submenu (lezen van de overeenkomstige matrix toegevoegd aan de multidimensionale array). Elke hyperlink heeft een onmouseout evenement. De vijfde code segment is een functie die reageert op dit evenement. In het voorbeeld van deze reeks, vervangt alleen de nieuwe achtergrondafbeelding van de band met de vorige.
De tabel element heeft een onclick event. De zesde code segment is een functie die reageert op dit evenement. Deze functie verwijdert de toegevoegde rij de submenu's, wanneer de gebruiker in de tabel hebben de menu klikt. Als de gebruiker wil alleen de submenu's te verwijderen zonder het openen van een nieuwe pagina, dan moet hij klikt u in de tabel en niet op een hyperlink. Als hij klikt op een hyperlink, zal de submenu's worden verwijderd en een nieuwe webpagina wordt geopend. We zullen nu kijken naar de details van de JavaScript-code segmenten.
De Eerste JavaScript code Segment Dit is de multidimensionale array. We hebben dit gezien in het vorige deel van de serie. De Tweede JavaScript-code Segment Dit is de tweede JavaScript-code segment: //in het hoofdmenu for (i = 0 te vullen; i {if (navigator.appName == "Microsoft Internet Explorer") {//Internet Explorer als (Larr [ ,,,0],i] [0]) {foundArr = Larr [i] [0] .match (/[^] + /g);} else {foundArr = Larr [i] .match (/[^] + /g) ;}} else {//andere browsers als (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] + "\\; \\; \\; \\; \\; \\; \\, \\ "; } Deze code segment is een for-lus. Er zijn vier iteraties voor de vier menu-items (hyperlinks). De eerste verklaring is een grote if-statement. De als onderdeel van de if-statement is voor Internet Explorer-browser; de ander deel is voor andere browsers. Elk van deze onderdelen, heeft ook een if-statement. Als de voor-lus herhaalt 4 keer per index is de index van het bovenste niveau array.
Als een menu-item heeft een submenu, dan is de bijbehorende matrix index zal een extra (sub) array. De binnenste if-statement controleert eerst of de huidige array-index heeft een (sub) array. Als dat zo is, het maakt gebruik van reguliere expressie om de href waarde en de koppeling inhoud van het eerste element van de toegevoegde (sub) serie te verkrijgen. Als de huidige index een (sub) matrix, dan de andere gedeelte van de binnenste if-statement niet heeft verkrijgt href waarde en koppelingsgegevens van het element van de huidige index.
Of het nu de als-gedeelte of het andere deel dat wordt uitgevoerd, de reguliere expressie-functie (match ()) geeft een eendimensionale matrix, met twee elementen. Voor deze reguliere expressie array, het eerste element is het href waarde en de tweede is de link de inhoud van de ene reeks van de multidimensionale array. De terugkeer serie heeft hier de naam, foundArr. De laatste verklaring van deze tweede code segment, de productie van de hyperlinks en voedt ze in de cel van de eerste rij van de tabel. Deze instructie gebruikt de waarden van de foundArr array. Het geeft elke link die een ID.
De ID van elke link begint met 'l', gevolgd door de index van de bovenste rij, in de multidimensionale array. Deze laatste verklaring geeft ook elke link die een onmouseover en onmouseout evenement. Het argument van de onmouseover evenement is de link ID en de multidimensionale array element identifier, gebouwd. Let op de enkele spatie entiteiten die de banden zouden scheiden. De derde JavaScript-code Segment de derde code segment is: maxRowIndx = 0; Het hoofdmenu gebruikt de eerste rij van de tabel. Toegevoegde submenu betekent toegevoegde rij.
Hierin staat het maximum aantal rijen op een bepaald tijdstip voor de tafel. Geeft het aantal rijen op ieder gegeven moment. De vierde JavaScript-code Segment Dit is de eerste helft van de vierde code-segment: de functie mouseOver (ID, arr) {document.getElementById (ID) .style.backgroundImage = "url ('lImg1.jpg')"; //eerst alle rijen die kunnen worden onder de huidige rij currentIDNo = ID.slice verwijderen
(1); CurrentRow = currentIDNo.length; beginIndx = CurrentRow - 1; //tabel rijnummer waarna de rijen moeten worden verwijderd (m = maxRowIndx; m> = (beginIndx + 1); --M). {document.
getElementById ("T0") deleteRow (m); } MaxRowIndx = beginIndx; //reset maxRowInd IDNO = ID.slice
(1); //het verkrijgen van de nummer een deel van de ID //ontwikkelen volgende lege rij als links zijn beschikbaar als (navigator.appName == "Microsoft Internet Explorer") {//Internet Explorer als (arr [0]) {//creëren rij en lege cel maxRowIndx + = 1; //verhogen niet. rijen TRID = "TR" + maxRowIndx; //creëren rij ID document.getElementById ("T0") insertRow (maxRowIndx).; document.getElementById ("T0") rijen [maxRowIndx] .id = TRID.; document.getElementById (TRID) .style.
backgroundColor = "Turquoise"; spanID = "TD" + maxRowIndx + "0"; //creëren rij ID; document.getElementById (TRID) .insertCell
(0); spanIDStr = ''; document.getElementById (TRID) .cells [0] ⋅innerHTML = spanIDStr; voor (j = 1; j //het href en de inhoud van elke link krijgen in een array als (arr [j] [0]) {seenArr = arr [j] [0] .match (/[^] + /g);} else {seenArr = arr [j] .match (/[^] + /g);} //zet in de celinhoud TDStr = "voor (k = 0; k TDStr = TDStr +" [" + IDNo.
substr (k, 1) + '] ";} TDStr = TDStr +" ["+ j +"] "+") \\ "onmouseout = \\" mouseOut ("l" + IDNO + j + ") \\ ">