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>

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>

</frameset>

</html>

И так, что мы сделали. Мы задали имя объекта frameset, тоесть, теперь мы можем обращаться к нему через main_frameset, например так: parent.main_frameset.rows="50%,*";.

Давайте продемонстрируем это на примере. Изменим файл groups.html(изменения выделены маркером):

<html>

<head>

<title>Выбор товарной группы</title>

</head>

<body>

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>

<a href="javascript:proba()">Щелкни сюда</a><br>

</body>

</html>

И так, вы, наверное, поняли, что при нажатии на ссылку "Щелкни сюда":

у нас измениться размеры фрейма, вот как будет выглядеть экран после нажатия:

Последнее обновление ( 14.03.2014 г. )

« След.		Пред. »

Вернуться