Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow Уроки Java Script arrow WEB-программирование: «Java Script(JS): Фреймы. Взаимодействие между фреймами.
26.04.2024 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
WEB-программирование: «Java Script(JS): Фреймы. Взаимодействие между фреймами. Печать E-mail
Автор megabax   
24.09.2013 г.
Урок 13. Управление шрифтами в CSS New Page 1

WEB-программирование: «Java Script(JS): Фреймы. Взаимодействие между фреймами.

 

Исходники к уроку можно скачать здесь.

Для углубленного изучения web-программирования (язык PHP и написание своей собственной CMS) советую подписаться на платный раздел (см. анонсы раздела "Пишем Easy CMS") и  Разработка сервиса сайта на PHP на примере партнерской программы).

 

 Сегодня мы займемся взаимодействием фреймов с друг другом. Для начала немного видоизменим файл index.html, который мы создали на прошлом уроке, вот как он теперь будет выглядеть:

<html>

    <head>

        <title>Урок 97. Java Script (JS): Фреймы</title>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            function init() {

                wares.document.write("<h3>Выберите товарную группу, что бы увидеть список товаров</h3>");

                descr.document.write("<h3>Выберите товарную группу или товар, что бы увидеть описание</h3>");

            }

        </SCRIPT>

    </head>

    <frameset rows="80%, *" ONLOAD="init()">

        <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>

 

  В файл picture.html мы поместим только один тэг img:

<html>

    <head>

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

    </head>

    <body>

        <img src="start.jpg">

    </body>

</html>

 

который отобразит начальную картинку:

WEB-программирование: «Java Script(JS): Фреймы. Взаимодействие между фреймами.

 

В файле groups.html мы сделаем вывод данных в другие фреймы, для чего обратимся к ним через родительских объект, который обозначается как parent:

<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"

            }

        </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>

    </body>

</html>

 

 

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

WEB-программирование: «Java Script(JS): Фреймы. Взаимодействие между фреймами.

 

 

 
Последнее обновление ( 24.09.2013 г. )
 
« След.   Пред. »
Вернуться
 
© 2024 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги