Code Explication Horizontal Commercial Web Page Les menus Commercial Horizontal Web Page Les menus - Partie 3 Introduction Cela fait partie de ma série 3, Commercial Horizontal Web Page Les menus. Dans cette partie de la série, nous regardons le code pour l'exemple. Le tableau multidimensionnel décrit dans la partie précédente est également partie du code complet. Je me suis séparé de son explication de cette partie, en raison de son caractère unique.
Remarque: Pour les échantillons de code fonctionne, vous devriez changer le point juste avant le mot réservé, innerHTML, à un arrêt complet. Remarque: Si vous ne pouvez pas voir le code ou si vous pensez que quelque chose manquait dans cet article (lien brisé, l'image absente), contactez-moi au [email protected]. Qui est, me contacter pour le moindre problème que vous avez à propos de ce que vous lisez.
Conteneurs Code Tout le code JavaScript et le tableau HTML qui va produire les lignes pour les menus sont dans un élément HTML DIV, l'élément DIV mentionné dans la première partie de la série. Hey, il ya aussi une feuille de style. Cette feuille de style est aussi dans l'élément DIV. Dans l'élément DIV, vous avez la feuille de style, l'élément de la table, puis le JavaScript. L'entité de l'espace unique nous l'avons mentionné dans la première partie de la série est tapé ci-dessous le code de la table dans la DIV. Ayant tout dans la DIV, vous pouvez vendre l'élément DIV et tout son contenu.
L'acheteur aura juste à coller l'élément DIV dans sa page web, que vous ne devez pas rien savoir. Et le code lui servira; qui est, il aura son menu. Rappelez-vous que le client est le seul à créer le tableau multidimensionnel, qui est facile à créer; vous lui montrer comment. L'utilisateur est un concepteur de site Web. Le code HTML Tableau Ceci est le code de tableau HTML:
Vous donnez une valeur très élevée pour le z-index (par exemple 20). L'utilisateur peut avoir des valeurs élevées de z-index dans son code.
Celui que vous choisissez ici doit être celui que vous pensez est plus élevé que ce que l'utilisateur pourrait avoir. Il ya une ligne avec une cellule ci-dessus; ceci est pour le menu principal. Cette rangée et la cellule est toujours affiché. Chaque ligne ajoutée aura une cellule. Il y aura quatre balises de lien hypertexte dans une cellule, séparés par le même nombre de places de caractères simples (). Le tableau a un événement onclick. Il est utilisé pour enlever les lignes ajoutées pour le sous-menu, lorsque la table est cliqué.
La valeur de la balise de titre indique à l'utilisateur que si il ne veut pas les lignes ajoutées il peut cliquer dans le tableau en dehors de tout lien hypertexte. Segments code JavaScript Il ya six segments de code dans le code JavaScript. Certains sont de longueur; d'autres sont courts. Le premier segment de code JavaScript est le tableau multidimensionnel. Le deuxième segment de code crée le menu principal; qui est elle crée les hyperliens (lecture à partir du tableau de plus haut niveau) et les caractères d'espace et les nourrit dans la cellule de la première ligne de la table.
L'élément DIV ayant le JavaScript sera toujours dans l'élément BODY HTML de l'utilisateur. Ainsi, lorsque la page est chargée, le code JavaScript est exécuté et le deuxième segment de code est exécuté comme un résultat. Le troisième segment de code est juste une ligne. Il est de la déclaration et de la cession d'une variable qui permet de suivre le nombre total de lignes affichées. Chaque lien hypertexte a un événement onmouseover. Le quatrième segment de code est une fonction qui répond à l'événement onmouseover de chaque lien hypertexte de menu.
Dans l'exemple de cette série, la fonction change l'image de fond de l'hyperlien, et si le lien hypertexte a un sous-menu, la fonction produit le sous-menu (lecture du tableau correspondant ajouté à la tableau multidimensionnel). Tout lien hypertexte a un événement onmouseout. Le cinquième segment de code est une fonction qui répond à cet événement. Dans l'exemple de cette série, on ne remplace que la nouvelle image d'arrière-plan de la liaison avec la précédente. L'élément de table a un événement onclick. Le sixième segment de code est une fonction qui répond à cet événement.
Cette fonction supprime la toute ligne supplémentaire pour les sous-menus, lorsque l'utilisateur clique dans le tableau présentant les menus. Si l'utilisateur ne veut supprimer les sous-menus sans avoir à ouvrir une nouvelle page, il doit cliquer dans la table et non sur un lien hypertexte. Si il clique sur un lien hypertexte, les sous-menus seront supprimés et une nouvelle page Web seront ouverts. Nous allons maintenant regarder les détails des segments de code JavaScript. Le premier segment de code JavaScript Ceci est le tableau multidimensionnel.
Nous l'avons vu dans la partie précédente de la série. Le deuxième segment de code JavaScript Ceci est le deuxième segment de code JavaScript: //remplir dans le menu 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 {//autres navigateurs si (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] + "\\; \\; \\; \\; \\; \\; \\; \\; "; } Ce segment de code est une boucle pour. Il ya quatre itérations pour les quatre éléments de menu (hyperliens). La première déclaration est un grand if. La partie si de l'if est pour le navigateur Internet Explorer; la partie reste est pour les autres navigateurs. Chacune de ces parties, a également un if. Comme les itère 4 fois pour en boucle, chaque indice est pour l'indice de la matrice de plus haut niveau.
Si un élément de menu a un sous-menu, puis l'indice de tableau correspondant aura un (sous-) réseau ajouté. Les intérieurs if vérifie d'abord si l'index de tableau actuelle a un (sous-) réseau. Si elle le fait, il utilise l'expression régulière pour obtenir la valeur de href et le contenu de lien à partir du premier élément de la (sous-) réseau ajouté. Si l'indice actuel ne dispose pas d'un (sous-) réseau, puis la partie d'autre de l'instruction if intérieure obtient la valeur href et le contenu de la liaison de l'élément de l'indice actuel.
Que ce soit le la fonction d'expression régulière si-partie ou de la partie else qui est exécuté, (match ()) renvoie un tableau à une dimension, ayant deux éléments. Pour ce tableau d'expression régulière, le premier élément est la valeur href et la seconde est la teneur en lien d'une chaîne du tableau multidimensionnel. Le tableau de retour ici a le nom, foundArr. La dernière déclaration de ce deuxième segment de code, produire les hyperliens et les nourrit dans la cellule de la première ligne de la table. Cette instruction utilise les valeurs du tableau foundArr. Il donne chaque lien un ID.
L'ID de chaque lien commence par 'L' suivie par l'indice de la matrice de plus haut niveau, dans le tableau multidimensionnel. Cette dernière déclaration donne également chaque lien un onmouseover et onmouseout événement. L'argument de l'événement onmouseover est l'ID du lien et le caractère multidimensionnel identifiant d'élément de tableau, construit. Notez les entités de caractères espace unique qui séparerait les liens. Le troisième segment de code JavaScript Le troisième segment de code est: maxRowIndx = 0; Le menu principal utilise la première ligne de la table.
Tous les moyens de sous-menu ajouté ligne ajoutée. Cette variable contient le nombre maximal de lignes à un moment donné de la table. Il indique le nombre total de lignes présentes à un moment donné. Le quatrième segment de code JavaScript Ceci est la première moitié du quatrième segment de code: function mouseOver (ID, arr) {document.getElementById (ID) .style.backgroundImage = "url ('lImg1.jpg')"; //d'abord supprimer toutes les lignes qui peuvent être en dessous de la ligne actuelle currentIDNo = ID.slice
(1); currentRow = currentIDNo.
length; beginIndx = currentRow - 1; //nombre ligne du tableau après les lignes qui doivent être enlevés pour (m = maxRowIndx; m> = (beginIndx + 1); --m). {document.getElementById ('T0') deleteRow (m); } = MaxRowIndx beginIndx; //réinitialiser maxRowInd IDNo = ID.slice
(1); //obtenir le numéro de pièce de l'ID //développement de la prochaine ligne vide si des liens sont disponibles si (navigator.appName == "Microsoft Internet Explorer") {//Internet Explorer si (arr [0]) {//créer rangée et cellule vide maxRowIndx + = 1; //incrémenter pas.
de lignes TRID = "tr" + maxRowIndx; //créer rangée ID document.getElementById ('T0') insertRow (maxRowIndx).; document.getElementById ('T0') rangées [maxRowIndx] = .id TRID. document.getElementById (TRID) .style.backgroundColor = "Turquoise"; spanID = "TD" + + maxRowIndx "0"; //créer rangée ID; document.getElementById (TRID) .insertCell
(0); spanIDStr = ""; document.getElementById (TRID) .cells [0] = ⋅innerHTML spanIDStr; pour (j = 1; j //obtenir le href et le contenu de chaque lien dans un tableau si (arr [j] [0]) {seenArr = arr [j] [0] .match (/[^,] + /g);} else {seenArr = arr [j] .
match (/[^,] + /g);} //mettre dans le contenu de la cellule TDStr = "pour (k = 0; k = TDStr TDStr +" [" IDNo.substr + (k, 1) + "]";} TDStr = TDStr + "[" + j + "]" + ") \\" onmouseout = \\ "mouseOut ('l" + IDNo + j + "') \\ ">