Добавляем...


Меню внешнего управления
Меню внешнего управления — это всплывающие окна, управляющие поведением главного окна браузера. В главе 12 были рассмотрены принципы управления одного окна другим, и здесь эта техника будет применена. Меню указанного типа оказываются полезными тогда, когда требуется предложить пользователю большое число сложных вариантов. Когда желательно не заслонять содержимое окна, обычное меню с большом числом вариантов выбора оказывается неприемлемым. Основной идеей здесь является создание нового окна управления с помощью window, open ( ) главного окна.

Окно внешнего управления должно иметь кнопки, ссылки или меню вариантов действий и должно выполнять необходимые действия в главном окне браузера, используя для этого свою ссылку window.opener. После выполнения действий, выбранных пользователем в окне управления, можно вызвать метод focus ( ) управляемого окна. Это "упрощает жизнь" пользователю, поскольку избавляет от необходимости перехода к содержимому главного окна вручную.

Заметим, что окна, содержащие меню внешнего управления, часто бывают лишены таких "прикрас", как полосы прокрутки, кнопки навигации браузера и адресная строка. Чтобы открываемое окно имело такой вид, передайте методу window, open ( ) в качестве третьего аргумента пустую строку или используйте строки конфигурации с отключенными соответствующими возможностями, как это предлагается в главе 12.

Предположим, необходимо показать в окне одно из нескольких изображений большого размера, но при этом нежелательно, чтобы средства управления HTML загромождали соответствующее окно. Для главного окна можно использовать содержимое следующего файла (назовем его imageviewer. html), загружаемого пользователем.

Файл imageviewer.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OKHO демонстрации изображения </title>
<meta http-eguiv="content-type"
content="text/html; charset=windows-1251" />
</head>
<body>
<img name="displayedlmage" id="displayedlmage" alt="" src="imagel.jpg" />
<script type="text/javascript">
var remoteControlDRL = "remotecontrol.html";
var remoteFeatures = "height=150,width=400,location=no,";
remoteFeatures += "menubar=no,scrollbars=no,status=no,toolbar=no";
var remoteCentrol =
window.open(remoteControlURL, "controlWindow", remoteFeatures);
</script>
</body>
</html>



Теперь нужно создать окно внешнего управления (файл remotecontrol.html), загружаемое главным окном. Соответствующий файл содержит программный код JavaScript для установки displayedlmage. src объемлющего документа.

Файл remotecontrol.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>0кно yпpaвлeния</title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251" />
<script type="text/javascript">
<!---
function loadlmage(which)
{ •
var contentWindowURL = "imageviewer.html";
if (!window.opener || window.opener.closed)
{
alert("Главное окно исчезло и будет восстановлено.");
window.open(contentWindowURL, "_blank");
window.close( );
return;
}
window.opener.document.images["displayedlmage"].src = which;
window.opener.focus ( );
}
//—>
</script>
</head>
<body>
<ЬЗ>Выберите фото для демонстрации</ЬЗ>
<form action="#" onsubmit="return false;" method="get">
<input type="button" value="Фото 1" onclick="loadImage('image1.jpg');" />  
<input type="button" value="Фото 2" onclick="loadImage('image2.jpg');" />  
<input type="button" value="Фото 3" onclick="loadImage('image3.jpg');" />  
<input type="button" value="Фото 4" onclick="load!mage (' image4 . jpg'); " />
</form>
</body>
</html>



Самое главное, на что нужно обратить внимание в связи с этим сценарием, это то, что здесь предпринимаются дополнительные меры, гарантирующие существование главного окна перед его использованием. Пользователь может случайно закрыть окно, но в этом случае сценарий перезагрузит imageviewer.html и закроет себя.

Возможность перемещения меню за пределы главного окна браузера обеспечивается не только в том случае, когда для меню используется отдельное окно. Аналогичный эффект достигается с помощью скользящих меню.


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика