Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

Интернет магазин.

В платном разделе

В бесплатном разделе

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>

 

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

Web-программирование: "Java Script(JS): Атрибуты FRAMESET"

 

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

 

Web-программирование: "Java Script(JS): Атрибуты FRAMESET"

 

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 


В избранное