Código Explicación para Horizontal Comercial Página Web Menús Comercial Horizontal página Web Menus - Parte 3 Introducción Esta es la parte 3 de mi serie, Comercial Horizontal página Web Menús. En esta parte de la serie, nos fijamos en el código para el ejemplo. La matriz multidimensional descrito en la parte anterior es también parte de la código completo. Me separé de su explicación a esta parte, debido a su naturaleza única. Nota: Para los ejemplos de código para trabajar, debe cambiar el punto justo antes de la palabra reservada, innerHTML, a una parada completa.
Nota: Si no puede ver el código o si cree que falta algo en este artículo (enlace roto, la imagen ausente), simplemente en contacto conmigo en [email protected]. Es decir, en contacto conmigo para el más mínimo problema que tenga acerca de lo que está leyendo. Recipiente para el código Todo el código JavaScript y la tabla HTML que producirá las filas de los menús están en un elemento HTML DIV, el elemento DIV mencionado en la primera parte de la serie. Oye, hay también una hoja de estilo. Esta hoja de estilo es también en el elemento DIV.
En el elemento DIV, usted tiene la hoja de estilo, el elemento de la tabla y luego el JavaScript. La entidad solo espacio mencionamos en la primera parte de la serie se escribe debajo del código de la tabla en el DIV. Tener todo en el DIV, usted puede vender el elemento DIV y todo su contenido. El comprador sólo tendrá que pegar el elemento DIV en su página web, que usted no tiene que saber nada acerca. Y el código le servirá; es decir, tendrá su menú. Sólo recuerde que el cliente es el que debe crear la matriz multidimensional, que es fácil de crear; usted mostrarle cómo.
El usuario es un diseñador de sitios web. El Código de tabla HTML El código de tabla HTML:
Usted da un valor muy alto para el índice z (por ejemplo, 20). El usuario puede tener altos valores de z-índice en su código. El que usted elija aquí debe ser uno que usted piensa que es superior a lo que el usuario pueda tener. Hay una fila con una celda de arriba; esto es para el menú principal. Siempre se muestra esta fila y celda. Cada fila agregado tendrán una célula. Habrá cuatro etiquetas de hipervínculo en una celda, separados por igual número de espacios de caracteres individuales ().
La tabla tiene un evento onclick. Esto se utiliza para eliminar las filas añadidas para el submenú, cuando se hace clic en la tabla. El valor de la etiqueta de título indica al usuario que si él no quiere que las filas añadidas que puede hacer clic dentro de la tabla fuera de cualquier hipervínculo. Segmentos de código JavaScript Hay seis segmentos de código en el código JavaScript. Algunos son de largo; otros son cortos. El primer segmento de código JavaScript es la matriz multidimensional.
El segundo segmento de código crea el menú principal; es decir que crea los hipervínculos (lectura de la matriz de nivel superior nivel) y los caracteres de espacio y les da de comer en la celda de la primera fila de la tabla. El elemento DIV que tiene la JavaScript será siempre en el elemento de cuerpo HTML del usuario. Así, cuando se carga la página, el código JavaScript se ejecuta y el segundo segmento de código se ejecuta como resultado. El tercer segmento de código es sólo una línea.
Es la declaración y la asignación de una variable que hace un seguimiento del número total de filas que se muestran. Cada hipervínculo tiene un evento onmouseover. El cuarto segmento de código es una función que responde al evento onmouseover de cada hipervínculo menú. En el ejemplo de esta serie, la función cambia la imagen de fondo de un hipervínculo, y si el hipervínculo tiene un submenú, la función produce el submenú (lectura de la matriz correspondiente añadido a la matriz multidimensional). Cualquier hiperenlace tiene un evento onmouseout.
El segmento de código quinta es una función que responde a este evento. En el ejemplo de esta serie, sólo se reemplaza la nueva imagen de fondo de la relación con el anterior. El elemento de tabla tiene un evento onclick. El sexto segmento de código es una función que responde a este evento. Esta función elimina la fila cualquier añadido para los submenús, cuando el usuario hace clic en la tabla que tiene los menús. Si el usuario sólo quiere quitar los submenús sin necesidad de abrir una nueva página, se debe hacer clic dentro de la tabla y no en un hipervínculo.
Si hace clic en un hipervínculo, los submenús serán eliminados y una nueva página web se abrirán. Ahora vamos a mirar los detalles de los segmentos de código JavaScript. El Segmento Primer Código JavaScript Esta es la matriz multidimensional. Lo hemos visto en la parte anterior de la serie. El segundo segmento de código JavaScript Este es el segundo segmento de código JavaScript: //rellene el menú principal for (i = 0; i {if (navigator.appName == "Microsoft Internet Explorer") {//Internet Explorer si (LARR [ ,,,0],i] [0]) {foundArr = LARR [i] [0] .
match (/[^,] + /g);} else {foundArr = LARR [i] .match (/[^,] + /g) ;}} else {//si otros navegadores (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 = "" class = "" target = "nofollow + exlnk _ blank" + foundArr [1] + "\\; \\; \\; \\; \\; \\; \\; \\; "; } Este segmento de código es un bucle para. Hay cuatro iteraciones para los cuatro elementos de menú (hipervínculos). La primera afirmación es una gran sentencia if.
El si una parte de la sentencia si es para el navegador Internet Explorer; la parte más es para otros navegadores. Cada una de estas partes, también tiene una sentencia if. Como las iteraciones 4 veces para bucle, cada índice es el índice de la matriz de nivel superior nivel. Si un elemento de menú tiene un submenú, entonces el índice de matriz correspondiente tendrá un (sub) array añadido. Los interiores primeros cheques sentencia if si el índice de matriz actual tiene un (sub) array.
Si lo hace, se utiliza la expresión regular para obtener el valor href y el contenido de enlace desde el primer elemento de la (sub) array añadido. Si el índice actual no tiene un (sub) array, entonces la parte else del interior sentencia if obtiene el valor href y el contenido de enlace desde el elemento del índice actual. Ya se trate de la parte de si o de la parte otra cosa que se ejecuta, la función de la expresión regular (match ()) devuelve una matriz unidimensional, que tiene dos elementos.
Para este conjunto de expresiones regulares, el primer elemento es el valor href y el segundo es el contenido de un enlace de cadena de la matriz multidimensional. La matriz de retorno de aquí tiene el nombre, foundArr. La última declaración de este segundo segmento de código, produce los hipervínculos y les da de comer en la celda de la primera fila de la tabla. Esta declaración utiliza los valores de la matriz foundArr. Da a cada enlace un ID. El ID de cada enlace comienza con 'l' seguido por el índice de la matriz de nivel superior, en la matriz multidimensional.
Esta última afirmación también da a cada enlace un onmouseover y onmouseout evento. El argumento del evento onmouseover es el ID de enlace y el identificador de elemento de matriz multidimensional, construido. Tenga en cuenta las entidades individuales de carácter espacio que separar los vínculos. El Segmento Tercer Código JavaScript El tercer segmento de código es: maxRowIndx = 0; El menú principal utiliza la primera fila de la tabla. Cualquier submenú añadido significa fila agregó. Esta variable contiene el número máximo de filas en un momento determinado para la tabla.
Se indica el número total de filas presentes en cualquier momento particular. El Cuarto Código JavaScript Segmento Esta es la primera mitad del cuarto segmento de código: mouseOver función (ID, arr) {document.getElementById (ID) .style.backgroundImage = "url ('lImg1.jpg')"; //eliminar primero todas las filas que pueden estar por debajo de la fila actual currentIDNo = ID.slice
(1); CurrentRow = currentIDNo.length; beginIndx = CurrentRow - 1; //número de fila de la tabla después de lo cual las filas deben ser removidos para (m = maxRowIndx; m> = (beginIndx + 1); -M). {document.
getElementById ('T0') deleteRow (m); } MaxRowIndx = beginIndx; //restablecer maxRowInd idno = ID.slice
(1); //obtener el número de pieza del ID //desarrollar la próxima fila vacía si los enlaces están disponibles si (navigator.appName == "Microsoft Internet Explorer") {//Internet Explorer si (arr [0]) {//crear fila y celda vacía maxRowIndx + = 1; //incrementar no. de filas TRID = "TR" + maxRowIndx; //crear fila Identificación document.getElementById ('T0') insertRow (maxRowIndx).; document.getElementById ('T0') filas [maxRowIndx] .id = TRID.; document.getElementById (TRID) .style.
backgroundColor = "Turquesa"; spanID = "TD" + maxRowIndx + "0"; //crear fila de identificación; document.getElementById (TRID) .insertCell
(0); spanIDStr = ""; document.getElementById (TRID) .cells [0] = ⋅innerHTML spanIDStr; for (j = 1; j //obtener el href y el contenido de cada enlace en una matriz si (arr [j] [0]) {seenArr = arr [j] [0] .match (/[^,] + /g);} else {seenArr = arr [j] .match (/[^,] + /g);} //poner en el TDStr contenido de la celda = "para (k = 0; k = TDStr TDStr +" [" + IDNo.
substr (k, 1) + "]";} TDStr = TDStr + "[" + j + "]" + ") \\" onmouseout = \\ "mouseOut ('l" + idno + j + "') \\ ">