Окна на jQuery в стиле Windows 7 – плагин AeroWindow

« Предыдущая запись
 
  Следующая запись »
 

Сегодня мне скинули ссылку на плагин, который эмулирует рабочий стол Windows 7 в браузере. Идея мне показалась очень интересной, и я, почему-то, сразу представил тему административного интерфейса, сделанную на его основе. Но для начала, как обычно, надо немного потестить.

aero Окна на jQuery в стиле Windows 7   плагин AeroWindow

Основной функционал:

  1. Активное окно всегда подсвечивается, а неактивное затемняется. При этом…
  2. Окна можно накладывать друг на друга и менять местами.
  3. Все окна можно свернуть, развернуть и, само собой, закрыть.
  4. Естественно, их можно перемещать как и обычный окна и… разворачивать во весь экран по двойному клику на шапке. Как в винде.
  5. Окна можно размещать за пределы видимой области экрана (тогда горизонтальный скролл в браузере появится).

Настроить можно:

  1. Минимальный, максимальный размер окна, можно вообще его фиксировать.
  2. Анимацию настроить также возможно.
  3. Также можно вызывать окна по различным событиям - например по клику на значки, которые представлены в верхнем левом углу примера.
  4. Начальная позиция окна и его заголовок

Заявлена работа под Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Mozilla Firefox 3, Google Chrome 4, Apple Safari 4, Opera 10. Налажен плагин под jQuery 1.4.2.

 

Вот он весь заявленный и увиденный функционал. Всё бы ничего, но, как и все (большинство точно) оформительские плагины, он обладает рядом недостатков.

Минусы:

  1. Самый неприятный глюк связан со сворачиванием окна. Если свернуть несколько окон, то они свернуться в левый нижний угол и наложатся друг на друга. Выглядит не симпотно.
  2. CSS настроен не очень хорошо, нужно для окон поставить owerflow-y:auto, а не hidden, а то при уменьшении высоты окна полосы прокрутки не появляется.
  3. Если развернуть окно на весь экран, то его всё равно можно перемещать влево-вправо. Мелочь, а не как в винде. По идее, исправить легко, привязав к событию разворота на весь экран функцию, чтобы нельзя было перетаскивать окно.
  4. Кроссбраузерность достигнута неплохо, но не полностью. Из недостатков замечено следующее. Во-первых, представленный пример в ишаках выдаёт ошибку (которую может и можно убрать, не проверял), хотя при этом работает. Во-вторых, в некоторых браузерах была замечена такая тема, что если окна выводились за пределы видимой части окна браузера, то оформление окна терялось, либо обрезалось окно. Где обрезалось окно, не знаю (вероятно Опера 10), но оформление потеряно было в старом Нетскейпе. Возможно потеряется и в старой лисе. В-третьих в Опере 9.26 какая-то проблема с позиционированием окон - если окна появляются при загрузке страницы, то там сбой какой-то в положении.
  5. Для  IE6 нужен костыль прозрачности PNG.

 

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

     

 

 


1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 1, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 15 на запись

"Окна на jQuery в стиле Windows 7 – плагин AeroWindow"

  1. Задействую где-нибудь обязательно, спасибо, но в Опере, при трансформировании окна, окно преобразуется само в вертикальное положение, и получается так, что низ его за рамками (пределами) экрана и видимой области, и достать до него мышкой становится почти не реально… :(

  2. ага, видел такое в старой опере. неприятный момент, да =(

  3. такое я видел в панели управления юкоза, меня там порадовало,хотел себе попробывать написать подобную, но некуда. ток там меню пуск была еще, а эту я нав себе прикручу, ток над разобраться как там ссылки добавлять, спасибо

  4. Пожалуйста! =)

  5. Александр
    13/10/2010 at 20:06 Постоянная ссылка Цитировать

    Думал, что нашёл именно то что искал…. :( посмотрел и разочаровался. Багов в этом плагине намного больше. Во-первых кнопки не спрайтом сделаны – у меня сильно тормозила смена картинки при наведении мыши. Во-вторых – как-то сразу умудрился окно за верхнюю границу экрана задвинуть, а его от туда ни как не вынуть, не закрыть. Вот такая бяка.

    Но в целом идея хорошая.
    А Вам лично особое спасибо за блог – постоянно нахожу для себя много полезного.

  6. да, обидно, хотя задумка действительно хороша.

    Большое спасибо за отзыв, приятно слышать, что старания идут не зазря. Жаль только времени особо сейчас нет, чтобы писать, раз в неделю с трудом получается

  7. Вадим Береснев
    12/01/2011 at 20:16 Постоянная ссылка Цитировать

    Александр, спасибо.

    Можно вопрос? при динамическом выводе текста в созданное окно заменяет все окно. innerHTML для окна не показывает.
    Буду признателен за подсказку, как обратиться к окну, заменяя в нём текст?

    $(document).ready(function() {
    $(‘#ShowText’).AeroWindow({
    WindowTitle: ‘Рассказик’,
    WindowPositionTop: ‘center’,
    WindowPositionLeft: ‘center’,
    WindowWidth: 400,
    WindowHeight: 100,
    WindowAnimation: ‘easeOutCubic’
    })
    });

    ……..

    function getXML(url1){
    $.ajax({
    type: “GET”,
    url: url1,
    dataType: “text/plain”,
    success: parseXml
    })
    }

    function parseXml(xml) {
    $(‘#ShowText’).text(xml); // в окне заменить текст $(‘#ShowText’).innerHTML=xml; – не работает
    }

  8. хм, попытаюсь доступно объяснить. полагаю дело в том, что плагин использует блок, который вы хотите заменить (#showText), в своих целях, поэтому никакие сторонние операции на него не повлияют. и если необходимо повлиять на содержимое блока, то надо действовать через скрипт плагина

  9. Вадим Береснев
    14/01/2011 at 7:34 Постоянная ссылка Цитировать

    Спасибо.
    Попытаюсь :)

  10. Вадим Береснев
    14/01/2011 at 8:13 Постоянная ссылка Цитировать

    Блин! Всё оказалось очень просто:
    внутри окна вставить собственный слой в котором делать что угодно ;-)

  11. Ну, как говорится, всё гениальное – просто =)

  12. А вот такой момент:
    если открыть окно, затем его свернуть, затем еще раз кликнуть по иконке открытия – в этом случае свернутый шпильдик становится активным, но почему то не распахивается.
    интересно, автоматически распахнуть его возможно?

  13. не знаю, теоретически может и возможно. я как-то сам плагин не ковырял, не довелось =)
    если плагин поддерживается, думаю стоит спросить создателя

  14. Очень полезно. И без Flash можно сайт на ОК сделать. Именно тематика Вин7)

  15. дааа, библиотеки типа jQuery дают очень большие возможности =)

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

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