Explicação Código de Página Menus Menus Página Web Commercial Commercial Horizontal Horizontal Web - Parte 3 Introdução Esta é a parte 3 da minha série, Menus Página Commercial Horizontal Web. Nesta parte da série, vamos olhar o código para o exemplo. A matriz multidimensional descrito na parte anterior também faz parte do código completo. Separei sua explicação desta parte, por causa de sua natureza única. Nota: Para os exemplos de código para o trabalho, você deve mudar o ponto logo antes da palavra reservada, innerHTML, a um ponto final.
Nota: Se você não pode ver o código ou se você acha que alguma coisa está faltando neste artigo (link quebrado, imagem ausente), apenas contacte-me em [email protected]. Ou seja, contacte-me para o menor problema que você tem sobre o que você está lendo. Recipiente para o código Todo o código JavaScript e HTML a tabela que irá produzir as linhas para os menus estão em um elemento HTML DIV, o elemento DIV mencionado na primeira parte da série. Ei, há também uma folha de estilo. Esta folha de estilo também está no elemento DIV.
No elemento DIV, você tem a folha de estilo, o elemento Tabela e, em seguida, o JavaScript. A entidade espaço único mencionado na primeira parte da série é digitado o código abaixo da tabela no DIV. Tendo tudo no DIV, você pode vender o elemento DIV e todo o seu conteúdo. O comprador só tem que colar o elemento DIV em sua página web, que você não precisa saber nada sobre. E o código vai servi-lo; isto é, ele terá seu menu. Basta lembrar que o cliente é o único a criar a matriz multidimensional, que é fácil de criar; você vai mostrar-lhe como. O usuário é um web designer.
O Código Tabela HTML Este é o código da tabela HTML:
Você dá um valor muito alto para o índice z (por exemplo, 20). O usuário pode ter altos valores de z-índice em seu código. O que você escolher aqui deve ser aquele que você acha que é mais elevado do que o que o usuário possa ter. Existe uma linha com uma célula de cima; isto é para o menu principal. Esta linha celular e é sempre apresentado. Cada linha terá adicionado um celular. Haverá quatro tags de hiperlinks em uma célula, separados por igual número de espaços de caracteres individuais (). A tabela tem um evento onclick.
Isto é usado para remover as linhas adicionadas para o sub-menu, quando a tabela é clicado. O valor da tag título indica ao usuário que se ele não quer que as linhas adicionadas ele pode clicar na tabela fora de qualquer hyperlink. Segmentos de código JavaScript Há seis segmentos de código no código JavaScript. Alguns são longos; outros são curtos. O primeiro segmento de código JavaScript é a matriz multidimensional.
O segundo segmento de código cria o menu principal; que é ele cria os hiperlinks (leitura da matriz de mais alto nível) e os caracteres de espaço e alimenta-los para dentro da célula da primeira linha da tabela. O elemento DIV ter o JavaScript estará sempre no elemento BODY HTML do usuário. Assim, quando a página é carregada, o JavaScript é executado e o segundo segmento de código é executado como um resultado. O terceiro segmento de código é apenas uma linha. É a declaração e atribuição de uma variável que controla o número total de linhas exibidas. Cada hyperlink tem um evento onmouseover.
O quarto segmento de código é uma função que responde ao evento onMouseover de cada tipo de ligação de menu. No exemplo desta série, a função altera a imagem da hiperligação fundo, e se a hiperligação tem um sub-menu, produz a função do sub-menu (lendo a partir da matriz correspondente adicionado à matriz multidimensional). Qualquer hyperlink tem um evento onmouseout. O quinto segmento de código é uma função que responde a este evento. No exemplo desta série, apenas substitui a nova imagem da ligação com o anterior plano de fundo. O elemento da tabela tem um evento onclick.
O sexto segmento de código é uma função que responde a este evento. Esta função remove a qualquer linha adicional para os submenus, quando o usuário clica na Tabela de ter os menus. Se o usuário só quer remover os sub-menus sem abrir uma nova página, ele deve clicar na tabela e não sobre uma hiperligação. Se ele clica em um link, os submenus será removida e uma nova página web será aberta. Vamos agora olhar para os detalhes dos segmentos de código JavaScript. O Segmento de primeiro código JavaScript Esta é a matriz multidimensional. Temos visto isso na parte anterior da série.
O Segmento segundo código JavaScript Este é o segundo segmento de código JavaScript: //preencher o menu principal 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 {//outros navegadores se (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 = "" target = "_ blank exlnk" + foundArr [1] + "\\; \\; \\; \\; \\; \\; \\; \\; "; } Este é um segmento de código de loop para. Há quatro iterações para os quatro itens do menu (hiperligações). A primeira afirmação é uma grande declaração if. O se parte da instrução se é para o navegador Internet Explorer; a outra parte é para outros navegadores. Cada uma dessas partes, também tem uma instrução if. Como os itera 4 vezes para-loop, cada índice é para o índice da matriz mais alto nível.
Se um item de menu tem um sub-menu, então o índice de matriz correspondente terá uma (sub) matriz acrescentou. Os interiores primeiro verifica se-declaração se o índice de matriz atual tem uma (sub) array. Se isso acontecer, ele usa expressões regulares para obter o valor href e conteúdo link a partir do primeiro elemento da (sub) matriz acrescentou. Se o índice atual não tem um (sub) matriz, então a parte mais da declaração if interna obtém o valor href e conteúdo link a partir do elemento do índice atual.
Se é a parte-se ou a parte mais que for executado, a função de expressão regular (match ()) retorna uma matriz unidimensional, com dois elementos. Para essa matriz expressão regular, o primeiro elemento é o valor href eo segundo é o conteúdo do link a partir de uma seqüência de caracteres da matriz multidimensional. A matriz de retorno aqui tem o nome, foundArr. A última afirmação deste segundo segmento de código, os hiperlinks produzir e os alimenta para dentro da célula da primeira linha da tabela. Esta instrução usa os valores da matriz foundArr. Ele dá a cada vincular uma ID.
A ID de cada link começa com 'l' seguido pelo índice da matriz mais alto, na matriz multidimensional. Esta última declaração também dá a cada vincular um onmouseover e onmouseout evento. O argumento do evento onmouseover é o ID link e o identificador de elemento de matriz multidimensional, construído. Observe as entidades único caractere de espaço que separam os links. O Segmento terceiro código JavaScript O terceiro segmento de código é: maxRowIndx = 0; O menu principal utiliza a primeira linha da tabela. Qualquer sub-menu adicionado significa acrescentou linha.
Esta variável contém o número máximo de linhas num determinado momento para a tabela. Ele indica o número total de linhas presentes em qualquer momento em particular. O Segmento quarto código JavaScript Esta é a primeira metade do quarto segmento de código: function mouseOver (ID, arr) {document.getElementById (ID) .style.backgroundImage = "url ('lImg1.jpg')"; //primeiro remover todas as linhas que podem estar abaixo da linha atual currentIDNo = ID.slice
(1); currentRow = currentIDNo.
length; beginIndx currentRow = - 1; //número de linha da tabela após a qual as linhas devem ser removidas para (m = maxRowIndx; m> = (beginIndx + 1); --m). {document.getElementById ('T0') deleteRow (m); } MaxRowIndx = beginIndx; //redefinir maxRowInd IDNO = ID.slice
(1); //obter o número da peça do ID //desenvolver a próxima linha vazia se os links estão disponíveis se (navigator.appName == "Microsoft Internet Explorer") {//Internet Explorer if (arr [0]) {//cria linha e célula vazia maxRowIndx + = 1; //incremento no. de linhas TRID = "TR" + maxRowIndx; //cria linha ID document.
getElementById ('T0') insertRow (maxRowIndx.); document.getElementById ('T0') linhas [maxRowIndx] .id = TRID.; document.getElementById (TRID) .style.backgroundColor = "turquesa"; spanID = "TD" + maxRowIndx + "0"; //cria linha ID; document.getElementById (TRID) .insertCell
(0); spanIDStr = ""; document.getElementById (TrID) .cells [0] = ⋅innerHTML spanIDStr; for (j = 1; j //obter a href eo conteúdo de cada link em uma matriz se (arr [j] [0]) {seenArr = arr [j] [0] .match (/[^], + /g);} else {seenArr = arr [j] .
match (/[^,] + /g);} //colocar no TDStr conteúdo da célula = "for (k = 0; k = TDStr TDStr +" [" + IDNo.substr (k, 1) + "]";} TDStr TDStr + = "[" J + + "]" + ") \\" onMouseout = \\ "mouseOut ('l" + IDNO + J + "') \\ ">