Примечание: Если вы не видите код или, если вы думаете, что-либо в этой статье (неработающую ссылку, изображение отсутствует) отсутствует, просто свяжитесь со мной в [email protected]. То есть, свяжитесь со мной для малейшей проблемы у вас есть о том, что вы читаете. Контейнер для кода Весь код JavaScript в HTML и таблицы, которые будут производить строк для меню в одном элементе HTML DIV, то DIV элемент упоминается в первой части серии. Эй, есть также таблица стилей. Эта таблица стилей также в DIV элемента. В элементе DIV, у вас есть лист стилей, таблица элемента и затем JavaScript.
Сингл пространство лицо мы уже упоминали в первой части серии набирается под кодом таблице в DIV. Имея все в DIV, вы можете продать элемент DIV и все ее содержимое. Покупатель будет просто вставить элемент DIV в его веб-странице, которую вы не должны ничего знать о. И код будет служить ему; то есть, он будет иметь свой меню. Просто помните, что клиент один, чтобы создать многомерный массив, который легко создать; Вы показать ему, как. Пользователь веб-сайт дизайнера. HTML-код Таблица Это код HTML Таблица:
Вы даете очень высокое значение для Z-индекса (например, 20).
Пользователь может иметь высокие значения Z-индекс в своем коде. Тот, который вы здесь выберите должна быть одна, что вы думаете, это выше, чем то, что пользователь может иметь. Существует одна строка с одной ячейкой выше; это для главного меню. Эта строка и ячейка всегда отображается. Каждая строка добавляется придется одну ячейку. Там будет четыре гиперссылка теги в одной ячейке, разделенные равным количеством символов пробелами (). Таблица имеет OnClick событие. Это используется, чтобы удалить добавленные строки для подменю, когда таблица будет нажата.
Значение тега заголовка указывает пользователю, что если он не хочет, добавлены строки, он может нажать в таблице вне любой гиперссылки. JavaScript сегменты кода Есть шесть фрагментов кода в код JavaScript. Некоторые длинные; другие короткие. Первый сегмент кода JavaScript является многомерный массив. Второй сегмент кода создает главное меню; что это создает гиперссылки (чтение из самого верхнего уровня массива) и пробелы и передает их в ячейке первой строки таблицы. Элемент DIV имея JavaScript всегда будет в HTML-BODY элемент пользователя.
Таким образом, когда страница загружена, JavaScript выполняется, и второй сегмент кода выполняется в результате. Третий сегмент кода просто одна строка. Это заявление и присвоение переменной, которая отслеживает общее количество отображаемых строк. Каждый имеет гиперссылка событие OnMouseOver. Четвертый сегмент кода это функция, которая реагирует на события OnMouseOver каждого гиперссылки меню. В примере этой серии, функция меняет фоновое изображение гиперссылки, и если гиперссылка имеет подменю, функция производит подменю (чтение из соответствующего массива добавлен в многомерный массив).
Любая гиперссылка имеет onmouseout событие. Пятый сегмент кода является функцией, которая реагирует на это событие. В примере этой серии, он только заменяет новый фоновое изображение связи с предыдущим. Элемент таблицы имеет OnClick событие. Шестой сегмент кода это функция, которая реагирует на это событие. Эта функция удаляет любые добавленную строку для подменю, когда пользователь нажимает в таблице, имеющей меню. Если пользователь хочет только, чтобы удалить подменю без открытия новой страницы, он должен нажать в таблице, а не на гиперссылку.
Если он щелкает по гиперссылке, то подменю будут удалены, а новая веб-страница будет открыта. Теперь мы будем смотреть на детали сегментов JavaScript кода. Первый JavaScript сегмента кода Это многомерный массив. Мы видели это в предыдущей части серии. Вторая JavaScript сегмента кода Это второй сегмент кода JavaScript: //заполнить в главном меню (я = 0; я {если (== navigator.appName "Microsoft Internet Explorer") {//Internet Explorer, если (LARR [ ,,,0],я] [0]) {foundArr = LARR [я] [0] .match (/[^,] + /г);} еще {foundArr = LARR [я] .
match (/[^,] + /г) ;}} еще {//другие браузеры, если (LARR [я] [0] .length> 1) {foundArr = LARR [я] [0] .match (/[^,] + /г);} еще {foundArr = LARR [я] .match (/[^,] + /г); }} Document.getElementById ('TD00') ⋅innerHTML = document.getElementById ('TD00') ⋅innerHTML + "" отн = "NOFOLLOW" класс = "exlnk" целевых = "_blank" + foundArr [1] + "\\; \\; \\; \\; \\; \\; \\; \\; "; } Этот фрагмент кода является для контура. Есть четыре итерации для четырех пунктов меню (гиперссылки). Первое утверждение является большим, если-заявление.
Условный часть, если-заявление для Internet Explorer браузером; части иначе для других браузеров. Каждая из этих частей, а также имеет IF-заявление. Как для цикла итераций в 4 раза, каждый индекс для индекса самого верхнего уровня массива. Если пункт меню имеет подменю, то соответствующий индекс массива будет иметь дополнительный (суб) массив. Внутренние если-заявлении сначала проверяет текущий индекс массива имеет (суб) массив. Если это так, то он использует регулярное выражение для получения значения Href и содержание ссылок от первого элемента добавленной (суб) массива.
Если текущий индекс не имеет (суб) массив, затем еще часть внутренней IF-заявление получает HREF значение и содержание ссылок от элемента текущего индекса. Будь то если-часть или часть еще, что выполняется, функция регулярное выражение (матч ()) возвращает один двумерный массив, имеющий два элемента. Для этого регулярного выражения массива, первый элемент является HREF значение, а второй содержание ссылка с одной строки многомерного массива. Возвращение массива здесь имеет имя, foundArr.
Последнее утверждение этого второго сегмента кода, производят гиперссылки и передает их в ячейке первой строки таблицы. Это заявление использует значения массива foundArr. Это дает каждому связать идентификатор. Идентификатор каждого звена начинается с 'L' с последующим индекса самого верхнего массива, в многомерном массиве. Это последнее утверждение также дает каждому связать OnMouseOver и onmouseout событие. Аргумент случае OnMouseOver ссылка ID и многомерный массив идентификатор элемента, построен. Обратите внимание на одинарные лиц пространство символов, которые разделяют ссылки.
Третий JavaScript сегмента кода Третий сегмент код: maxRowIndx = 0; Главное меню использует первую строку таблицы. Любая добавил подменю означает добавил строку. Эта переменная содержит максимальное число строк в определенное время для таблицы. Это указывает на общее количество строк, присутствующих в любой конкретный момент времени. Четвертый JavaScript сегмента кода Это первая половина четвертого сегмента кода: функция наведении курсора мыши (ID, обр) {document.getElementById (ID) .style.backgroundImage = "гиперссылка ('lImg1.
jpg')"; //сначала удалить все строки, которые могут быть ниже текущей строки currentIDNo = ID.slice
(1); currentRow = currentIDNo.length; beginIndx = currentRow - 1; //строка таблицы число строк, после чего должны быть удалены в течение (м = maxRowIndx; т> = (beginIndx + 1); --m). {document.getElementById ('Т0') deleteRow (м); } MaxRowIndx = beginIndx; //сбросить maxRowInd IDNo = ID.slice
(1); //получим число часть ID //разработать следующую пустую строку, если ссылки доступны, если (== navigator.
appName "Microsoft Internet Explorer") {//Internet Explorer, если (обр [0]) {//создать строку и пустая ячейка maxRowIndx + = 1; //увеличиваем нет. строк TRID = "TR" + maxRowIndx; //создать строку ID document.getElementById ('Т0 ") insertRow (maxRowIndx). document.getElementById ('Т0 ") строк [maxRowIndx] .id = TRID. document.getElementById (TRID) .style.backgroundColor = "Бирюза"; spanID = "ТД" + maxRowIndx + "0"; //создать строку ID; document.getElementById (TRID) .insertCell
(0); spanIDStr = ""; document.getElementById (TRID) .
cells [0] = ⋅innerHTML spanIDStr; для (J = 1, J //получить HREF и содержание каждого звена в массиве, если (обр [у] [0]) {seenArr = обр [у] [0] .match (/[^,] + /г);} еще {seenArr = обр [у] .match (/[^,] + /г);} //помещаем в TDStr содержимому ячейки = "для (= 0; K = TDStr TDStr +" [" + IDNo.substr (к, 1) + "]";} TDStr = TDStr + "[" + J + "]" + ") \\" onmouseout = \\ "MouseOut (" L "+ IDNo + J +") \\ ">