Урок 13. Управление шрифтами в CSS
New Page 1
Web-программирование: "Java Script(JS): Атрибуты FRAMESET"
Исходники к уроку можно скачать
здесь.
Для
углубленного изучения web-программирования (язык
PHP и написание своей собственной CMS) советую
подписаться на
платный раздел (см. анонсы раздела "Пишем
Easy CMS") и
Разработка сервиса сайта на PHP на примере партнерской программы).
Как и любой
элемент на странице, элементы frameset, frame и
iframe имеют соответсвующие объекты в иерархии
DOM, у которых так же могут быть различные атрибуты.
Например, у объекта frameset есть атрибуты rows и cols,
благодаря чему мы можем программно менять размеры фреймов. Давайте
испытаем это на примере. И так, откроем исходники
прошлого урока. Изменим файл
index.html (изменение выделено маркером):
<html>
<head>
<title>Урок
101. Java Script (JS): Фреймы</title>
<SCRIPT
LANGUAGE="JavaScript"
TYPE="text/javascript">
function
init() {
wares.document.write("<h3>Выберите
товарную группу, что бы увидеть список товаров</h3>");
descr.document.write("<h3>Выберите
товарную группу или товар, что бы увидеть описание</h3>");
picture.onscroll =
function () {
groups.document.getElementById("info").innerHTML=picture.document.body.scrollTop
}
}
</SCRIPT>
</head>
<frameset
rows="80%,
*"
ONLOAD="init()"
name="main_frameset">
<frameset
cols="15%,
20%, *">
<frame
Name="groups"
src="groups.html">
<frame
Name="wares"
src="javascript:void(0)">
<frame
Name="picture"
src="picture.html">
</frameset>
<frame
Name="descr"
src="javascript:void(0)">
</frameset>
</html> |
И так, что мы
сделали. Мы задали имя объекта frameset, тоесть, теперь мы можем обращаться к
нему через main_frameset, например так: parent.main_frameset.rows="50%,*";.
Давайте
продемонстрируем это на примере. Изменим файл groups.html(изменения выделены
маркером):
<html>
<head>
<title>Выбор
товарной группы</title>
</head>
<body>
<SCRIPT
LANGUAGE="JavaScript"
TYPE="text/javascript">
function
selectGroup(group) {
parent.wares.location.href=group+"_wares.html"
parent.descr.location.href=group+".html"
parent.picture.document.images[0].src=group+".jpg"
}
function
proba() {
parent.main_frameset.rows="50%,*";
}
</SCRIPT>
<h4>Выберите
товарную группу,<br> которую вы хотите просмотреть.</h4>
<a
href="javascript:selectGroup('jacket')">Куртки</a><br>
<a
href="javascript:selectGroup('suit')">Костюмы</a><br>
<a
href="javascript:selectGroup('dress')">Платья</a><br>
<a
href="javascript:selectGroup('sarafan')">Сарафаны</a><br>
<br>
<br>
<div
id="info"></div>
<a
href="javascript:proba()">Щелкни
сюда</a><br>
</body>
</html> |
И так, вы,
наверное, поняли, что при нажатии на ссылку "Щелкни сюда":
у нас
измениться размеры фрейма, вот как будет выглядеть экран после нажатия:
|