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

Автор megabax

09.09.2014 г.

Урок 13. Управление шрифтами в CSS New Page 1

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

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

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

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

moveTo - переместить окно в заданные координаты.
moveBy - переместить окно на указанное число пикселов (может быть и отрицательное число).
ResizeTo - изменить размер окна на указанный (по ширине и высоте).
resizeBy - изменить размер окна на указанную величины (может быть и отрицательное число).

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

<html>

<head>

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

</head>

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>

</body>

</html>

<html>

<body>

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>

</body>

</html>

Испытаем:

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

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

Вернуться