|
|||||||||
Автор: Руслан Кашапов
Глава 1 Разберем использование глобальной переменной Java Script в фреймсодержащих документах на примере простой задачи - сайт с картинками. Пример 1 Имеем два фрейма. В первом - превью картинок (thumbnails), во втором ожидается собственно сама картинка большого размера. Картинок много (возьмем 20), они часто обновляются и/или изменяются. Одновременно показывается определенное количество превью (5 штук), причем существуют ссылки на следующую/предыдущую группу. Все картинки и превью хранятся в подкаталоге Images и названы соответственно pic1.gif...pic50.gif и pic1_Thumb.gif...pic50_Thumb.gif. Фреймсет-файл выглядит банально, за исключением Java Script строк инициализации переменной.
Файл с превью автоматически генерирует тело html документа на основе информации, которая передана ему в глобальных переменных, определенных выше. Но сначала определим основные функции. GotoNext () и GotoPrev () выполняют переход на соответственно следующую и предыдущую группы превью.
Теперь собственно сгенерируем тело документа:
Как это работает? Рассказываем подробности. Переменные n1 и n2 определяют номера соответственно первой и последней картинок в данной группе превью. В зависимости от их значений в тело документа вписываются ссылки на предыдущую и последующие группы. Причем переключение между этими группами осуществляется путем банальной перезагрузки фрейма тем же самым документом, но картинки будут уже совсем другими, потому что изменилось значение глобальной переменной ThumbsStart. Затем в цикле мы по очереди вставляем в документ превью картинок обрамленные ссылкой на файл Pic.html (target="Pic"). Не удивляйтесь, что все картинки ссылаются на один и тот же документ. Когда пользователь щелкает на превью, по onClick активизируется функция SetPicNum (n), изменяющая глобальную переменную PicNum. Фрейм с большой картинкой тупо перегружается и показывает нам картинку, номер которой содержится в упомянутой переменной:
Если фреймсет загрузился в первый раз значение переменной PicNum = 0, программа выведет пояснительный текст. Работу системы можно посмотреть здесь (открывается в новом окне броузера). Скачать архив с данным примером для анатомического вскрытия и изучения можно здесь (zip 30.7 K). Преимущество данного способа заключается в простоте реализации. Всего три (!) файла. Причем, если Вы решите добавить новые картинки, независимо от их количества (хоть несколько тысяч!) обновление документов сведется к изменению всего одной строки во фреймсет-файле (значение MaxNum). Недостатки у этого способа тоже есть (их не может не быть). Во-первых, перегружая окно броузера (по Reload или Refresh), пользователь увидит начальную страничку, ибо все переменные возвратятся к своим начальным значениям. Во-вторых, ссылки вокруг всех превью (цвет бордюра) будут показаны как уже посещенные, потому что параметр href во всех ссылках одинаков (указывает на один файл), что может сбить с толку посетителя сайта, особенно, если превью недостаточно разборчивы. Пример 2 Здесь мы рассмотрим более актуальный случай - динамически раскрывающиеся меню. Пусть у нас есть три пункта меню, в каждом из которых есть свои подменю (по две штуки). Назовем их незатейливо (в жизни все гораздо интересней) - Menu1 ... Menu3, SubMenu1_1, SubMenu1_2 ... SubMenu3_2 Открытости/закрытости пункта меню поставим в соответствие элемент массива булевых переменных. Значение true (1) соответствует открытому пункту меню, false (0) - закрытому. Инициализируется массив во фреймсете: MMenu = new Array(false, false, false); Файл меню выглядит следующим образом:
По-моему текст скрипта настолько туп, прямолинеен и очевиден, что в пояснениях не нуждается. Автоматизировать генерацию html документа не имеет смысла (субъективное мнение) по причине того, что все пункты меню и подменю имеют разные (в жизни) ссылки. Хотя, в принципе, можно было бы сделать код несколько менее громоздким и более универсальным, задав пункты меню и подменю, ссылки в соответствующих массивах данных внутри фреймсет-документа или даже внутри самого файла Menu.html. Рабочую версию примера можно посмотреть здесь (открывается в новом окне), скачать здесь (zip 1.75 K). Данные примеры, наверное, не является лучшими решениями поставленных задач. Однако способы использования глобальных переменных (заметим, работающих только в фреймах) однозначно заслуживают того, чтобы на них обратили внимание. Автор: Руслан Кашапов
|
|||||||||
![]() |
![]() |