er, wide-border, borderless, outer-glow, colored-bor-
der, dark, floating-caption, controls-in-heading.
Ну вот, наш модуль настроен, теперь можем вер-
стать само тело веб-страницы. Т.е. закрываем тег
HEAD
и открываем тег
BODY.
<а href=”index.htm” onclick-’return hs.htmlExpand
(this) “>Показать окно</а>
<div class=”highslide-
maincontent”>
<h3>3aronoBOK</h3>
і
Текст текст текст текст
текст текст
Как видно из данного
примера, вся конструкция сводится к созданию
ссылки на совершенно произвольный адрес,
главное - чтобы у ссылки был обработчик клика
с вызовом метода
hs.htm lE xpand (th is )
гло-
бального объекта библиотеки.
После ссылки обязательно должен следовать тег
D IV
с указанием класса highslide-mamcontent. А
уже внутри него веб-мастер может насладиться
всеми доступными средствами разметки HTML. В
результате получим такое простенькое симпатич-
ное окошко (рис. 1), где и закругленная рамка с
градиентом, и тащить его можно за заголовок, и
кнопка закрытия есть, и даже в правом нижнем уг-
лу есть треугольник растягивания окна. Вот!;)
<а href=”index.htm”
ф
onclick="hs.lang.creditsText=’<divstyle=\’font-
size: 16рх; font-weight: Ьоіб\’>3аголовокок-
Ha</div>’;return hs.htmlExpand (this) “>Показать ок-
но</а>
<divclass=”highslide-maincontent”>
<ИЗ>Заголовок<ДіЗ>
<img src=”comput.png”
align=”left” width=”150”
hspace-”10" vspace=”5”>TeKCT
текст текст текст текст текст
</div>
и окно у нас получится уже та-
ким
(р и с . 2 ).
Замечу, что такое окно нель-
зя отобразить в произвольных
координатах,
поскольку
оно
привязано
к
определенному
объекту
с
классом
highslide-
maincontent.
Поэтому
отобра-
жение
окна
происходит
отно-
сительно этого объекта.
Следовательно,
можно
гене-
рировать такие окна заблаговременно для тех объ-
ектов, на которых должна быть предусмотрена такая
реакция, как показ всплывающего окна. А для этого,
как видно из примера, нужно совсем не много.
Просмотр фото (Preview)
Рис. 1
Заголовок окна
I
(
Т екс т текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст
текст текст текст
І
А І
Оказывает-
ся,
еще
Ницше
понимал
важ-
ность хороших
наушников:
«Нужны но-
вые уши для но-
вой музыки»
Но что это?! В заголовке окна мы видим текст
“Powered by Highslide JS”, который является ссыл-
кой на сайт разработчика библиотеки. При жела-
нии это можно убрать, указав в начальной инициа-
лизации дополнительный код:
ЯМШЗД
:АДОДОЗД & '*>!
;•
:
р ■
• .
...-і
hs.credrtsHref = ’# ” onclick=”return false’;
hs.lang.creditsTitle = ” ;
hs.lang.creditsText = ” ;
А если вас не устраивает размер окна по умолча-
ІНИЮ ,
то вы можете его
размеры настроить таки-
ми строками в начальной
инициализации:
hs.width = 500;
hs.height = 400;
Но как-то глупо получа-
ется, заголовок окна те-
перь пустует. Это дело
поправимое, достаточно в обработчик
onclick
»
ссылки добавить перед вызовом метода
return
hs.htm lExpand (this)
код, который вместо заго-
ловка окна со ссылкой на сайт разработчика подс-
тавит наш заголовок с любым стилем, указанным
явно, или косвенно через класс.
Еще для наглядности я добавил в пример отоб-
ражение картинки в нашем всплывающем окне.
Тогда код получится такой:
Л
юбой сайт - это, прежде всего, контент, текс-
товое наполнение. Практически любой текст,
для наглядности, да и просто для красоты или что-
бы
притягивало
(цепляло)
взгляд посетителя, до-
полняется иллюстрациями.
И если иллюстрация имеет большое разрешение,
то отображается она на веб-странице в уменьшен-
ном виде. Но иногда такая иллюстрация имеет важ-
ное значение и возникает необходимость дать посе-
тителю возможность увидеть ее в укрупненном виде.
Для
этого
и
существует
прос-
мотровое окно для фото. Как пра-
вило, оно появляется при клике на
иллюстрации,
и
разворачивает
иллюстрацию на всю ее величину
в пределах окна браузера. Такие
возможности
нам
предоставляет
библиотека ЫдЬэКбе:
<М т1>
<беаб>
<эспр11уре=’Чех1Лауа5спрГ 8гс=”Ыд115Нбе/1‘ндЬ-
81к1е.]5"></8СПр1>
<Нпк ге1=”81у1езЬееГ
1
уре=’Чех^С
58
” ЬгеГ=”Ь!дЬ-
81к1е/1'НдЬ5Нбе.С887>
<вспр1 type=”text/javascript’’>
бэ-дгарЬюБОк = ‘1'идЬзПбе/дгарЬю5/’;
З а г о л о в о к о н к а
Заголовок
Рис. 2
Ж
Т екс т текст текст текст текст
текст текст текст текст текст
текст текст текст текст текст
текст текст текст текст текст
текст
£
предыдущая страница 36 Компьютер 2012 08 читать онлайн следующая страница 38 Компьютер 2012 08 читать онлайн Домой Выключить/включить текст