Чтение онлайн

на главную

Жанры

Интернет-журнал "Домашняя лаборатория", 2007 №3
Шрифт:

В результате посетителю, пришедшему на эту страничку, достаточно "пробежать" курсором по списку и, даже не переводя глаза, прочитать все рефераты, чтобы получить полное представление о содержании сайта. Удобно? Да, действительно. Одно движение руки и чтение текста на одном и том же месте — и вся информация сайта вам известна.

Для тех же, кто привык к традиционным длинным прокручивающимся спискам статей с рефератами, предназначена специальная кнопка внизу справа под списком. При нажатии на нее на экране появится новое окно со списком статей, причем появится почти мгновенно, так как список будет

не грузиться с сервера, а сгенерируется из содержимого странички.

Как же это реализовать? Использовать возможности VBScript и Dynamic HTML. Скачайте страничку с вышеуказанного адреса и посмотрите, как она устроена. Графики там мало (только фон, портрет и кнопки навигации), так что ее дизайн без графики заметно не изменится.

Для того, чтобы устройство подобной страницы было понятно, приведу краткую ее схему, в которой содержатся основные структурные элементы. Данное пояснение также демонстрирует возможности HTML и языков сценариев.

Вначале — краткое пояснение. Тэг <div> выделяет из основного текста страницы какой-либо фрагмент, которому с помощью этого тэга можно задать какие-либо свойства, назначить скрипт для выполнения. "Onmouseover" — это команда Dynamic HTML, означающая, что другая команда, заключенная в круглые скобки после нее, будет выполняться при наведении курсора мыши на тот объект, в тэге описания которого команда "Onmouseover" присутствует. Параметр "rowspan=NN" означает слияние между собой ячеек таблицы, расположенных в одной колонке, на протяжении NN строк таблицы. "Id" — это уникальное имя какого-либо объекта, позволяющее управлять свойствами этого объекта с помощью скриптов. Объяснение назначения каждой строки кода — под ней.

<html><head><title></title></head><body>

Заголовок страницы.

<div onmouseover=(document.all.txt0.innerHTML=

=document.all.privet.innerHTML)>

Верхняя часть страницы. При наведении курсора на нее текст в правой части таблицы меняется на приветствие.

</div><table width="100 %">

Начало самой таблицы

<tr><td> </td>

Первая колонка, соответствующая названиям статей

<td rowspan=NN>

Создание места для отображения рефератов путем слияния ячеек между собой. Число NN должно быть равно количеству статей плюс один.

<div id=txt0>

Тот самый тэг, содержимое которого будет меняться при наведении курсора на ссылки. Изначально здесь может быть короткий текст, который будет виден во время загрузки страницы — пока она полностью не загрузится.

</div>

<div style="display: none" id=privet>Приветствие</div>

Приветствие посетителю. Оно будет загружаться тогда, когда курсор находится над верхней или нижней частью таблицы, замещая собой текст предыдущего тэга. Само по себе не видно посетителю — это просто "место хранения" текста приветствия.

<SCRIPT FOR=window EVENT=onload LANGUAGE="JScript"> document.all.txt0.innerHTML=document.all.privet.innerHTML;

</SCRIPT>

Этот скрипт исполняется сразу после окончания загрузки страницы и автоматически замещает изначальный текст тэга <div id=txt0> на приветствие, без каких-либо движений курсора.

<div style="display: none">

<div id=txt1>Peфepaт 1</div>

Основное "хранилище"

текстов рефератов. Каждая строка типа <div id=txtNN>Peфepaт NN</div> содержит текст одного реферата. Поскольку перед этой группой строк стоит тэг <div style="display: none">, то посетителю содержимое этих строк не видно — они служат лишь "источником текстов": тексты рефератов берутся отсюда по мере необходимости.

</div></td><td> </td></tr>

Правая часть первой строки таблицы. Содержит описание еще одной колонки — для того, чтобы можно было разместить в правой колонке ссылки на online-варианты статей.

<tr onmouseover=(document.all.txt0.innerHTML=

=document.all.txt1.innerHTML)>

<td><a href="#">Статья 1 — Загрузить</a></td>

<td><a href="#">Прочитать</а></td></tr>

Основной блок сценария. Каждый такой фрагмент описывает одну строку таблицы, строка содержит название статьи, ссылку на ее архив, ссылку на online-вариант статьи, а также команду Dynamic HTML, выполняющуюся при наведении курсора на строку и заменяющую содержимое видимого тэга <div id=txt0> содержимым соответствующего невидимого тэга <div id=txtNN>Peфepaт NN</div>.

