36 lines
1.8 KiB
Markdown
36 lines
1.8 KiB
Markdown
# Менеджер окон
|
||
|
||
[importance 5]
|
||
|
||
Эта задача является продолжением задачи [](/task/draggable-windows).
|
||
|
||
Предусмотрите возможность создавать несколько окон. При этом то, которое получает фокус, становится выше всех.
|
||
|
||
Общее управление окнами должен осуществлять объект `WindowManager`.
|
||
|
||
Синтаксис:
|
||
|
||
```js
|
||
WindowManager.setTemplate(html-шаблон для окон);
|
||
|
||
WindowManager.addWindow({ // создаёт окно по шаблону с заголовком
|
||
title: "Чат с Петей" // и показывает его
|
||
});
|
||
|
||
WindowManager.addWindow({ // ещё одно окно
|
||
title: "Чат с Машей"
|
||
});
|
||
```
|
||
|
||
<a href="/files/tutorial/widgets/window-manager/index.html" target="_blank">Посмотреть пример в новом окне.</a>
|
||
|
||
|
||
<ul>
|
||
<li>Окна перекрывают друг-друга по `z-index`. Максимальный `z-index` должен быть ограничен: от 1 до количества окон.</li>
|
||
<li>Информация от окна к менеджеру передаётся через события.</li>
|
||
<li>Инкапсуляция: `WindowManager` использует объект `DraggableWindow`, но не лезет в DOM окна. Обработчики -- только на объект.</li>
|
||
</ul>
|
||
|
||
В качестве исходного документа можно взять решение [предыдущей задачи](/task/draggable-windows). Скорее всего, класс `DraggableWindow` понадобиться немного изменить, добавить события.
|
||
|
||
[edit src="solution" task/]
|