Для настройки меню следует изменять файл menucont.js, текст которого приведен ниже (примерный, для удобства строки пронумерованы в формате xx>):
Листинг 1
01> var menu = new MenuBar();
02> dropMenu = new MenuBox("Navigate"); 03> dropMenu.addItem(new MenuItem("KCM Home Page","/",
"Sinisha Mikhaylovich Home Page"));
04> dropMenu2 = new MenuBox("The links of this problem >>"); 05> dropMenu2.addItem(new MenuItem("The CLINP program)",
"javascript:window.open(\"http://klsp.kharkov.ua/kholin/clinp.html\")",
"Clinp Home Page")); 06> dropMenu2.addItem(new MenuItem("The HySS program & ect.",
"javascript:window.open(\"http://www.chim1.unufi.it/group/vacsab/\")",
"HySS program & ect.")); 07> dropMenu2.addItem(new MenuItem("Academic Soft",
"javascript:window.open('http://www.acadsoft.co.uk')",
"Data Base of eq.constant")); 08> dropMenu2.addItem(new MenuItem("Gans Home Page",
'javascript:window.open("http://chem.leads.ac.uk/People/Gans.html")',
"Gans")); 09> dropMenu.addItem(dropMenu2);
10> dropMenu2 = new MenuBox("Chemical RuNet >>"); 11> dropMenu2.addItem(new MenuItem("Enter your link...",
"mailto:sinisha@chat.ru?subject=Enter link",
"Enter link in this SubMenu")); 12> dropMenu.addItem(dropMenu2);
13> menu.addMenu(dropMenu);
14> dropMenu = new MenuBox("Products"); 15> dropMenu.addItem(new MenuItem("Description List","/products/",
"Products Description List")); 16> dropMenu.addItem(new MenuItem("TVRRSU","/products/tvrrsu/",
"Program for calculation of equilibrium mixture")); 17> dropMenu.addItem(new MenuItem("New DALSFEK (Demo version)",
"/products/newdalsfek/",
"Program for solution of reverse task of equilibrium modelling (freeware)")); 18> dropMenu.addItem(new MenuItem("New DALSFEK",
"javascript:DontReady()",
"Program for solution of reverse task of equilibrium modelling")); 19> menu.addMenu(dropMenu);
Файл menucont.js представляет собой код на JavaScript, заполняющий содержанием (ссылками[?]) меню. Этот код определяет обязательный глобальный объект menu, созданный с помощью функции MenuBar() (а также встроенного в JavaScript оператора new), который собственно определяет меню (см. строку 01>).
Чтобы сделать меню законченным, необходимо добававить выпадающие меню (MenuBox); назовем их подменю нулевого уровня. Для этого создается произвольно поименованный объект (в примере это dropMenu), создаваемый функцией MenuBox("Name") (см. строку 02>), где Name – имя выпадающего меню, которое, в частности, будет отображаться на экране.
Для наполнения выпадающего меню конкретным содержанием (ссылками) необходимо заполнить его объектами MenuItem (item), созданными функциями MenuItem( ). Вставляют item в выпадающие меню функцией объекта MenuBox addItem(item). Т.к. объект MenuItem нам не нужен, мы не сохраняем ссылку на него в отдельной переменной, код его создания помещается непосредственно в функцию addItem.
Реклама
ВАКАНСИИ (Компьютеры, Интернет).
Формат конструктора (функции создания) MenuItem таков MenuItem("screen label", "URL", "popup tip"),
где screen label – метка (название) пункта подменю, отображаемая на экране; URL – www-адрес ссылки (link, см. строки 03>, 11>, 15>, 16>, 17>) или код на JavaScript в форме javajcript:function(arg) или jscript:function(arg) (см. строки 05>, 06>, 07>, 08>, 18>, где function(arg) – имя функции с аргументами, определенной в HTML-документе); popup tip – вплывающая подсказка при задержке мыши над эти пунктом меню.
Функцией MenuBox.addItem можно добавлять не только ссылки, но подменю высшего уровня (см. строки 09> и 12>). Для этого необходимо иметь уже готовый объект MenuBox, заполненный описанным выше способом. В примере для этого создается новый объект dropMenu2 (см. строки 04>, 10>) и заполняется обычным способом. Это подменю может содержать другие вложенные подменю.
Подготовленные рассмотренным способом подменю нулевого уровня (dropMenu) вставляются в глобальный объект menu функцией addMenu(submenu) (см. строки 13> и 19>), где submenu – объект подменю (в данном примере это dropMenu). Имена этих подменю и будут видны в полосе меню в верхней части окна.
После внесения в объект menu всех подменю нулевого уровня (функция addMenu) сохраните файл в каталоге скриптов согласно пути в html-документе. Если меню не работает, проверьте правильность расстановки скобок, кавычек, апострофов, запятых и проч. Если код написан правильно, пишите – разберемся.
Замечания.
Т.к. реализация представляемого меню написана на JavaScript с использованием объектной модели браузера[?] MS Interenet Explorer (версии 4.0 и выше), то для браузеров других фирм (в частности Nescape) код меню почти наверняка работать не будет. Для обеспечения доступа к информации сайта пользователей других браузеров можно было включить перед тегом <body> код определения браузера и перенаправления на страницу для данного браузера. Это – отдельная тема, не входящая в тему данной статьи, и рассматриваться здесь не будет.
Для определения пункта выпадающего меню как подменю вышележащего уровня следовало бы использовать некоторый характерный признак. В примере Листинга 1 для этого используется комбинация >> (см. строки 04> и 10>). Пользователь может по своему усмотрению применить удобную ему комбинацию символов.
Следует дать несколько замечаний по поводу кавычек и апострофов. В JavaScript разрешается использовать в качестве определителей строк парные кавычки и апострофы. При необходимости включения кавычек в строку можно комбинировать апострофы с кавычками (например, " ' ' " или ' " " ', см. строки 07>, 08>). При необходимости большей вложенности кавычек или апострофов следует применять символ бэкслэша ( \ ) (например, \", см. строки 05>, 06>).
Три имени индентификатора для тегов <tag id=...> используются для определения тегов для построения меню, а именно: MainMenuBar, submenu и menupunkt. Для избежания конфликтов событий, генерируемых тэгами с этими id, желательно не использовать имена этих индентификаторов для определении других тэгов в HTML-документе.
Не желательно переопределять также следующие стили span.menu, span.menudelim, div.menu, div.submenu, span.active, span.nonact в разделе стилей документа или другом файле стилей (если это не делается совершенно сознательно). [> далее >]
