Главная Интернет WEB-учебник JavaScript


Интернет клуб

Новая страница
Описание html
Javascript

Что такое JavaScript
Обьект "Document"
Обработка событий
Обработка событий (Продолжение)
Обработка даты
Определение браузера
Операции с мышкой
Создание новых окон
Бегущая строка
Переход по выбору

Java в примерах
Полезные сайты
Задайте вопрос









Web-учебник. Раздел 3. Javascript.



Переход по выбору

Существует много способов создания меню в WEB-странице. Один из них Вы видите слева. Этот способ достаточно удобен, но предполагает работу с фреймами (окнами), что несет в себе ряд недостатков.
Другой способ Вы видите снизу. Здесь используется JavaScript. Попробуйте выбрать раздел и нажмите на кнопку "Поехали". Вернитесь с помощью кнопки браузера "BACK".


Для создания такого переключателя следует в HTML файле записать функцию на языке Javascript и форму с меню SELECT.
У меня форма выглядит следующим образом:
<FORM name="f0">
<select name="selObj1">
<option>КУДА ИЗВОЛИТЕ ПЕРЕЕХАТЬ?
<option>ЧТО ТАКОЕ JAVASCRIPT
<option>ОБЪЕКТ "ДОКУМЕНТ"
<option>ОБРАБОТКА СОБЫТИЙ
<option>ОБРАБОТКА СОБЫТИЙ (ПРОДОЛЖЕНИЕ)
<option>ОБРАБОТКА ДАТЫ
<option>ОПРЕДЕЛЕНИЕ WEB-БРАУЗЕРА
<option>ОПЕРАЦИИ С МЫШКОЙ
<option>СОЗДАНИЕ НОВЫХ ОКОН
<option>БЕГУЩАЯ СТРОКА
<option>ПЕРЕХОД ПО ВЫБОРУ
</select>
<a href="#" onclick="choseUrl()">
<img src="img/car1.gif" border=0></a> </form>
Эта форма помещается в основную часть HTML файла, между командами BODY и /BODY Кнопку ввода можно было поставить стандартную, но я здесь предпочел более красивый вариант - в качестве кнопки использован файл car1.gif Если есть вопросы по поводу данной формы - читайте в этом же сайте в разделе "Описание HTML" раздел "Формы".
При нажатии кнопки мы вызываем функцию JavaScript choseUrl.
Эта функция помещается в заглавии HTML файла:
<script language="JavaScript">
function choseUrl() {
var selIx = document.f0.selObj1.selectedIndex;
if (selIx == 1) location.href='web31.html'
if (selIx == 2) location.href='web32.html'
if (selIx == 3) location.href='web33.html'
if (selIx == 4) location.href='web34.html'
if (selIx == 5) location.href='web35.html'
if (selIx == 6) location.href='web36.html'
if (selIx == 7) location.href='web37.html'
if (selIx == 8) location.href='web38.html'
if (selIx == 9) location.href='web39.html'
if (selIx == 10) location.href='web3a.html'
}
</script>
Здесь переменная document.f0.selObj1.selectedIndex служит для извлечения из обьекта f0 номера выбранной строки. В зависимости от номера строки формируется адрес для немедленного перехода.









  ©1996-2007   Megapolis Org   E-mail:   info@megapolis.org