Kod Förklaring för kommersiell Horisontell webbsida Menyer Commercial Horisontell webbsida Menyer - Del 3 Introduktion Detta är del 3 i min serie, Offentliga Horisontell webbsida menyer. I denna del av serien, tittar vi på koden för exemplet. Den flerdimensionell array beskrivs i den tidigare delen är också en del av hela koden. Jag separerade sin förklaring från denna del, på grund av sin unika natur. Obs! För de kodexempel att arbeta, bör du ändra punkten strax innan det reserverade ordet, innerhtml, ett fullständigt stopp.
Obs: Om du inte kan se koden, eller om du tror att något saknas i den här artikeln (bruten länk, bild frånvarande), bara att kontakta mig på [email protected]. Det vill säga, kontakta mig för minsta problem du har om vad du läser. Behållare för kod Alla JavaScript-kod och HTML-tabellen som kommer att ge raderna för menyerna är i en HTML DIV element DIV elementet som nämns i del ett av serien. Hej, finns det också en formatmall. Denna formatmall är också i DIV elementet. I DIV elementet, har du formatmallen, tabellelementet och sedan JavaScript.
Den enda utrymme enhet vi nämnde i den första delen av serien skrivs under tabellen koden i DIV. Med allt i DIV, kan du sälja DIV elementet och allt dess innehåll. Köparen kommer bara att klistra in DIV inslag i hans webbsida som du inte behöver veta något om. Och koden kommer att tjäna honom; det vill säga, kommer han att ha sin meny. Kom bara ihåg att kunden är en att skapa flerdimensionell array, som är lätt att skapa; du kommer att visa honom hur. Användaren är en webbdesignern. HTML Table Code Detta är HTML Tabell kod:
Du ger ett mycket högt värde för z-index (t ex 20).
Användaren kan ha en hög z-indexvärden i sin kod. Den du väljer här bör vara en som du tycker är högre än vad användaren kan ha. Det finns en rad med en cell ovan; detta är för huvudmenyn. Denna rad och cell visas alltid. Varje rad tillsätts kommer att ha en cell. Det kommer att finnas fyra hyperlänk taggar i en cell, åtskilda av lika många enskilda teckenutrymmen (). Tabellen har en onclick händelse. Detta används för att avlägsna de tillsatta raderna för undermenyn, när bordet klickas.
Värdet av rubriktaggen indikerar för användaren att om han inte vill de tillsatta raderna han kan klicka i tabellen utanför någon hyperlänk. JavaScript kodsegmenten Det finns sex kodsegmenten i JavaScript-kod. Vissa är lång; andra är korta. Den första JavaScript-kod segment är flerdimensionell array. Den andra kodsegment skapar huvudmenyn; det är det skapar hyperlänkar (läsning från den översta nivån array) och blanksteg och matar in dem i cellen i den första raden i tabellen. Div-elementet som har den JavaScript kommer alltid att vara i HTML BODY elementet av användaren.
Så, när sidan är laddad, är JavaScript exekveras och andra kodsegmentet exekveras som följd. Det tredje kodsegment är bara en rad. Det är förklaringen och tilldelning av en variabel som spårar det totala antalet rader som visas. Varje hyperlänk har en onMouseOver händelse. Den fjärde kodsegment är en funktion som svarar på onMouseOver händelse av varje meny hyperlänk. I exemplet i den här serien, ändrar funktionen bakgrundsbild av hyperlänken, och om hyperlänken har en undermeny, producerar funktionen undermeny (läsning från motsvarande grupp läggs till flerdimensionell array).
Varje hyperlänk har en onmouseout händelse. Den femte kodsegment är en funktion som svarar på denna händelse. I exemplet i den här serien, endast ersätter den nya bakgrundsbilden av kopplingen till den tidigare. Tabellen element har en onclick händelse. Den sjätte kodsegment är en funktion som svarar på denna händelse. Den här funktionen tar bort alla tillagda raden för undermenyerna, när användaren klickar i tabellen med menyerna. Om användaren vill bara ta bort undermenyerna utan att öppna en ny sida, bör han klickar i tabellen och inte på en hyperlänk.
Om han klickar på en hyperlänk, kommer undermenyer tas bort och en ny webbsida öppnas. Vi ska nu titta på detaljerna i JavaScript kodsegmenten. Första JavaScript-kod Segment Det här är flerdimensionell array. Vi har sett denna i den tidigare delen av serien. Andra JavaScript-kod Segment Det här är den andra JavaScript-kod segment: //fylla i huvudmenyn 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 {//andra webbläsare 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] + "\\; \\, \\, \\, \\, \\, \\, \\, "; } Denna kod segment är en for-loop. Det finns fyra iterationer för de fyra menyalternativ (hyperlänkar). Det första påståendet är en stor om-uttalande.
Den om en del av if-satsen är för Internet Explorer; else delen är för andra webbläsare. Var och en av dessa delar har också en if-sats. Som för-slinga upprepar 4 gånger, varje index för index för den översta nivån array. Om ett menyalternativ har en undermeny, då motsvarande array index kommer att ha en extra (sub) matris. De inre IF-satsen kontrollerar först om den aktuella uppsättningen index har en (sub) matris. Om den gör det, använder den reguljärt uttryck för att erhålla href värdet och länka innehåll från den första delen av den extra (sub) matris.
Om det aktuella indexet inte har en (sub) array, då annars en del av den inre if-uttalande erhåller href värde och länkinnehåll från elementet av det aktuella indexet. Oavsett om det är om delar eller annan del som utförs, det reguljära uttrycket funktionen (match ()) returnerar en endimensionell array, som har två delar. För detta reguljära uttryck array, är det första elementet href värde och den andra är länken innehåll från en sträng av flerdimensionell array. Retur array här har namnet, foundArr.
Den sista uttalandet av detta andra kodsegment, producera hyperlänkarna och matar dem in i cellen av den första raden i tabellen. Detta uttalande använder värdena för foundArr arrayen. Det ger varje länk ett ID. ID för varje länk börjar med "l" följt av index för den översta array, i flerdimensionell array. Detta sista uttalande ger också varje länk en onMouseOver och onmouseout händelse. Argumentet av onMouseOver händelse är länken ID och flerdimensionell array elementet identifierare, konstrueras. Notera de enskilda mellanslag enheter som skulle separera länkar.
Tredje JavaScript-kod Segment den tredje kodsegmentet är: maxRowIndx = 0; Huvudmenyn använder den första raden i tabellen. Något tillsatt undermeny organ lagt rad. Denna variabel innehåller det maximala antalet rader vid en viss tidpunkt för tabellen. Den indikerar det totala antalet rader närvarande vid en viss tidpunkt. Fjärde JavaScript-kod Segment Det här är den första halvan av det fjärde kodsegmentet: function mouseover (ID, arr) {document.getElementById (ID) .style.backgroundImage = "url (" lImg1.
jpg ') "; //först ta bort alla rader som kan ligga under den aktuella raden currentIDNo = ID.slice
(1); currentRow = currentIDNo.length; beginIndx = currentRow - 1; //tabellrad nummer, varefter rader måste tas bort för (m = maxRowIndx; m> = (beginIndx + 1), --m). {document.getElementById (T0) deleteRow (m); } MaxRowIndx = beginIndx; //återställ maxRowInd IDNo = ID.slice
(1); //få numret del av ID //utveckla nästa tomma rad om länkar finns if (navigator.appName == "Microsoft Internet Explorer") {//Internet Explorer if (arr [0]) {//skapa rad och tom cell maxRowIndx + = 1; //inkrementera nr.
rader TRID = "TR" + maxRowIndx; //skapa rad ID document.getElementById (T0) insertRow (maxRowIndx). document.getElementById ('T0') rader [maxRowIndx] .id = TRID.; document.getElementById (TRID) .style.backgroundColor = "Turquoise"; spanID = "TD" + maxRowIndx + "0"; //skapa rad ID; document.getElementById (TRID) .insertCell
(0); spanIDStr = ""; document.getElementById (Trid) .cells [0] ⋅innerHTML = spanIDStr; för (j = 1, j //hämta href och innehållet i varje länk i en array om (arr [j] [0]) {seenArr = arr [j] [0] .match (/[^,] ^ /g);} else {seenArr = arr [j] .
match (/[^,] + /g);} //sätta i cellinnehållet TDStr = "för (k = 0; k TDStr = TDStr +" [" + IDNo.substr (k, 1) + "]";} TDStr = TDStr + "[" + j + "]" + ") \\" onmouseout = \\ "mouseOut ('l" + IDNo + j + "') \\ ">