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

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

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 680 RSS
←   Апрель 2014   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

680 подписчиков
0 за неделю
←   Все выпуски   →

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


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

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

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

Java Script(JS): Прокрутка фреймов. Продолжение.

 

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

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

 

На прошлом уроке мы изучили метод scrollTo, при помощи которого можно прокручивать фреймы. Сегодня изучим другие методы объекта Windows, позволяющие осуществить прокрутку.

Метод scrollBy. Делает прокрутку относительно текущего положения. Для примера возьмем исходники прошлого урока и слегка изменим файл jacket_wares.html:

 

<html>

    <head>

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

    </head>

    <body>

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

            function select_ware(x,y) {

                parent.picture.scrollTo(x,y)

            }

            function up() {

                parent.picture.scrollBy(0,-50)

            }

            function down() {

                parent.picture.scrollBy(0,50)

            }       </SCRIPT>

        <a href="javascript:select_ware(0,0)">Куртка красная</a><br>

        <a href="javascript:select_ware(0,500)">Куртка черная</a><br>

        <a href="javascript:select_ware(0,1000)">Куртка синяя</a><br>

        <a href="javascript:select_ware(0,2000)">Куртка кожаная</a><br>

        <a href="javascript:select_ware(0,2500)">Куртка джинсовая</a><br>

        <br><br>

        <a href="javascript:up()">Вверх</a><br>

        <a href="javascript:down()">Вниз</a><br>

    </body>

</html>

 

Теперь  при просмотре списка товаров из группы "Куртки" у нас появились две ссылки: "вверх" и "вниз", которые прокручивают картинку на 50 пикселей.

Вместо scrollToможно использовать и такую запись:

                parent.picture.document.body.scrollTop=y

                parent.picture.document.body.scrollLeft=x

 

Казалось бы, слишком громоздко. Однако, поля scrollTop и scrollLeft можно не только задавать но и читать. Проиллюстрируем это на примере. Для этого файл  index.html из нашего примера немножко видоизменим, присобачив к фрейму picture обработчик события OnScroll:

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

                picture.onscroll = function () {

                    groups.document.getElementById("info").innerHTML=picture.document.body.scrollTop

                }

            }

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

 

Так же чуть чуть изменим файл groups.html, добавив элемент с id равным info:

 

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

        <br>

        <br>

        <div id="info"></div>

    </body>

</html>

 

Все, теперь при прокрутке картинки у нас будет показывать позицию по вертикали:

Java Script(JS): Прокрутка фреймов. Продолжение.

 

 

 

 
В избранное