Таких фрагментов должно стоять друг за другом столько, сколько рефератов и статей представлено на странице. Естественно, в каждом следующем фрагменте ссылки и параметр onmouseover должны быть другими, document.all.txt0.innerHTML=document.all.txt2.innerHTML и т. д.

</table>

Конец таблицы

<INPUT TYPE=button id=btn1 value="прочитать все описания">

Кнопка, запускающая скрипт, помещенный ниже. Он выводит содержимое всех тэгов <div id=txtNN>Peфepaт NN</div> в отдельное окно — чтобы те, что привык читать длинные страницы со списками ресурсов сайта, могли бы прочесть все рефераты в привычной обстановке.

<SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript>

Заголовок скрипта. В нем указывается язык скрипта — VBScript.

Sub btn1_onClick

Означает, что скрипт выполняется при клике на кнопку btn1.

Set nwnd=window.open

Эта команда открывает новое окно браузера и подготавливает его для вывода в него данных.

er="URL сайта"

Адрес сайта, на котором расположены архивы статей (с знаком "/" в конце). Подставляется в адреса для скачивания файлов в тексте открытого нового окна — чтобы можно было сохранить этот текст на жестком диске и впоследствии загрузить файлы.

nwnd.document.writeln ("<htm1><title>Статьи</title> <body>Список")

Запись заголовка новой страницы.

nwnd.document.writeln (txtNN.innerHTML+" <a href="#"fileNN.zip> Скачать </a>")…

Собственно выведение текстов рефератов в новое окно. Таких строчек должно быть столько же, сколько и рефератов. В каждой строчке должно быть указано соответствующее значение txtNN и fileNN — для каждого реферата.

nwnd.document.writeln ("<р>Эти статьи доступны на <а href="#">caйте</a></body></html>")

Запись конца страницы.

Поделиться:
Популярные книги

Бастард Императора

Орлов Андрей Юрьевич
1. Бастард Императора
Фантастика:
фэнтези
аниме
5.00
рейтинг книги
Бастард Императора

На границе империй. Том 10. Часть 1

INDIGO
Вселенная EVE Online
Фантастика:
космическая фантастика
попаданцы
5.00
рейтинг книги
На границе империй. Том 10. Часть 1

Имя нам Легион. Том 7

Дорничев Дмитрий
7. Меж двух миров
Фантастика:
боевая фантастика
рпг
аниме
5.00
рейтинг книги
Имя нам Легион. Том 7

Измена. Вторая жена мужа

Караева Алсу
Любовные романы:
современные любовные романы
5.00
рейтинг книги
Измена. Вторая жена мужа

Буря империи

Сай Ярослав
6. Медорфенов
Фантастика:
аниме
фэнтези
фантастика: прочее
эпическая фантастика
5.00
рейтинг книги
Буря империи

Пенсия для морского дьявола

Чиркунов Игорь
1. Первый в касте бездны
Фантастика:
попаданцы
5.29
рейтинг книги
Пенсия для морского дьявола

На изломе чувств

Юнина Наталья
Любовные романы:
современные любовные романы
6.83
рейтинг книги
На изломе чувств

Тринадцатый II

NikL
2. Видящий смерть
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Тринадцатый II

Сирота

Шмаков Алексей Семенович
1. Светлая Тьма
Фантастика:
юмористическое фэнтези
городское фэнтези
аниме
5.00
рейтинг книги
Сирота

Законы Рода. Том 9

Flow Ascold
9. Граф Берестьев
Фантастика:
городское фэнтези
попаданцы
аниме
дорама
фэнтези
фантастика: прочее
5.00
рейтинг книги
Законы Рода. Том 9

Красноармеец

Поселягин Владимир Геннадьевич
1. Красноармеец
Фантастика:
боевая фантастика
попаданцы
4.60
рейтинг книги
Красноармеец

Огненный князь 4

Машуков Тимур
4. Багряный восход
Фантастика:
попаданцы
аниме
5.00
рейтинг книги
Огненный князь 4

Начальник милиции. Книга 5

Дамиров Рафаэль
5. Начальник милиции
Фантастика:
попаданцы
альтернативная история
5.00
рейтинг книги
Начальник милиции. Книга 5

Инкарнатор

Прокофьев Роман Юрьевич
1. Стеллар
Фантастика:
боевая фантастика
рпг
7.30
рейтинг книги
Инкарнатор