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

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


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

Новости партнерской программы: новая улучшенная схема начисления партнерского вознаграждения. Зарабатывайте вместе с нами!

Новые продукты в интернет магазине: Биржевой робот. Лекция 6. Текст в формате MS Word + исходники. Работа с биржевой библиотекой StockLibrary.dll + демо исходники + сама библиотека. В уроке рассмотрена библиотека применительно к эмуляции биржи для проверки стратегии на исторических котировках.

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

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

Web-программирование: "Java Script(JS): Всплывающие окна. Изменение размеров и положения окна на экране."

 

 

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

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

 

На этом уроке мы изучим функции для изменения размера и положения окон (хотя окно можно открыть сразу с нужным размером, но в процессе работы может возникнуть необходимость изменить размер этого окна). Для этих целей в JS существуют следующие функции:

 

  • moveTo - переместить окно в заданные координаты.

  • moveBy - переместить окно на указанное число пикселов (может быть и отрицательное число).

  • ResizeTo - изменить размер окна на указанный (по ширине и высоте).

  • resizeBy - изменить размер окна на указанную величины (может быть и отрицательное число).

А теперь пример (на основе примера прошлого урока):

<html>

    <head>

        <title>Урок 105. Java Script (JS): Всплывающие окна</title>

    </head>

    <body OnUnload="if (myWin) myWinClose()">

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

            var myWin

            function getInfo() {

                myWin=open("myWin.html","Пробное окно","height=250, width=300");

            }

            function MoveTo() {

                myWin.moveTo(document.getElementById("X").value,document.getElementById("Y").value);

            }

            function MoveBy() {

                myWin.moveBy(document.getElementById("X1").value,document.getElementById("Y1").value);

            }

            function ResizeTo() {

                myWin.resizeTo(document.getElementById("X2").value,document.getElementById("Y2").value);

            }

            function ResizeBy() {

                myWin.resizeBy(document.getElementById("X3").value,document.getElementById("Y3").value);

            }

        </SCRIPT>

        <input type="button" value="Введите информацию о себе" onClick="getInfo()"><br>

        <input type="button" value="Поместить окно сюда:" onClick="MoveTo()"><input type="text" id="X">,<input type="text" id="Y"><br>

        <input type="button" value="Сдвинуть окно на:" onClick="MoveBy()"><input type="text" id="X1">,<input type="text" id="Y1"><br>

        <input type="button" value="Сделать размер окна такой:" onClick="ResizeTo()"><input type="text" id="X2">,<input type="text" id="Y2"><br>

        <input type="button" value="изменить размер окно на:" onClick="ResizeBy()"><input type="text" id="X3">,<input type="text" id="Y3"><br>

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

    </body>

</html>

 

<html>

    <body>

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

            function commit() {

                var info=opener.document.getElementById("info");

                var name=document.getElementById("name").value;

                var sname=document.getElementById("sname").value;

                var birth=document.getElementById("birth").value;

                s="Ваше имя: "+name+"<BR>";

                s+="Ваша фамилия: "+sname+"<BR>";

                s+="Ваш год рождения: "+birth+"<BR>";

                info.innerHTML=s;

                opener.focus();

                window.close();

            }

        </SCRIPT>

        <h1>Введите информацию о себе</h1>

        Имя: <Input id="name" type="text"><br>

        Фамилия: <Input id="sname" type="text"><br>

        Год рождения: <Input id="birth" type="text"><br>

        <input type="button" value="ОК" onClick="commit()">

    </body>

</html>

 

 

Испытаем:

Web-программирование: "Java Script(JS): Всплывающие окна.  Изменение размеров и положения окна на экране."

 

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

 

 

 


В избранное