|
|||||||||
Автор: Руслан Кашапов
Глава 3 В этой главе мы рассмотрим методы избавления от прокруток, используемые в основном для фрейма с навигационными элементами, так как именно этот фрейм более всего страдает от появления скроллинга, особенно, если использовать длинные списки. Итак... Как избавиться от прокруток, знает, наверное, каждый школьник. Но на всякий случай напомню. Во фреймсет файле при определении конкретного фрейма прописываются следующие строки: scrolling="NO" Но позвольте! - воскликнет Уважаемый посетитель, - а как мы увидим все содержимое фрейма, если прокрутить его не имеем возможности? Однако, как Вы увидите позже, существуют способы крутить фрейм, не пользуясь при этом полосой прокрутки. Первый способ заключается в использовании меток (anchors) внутри документа. Рассмотрим его на следующем примере. Пример 5 Пусть у нас имеется фрейм содержащий список из 20 ссылок. В начало каждой строки поставим метку, название которой соответствует номеру ссылки ("1" ... "20"). Скроллинг внутри фрейма будет осуществляться банальной ссылкой на соответствующую позицию в документе, причем содержимое фрейма будет сдвигаться таким образом, чтобы строка с текущей меткой оказалась первой в видимой части фрейма. Во фреймсете определим глобальную переменную CurAnchor, которая будет хранить текущий номер строки (он же = имя метки). Отдельным фреймом оформляем элементы, призванные выполнять функции скроллирования.
Кликая на большой стрелочке, мы смещаем содержимое фрейма на самую первую/последнюю позицию списка. Маленькая стрелочка будет сдвигать список вверх/вниз на одну позицию (хотя шаг сдвига в принципе может быть любым). За каждой картинкой висит определенная JavaScript функция: соответственно ScrollMenuUp() / ScrollMenuDown() и ScrollNenuUpOne() / ScrollMenuDownOne(). Все перечисленные функции выполняют аналогичные функции - изменяют значение глобальной переменной CurAnchor, а затем передают управление функции ScrollMenu(), которая смещает список инструкцией top.NavBar.location.href = "NavBar.html#" + top.CurAnchor; где NavBar - имя фрейма со списком ссылок, NavBar.html - файл содержащийся в этом фрейме. Работающий пример вы можете посмотреть здесь (открывается в новом окне). Исходники примера лежат здесь (Zip 5.63 K). К недостаткам приведенного способа можно отнести то, что при каждой попытке смещения списка происходит перезагрузка фрейма со списком. При этом сам файл списка с сервера не скачивается заново, а берется из кэша броузера, но обращение к серверу происходит все равно... Другой способ обработки длинных списков в качестве навигационных элементов заключается в следующем. Все элементы списка выполнены в виде графических файлов одинакового размера [по габаритам]. Само собой разумеется, размеры [файла] каждой отдельно взятой кнопки должны быть небольшими, дабы не заставлять пользователя долго ждать. Скроллинг по списку осуществляется путем подмены картинок и создания иллюзии их смещения. Разберемся подробнее на следующем примере. Пример 6 Пусть у нас имеется список из 10 ссылок, каждая из которых оформлена в виде картинки (MenuItem0 ... Menu Item9). Кроме того нам потребуются еще две кнопки такого же размера, которые будут пролистывать меню вверх и вниз, причем появляться кнопки со стрелочками будут только тогда, когда имеется необходимость в прокрутке элементов списка. Одновременно на экран выводится пять кнопок, из которых верхняя и/или нижняя могут быть прокрутками.
Фокус состоит в динамической замене картинки и ссылки под ней по аналогии со всем известным эффектом, называемым (в частности в Dreamweaverе) "Rollover Image". Текст программы выглядит следующим образом: CurTop = 0; Переменная CurTop указывает на смещение относительно самой верхней кнопки. Массивы: Определим основные функции: Функция PreloadImages() запускается сразу после загрузки документа и выполняет загрузку в кэш броузера всех картинок, являющихся составляющими списка, дабы при пролистывании меню пользователь не ждал, пока подгрузится очередной пункт меню. function PreloadImages(){ Фнкции ScrollUp() и ScrollDown() соответственно декрементируют и инкрементируют переменную CurTop, а затем передают управление функции Redraw(). function ScrollUp(){ Функция Redraw () выполняет основную функцию по модификации текущего вида меню на основании нового значения переменной CurTop. Оператор If в начале и в конце функции определяет, необходимо ли в качестве соответственно верхнего или нижнего элемента меню поставить полноценную кнопку, или же необходимо поставить кнопку прокрутки. Также функция модифицирует массив Links в соответствии с новыми изображениями кнопок. function Redraw (){ Фукция GotoUrl (n) осуществляет загрузку документа во фрейм Body в соответствии с выбором пользователя. function GotoUrl(n){ Функция Click (n) является точкой входа в систему и запускается банальной ссылкой из документа. Значение параметра n соответствует положению в списке нажатой кнопки. function Click(n){ Посмотреть рабочую версию примера можно здесь (открывается в новом окне), ознакомиться с исходниками - здесь (Zip 11.2 K). В принципе, данный пример абсолютно независим от фреймов и может быть использован документе без фреймов. Однако при загрузке нового документа смещение в списке не сохранится и пользователю придется листать список в поисках нужной кнопки опять и опять. Последнее может негативно сказаться на отношении посетителя к сайту в целом. Вот, пожалуй, и все, что я хотел рассказать Уважаемому посетителю про фреймы. Данная статья ни в коем случае не призывает отказаться от дизайна без фреймов, однако хотелось обратить Ваше внимание на те полезности, которые несут нам фреймы при участии JavaScript. Спасибо за внимание! Отзывы и пожелания отправляйте на roolic@mail.ru или roolic@alfacom.net Автор: Руслан Кашапов
|
|||||||||
![]() |
![]() |