AeroWindow плагин для jQuery. Создание окон в стиле Windows Aero

Original author: Soyo Lab
  • Translation
Хочу представить вашему вниманию интересный плагин для jQuery — AeroWindow, позволяющий создать ваш сайт в стиле Windows Aero. Он создает появляющиеся окна в стиле Window 7 Aero, которые предлагают обычные опции и полную функциональность похожую на окна Windows.

image

Основные функциональные возможности:
  • Использование кнопок: Свернуть, Развернуть и Закрыть
  • Особая функция: анимация в виде глянцевидных блестяшек при перемещении окна;
  • Поддержка двойного клика по окну (анимированное развёртывание окна);
  • Бесконечно раздвижное окно;
  • Визуальная подсветка активного окна;
  • Анимированное изменение размера окна;
  • Перемещение окна с помощью мыши;
  • Управление наложениями окон друг на друга (Z-order management);
  • Множество других настроек.

Имеется возможность задать следующие параметры:
  • Заголовок окна;
  • Начальная позиция окна в координатах X и Y (предусмотрена возможность центрирования);
  • Стандартный размер Окна;
  • Минимальный размер окна;
  • Состояние открытого окна (свернутое, максимальный размер, нормальное);
  • Настройка анимации окна;
  • Генерация окон по событиям мыши и вызовам функций JavaScript.

Примеры:
Простое описания окна AeroWindow:
$ ('#YourContainerDiv').AeroWindow((WindowTitle: 'My first very cool Aero Window for Web',));

Особые свойства окна могут быть легко заданы:
$ ('# YourContainerDiv').AeroWindow((WindowTitle:'My first very cool Aero Window for Web', WindowPositionTop: 'center', WindowPositionLeft: 'center', WindowWidth: 400, WindowHeight: 100, Window Animation: 'easeOutCubic' WindowResizable: true, WindowDraggable: true WindowMinimize: true, WindowMaximize : false, WindowClosable: true));

Проверена совместимость со следующими браузерами: Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Mozilla Firefox 3, Google Chrome 4, Apple Safari 4, Opera 10.
Текущая версия 2.0, базирующуюся на jQuery v1.4.2.

Скачать AeroWindow
Демонстрация
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 93

    +3
    Симпатично.
    Впечатление немного портит наложение окон друг на друга при сворачивании.
      +4
      Восстановление тоже не блещет… это все мелочи.

      Гораздо интереснее стандартными средствами получить информацию о текущей 'теме' (не только windows), а именно цвета, шрифты, фоновое изображение (хотя последнее наверное — вопрос доступа к приватной информации).

      p.s. зато как быстро работают 'рабочие столы' построенные на основе подобных эмуляторов, никакие aero explorer/kde konqueror/gnome nautilus/… не могут работать с такой скоростью ;)
      0
      Вон для заголовков общий на все окно. когда перемещаешь окно — как будто смотришь на этот фон. Ну это мелочь.
      Там подгрущается jqueryUI — может лучше было как тему для него сделать?
      И еще грузится какой то JS -25 килобайт — вообще непонятно что.
        +2
        >вообще непонятно что
        какой-нибудь КОСТЫЛЬ, неужели не понятно?
        –21
        в опере 10 глючит, как и всё, что основано на jQ UI / Dialog
          +68
          «в опере 10 глючит всё» — так правильнее ;)
            +3
            Власть переменилась? Подобные комменты про оперу уже плюсуют? :)
              +3
              к сожалению, это факт. опера не очень радует при рзработке
              • UFO just landed and posted this here
                  0
                  В голове почему-то крутится фраза про то, что семеро одного не ждут, но сформулировать не могу… :)
                    0
                    семеро под одного не подстраиваются)
            –4
            Actually in Opera aero works fine.
            Version 10.53
            Build 3374



              –7
              Картинка не грузится, родимый.

              Используй TinyPic, например.
              +4
              Даже в 9.5 не глючит. А что именно у вас не так?
                +3
                Когда пытаешься изменить размер окошка, тянешь за нижний правый угол, размер просто автоматически увеличивает вниз пикселей на 400. Обратно вернуть возможности нет, уголок опять убегает вниз.
                  0
                  Возможно, какой-то юзерскрипт делает больше, чем ему положено.
                    0
                    опера 10,10, убунту. такой проблемы не вижу.
                      +3
                      Подтверждаю проблему, Opera 10.53
                        0
                        аналогично.
                        Версия: 10.51
                        Сборка: 3315
                        Платформа: Win32
                        Система: Windows XP
                        • UFO just landed and posted this here
                            0
                            10.53
                            тоже подтверждаю
                              0
                              Opera 10.60 3403, проблем не замечено
                          +2
                          Выглядит круто, ничего не скажешь. Правда как-то по мелочам не доделано. Заголовок окна слишком прозрачный (если открыто несколько окон становится порой тяжело текст в заголовке прочитать), невозможно выделить текст в самом окне, оно начинается таскаться, проблемы с границами, за которые можно ресайзить окно, вышеупомянутое наложение свёрнутых окон.
                          Хотя это всё надо разработчику отправить, по-хорошему то.
                            0
                            + ко всему выше сказанному при перетаскивании окон вправо они просто напросто обрезаются, а вниз можно тянут до бесконечности.
                            +4
                            Давно не встречал такой табличной верстки уголков )
                            • UFO just landed and posted this here
                              +1
                              Если в окне контента больше, чем размер окна, должен бы скролл появляться, нет?
                                +1
                                Появляется. Надо просто overflow-y:auto прописать, вместо указанного overflow:hidden. ©Firebug
                              • UFO just landed and posted this here
                                  +22
                                  Теперь окошки «Вы выйграли миллион долларов» и «На вашем компьютере 123 вируса» будут выглядеть еще коварнее…
                                    0
                                    *выиграли
                                      +1
                                      точно. смотрел демо, и сразу об этом думал.
                                      –3
                                      Прикольная вещица. Жалко тему windows не подтягивает…
                                        –14
                                        симпотично
                                          +6
                                          Правильно «симпатично», а не «симпотично»: проверочное слово — «симпáтия» (а не «пóтный», например).
                                            –11
                                            а можно еще заминусовать?
                                          +6
                                          Всё бы хорошо, вот только, думаю, линуксоидов и маководов такое будет несколько раздражать.
                                            +2
                                            Да, прикольно, НО:
                                            Нехорошо, когда на сайте используются элементы оформления ОС — это вводит пользователя в заблуждение. Да и не круто это.
                                            Для веба дизайн окошек лучше все же сменить.

                                            К списку глюков я бы добавил:
                                            — при перемещении окошек по экрану, прозрачность под заголовком окна неправильная, показывается фоны которых под окном нету.
                                            — при некотором расположении окна на экране в левых скругленных уголках с прозрачностью появляются контрастные хвостики (смотрю в Хроме)
                                              +1
                                              "— при перемещении окошек по экрану, прозрачность под заголовком окна неправильная, показывается фоны которых под окном нету."

                                              это не фоны, а глянцевидные блестяшки при перемещении окна, ну или как-то иначе они могут называться
                                                0
                                                Кстати этот рефлекс бывает заметен на уголках вне зоны скругления. Видимо наложен на слой ниже.
                                                  0
                                                  >>это не фоны, а глянцевидные блестяшки при перемещении окна
                                                  как бы они не назывались, эффект работает неправильно (ни как в винде), выглядит как глюк.
                                                    0
                                                    Вы неправы. В Windows 7 прозрачность заголовка работает почти точно также, как и в приведенной демонстрации. Полупрозрачная «подложка» с бликами в заголовке окна в W7 только совсем немного (практически незаметно) перемещается в сторону движения при перемещении окна. В целом складывается впечатление о её неподвижности.
                                                      0
                                                      >>Вы неправы. В Windows 7…

                                                      Наша, Ваша — не понимать

                                                      Оффтопик:
                                                      В вин7 в панеле, под полупрозрачном заголовке окна, отображается именно то, что под окном есть. Если на моих «обоях» изображены блики и прочие граф. элементы — вот они и отображаются. Если на рабочем столе есть ярлыки — они и отображаются…

                                                      А вот в демо примере, в панельке куча каких-то левых бликов, которых под окном нету.
                                                        +1
                                                        Я вот это имею ввиду:

                                                          0
                                                          А я это:
                                                            0
                                                            То есть вы имели в виду отсутствие размытия заголовком окна фона в приведенном jquery-примере а не позиционирование добавочных бликов?
                                                              0
                                                              Нет.
                                                              Я имею в виду что если на рабочем столе бликов нет, то и в панельке бликов быть не должно.
                                                                0
                                                                Если они есть в Aero, почему их не должно быть у автора плагина?
                                                                  –1
                                                                  В том то и дело, что в Aero при такой ситуации их нету.
                                                                    +1
                                                                    Ну как же нет. Посмотрите внимательно на мои картинки. Блики не точно такие же, но очень похожие.
                                                                      –1
                                                                      >>Ну как же нет.
                                                                      Ну вот именно, что нет.
                                                                      Возьмите окошко и потаскайте его по рабочему столу (фон не белый). Аномалий никаких нет!

                                                                      То, что на белом фоне — это совершенно другая ситуация.

                                                                      Градиент (блики и пр.) в панельке при условии прозрачности — должен быть всегда, либо никогда. Иначе — это нелепо.
                                                                        +2
                                                                        Пожалуйста, вот фон не белый. Блики стали видны хуже, но они никуда не делись.

                                                                          0
                                                                          Пожалуйста, у меня бликов нет
                                                                            0
                                                                            В общем, попробуйте выполнить следующую последовательность действий: разверните любое окно на весь экран, затем, не сворачивая окна, наведите мышь на кнопку «свернуть все окна» (у вас она находится в правом нижнем углу рабочего стола, на панели пуск). Если вы всё сделали правильно, то вы увидите свой рабочий стол, покрытый бликами. Так вот, именно эти блики «проявляются», если вы позиционируете в местах их расположения полупрозрачные заголовки окон.
                                                                              –1
                                                                              В этом режиме — да, есть градиенты в той области, где раньше было окошко (но не на самом окошке). Но это не меняет ситуацию — в самом окне этого нет, его не видно.



                                                                                0
                                                                                А вот как у меня: раз,
                                                                                два. Ладно, думаю, мы оба уже перевыполнили норму по бессмысленному и бесполезному убеждению. Считайте, что у вас уникальный Aero.
                                                                                  0
                                                                                  >>Считайте, что у вас уникальный Aero.

                                                                                  И вот тому подтверждение.
                                                                                  То, что у вас, с градиентом, у меня — без :)
                                                                                  У меня правильнее :)
                                                                                    +1
                                                                                    Кстати, я сталкивался и с тем, и с иным поведением Аэро, только сейчас это понял. Интересно, от чего это зависит.

                                                                                    BTW: сам «эффект» (если это можно так назвать) выглядит (на странице с примером, не в винде) все же крайне топорно и нелепо, простите если что.
                                                                                    0
                                                                                    У Вас либо сборка левая, либо тема не стандартная. Видел в сети очень много «фиксов», типа «clear glass» без этих бликов. Никогда в оригинальном оформлении такого, как у Вас не было.
                                                                                      0
                                                                                      У меня оригинальная, лицензионная коробка (box, домашняя расширенная, 64bit, softkey).
                                                                                      Тема стоит по дефолту.
                                                                                        0
                                                                                        Возможно, по мнению микрософта, блики должны присутствовать лишь в Ultimate версии?
                                                                                          +1
                                                                                          пофигу мне эти блики.
                                                                                          мне и так очень нравится.
                                                                  +1
                                                                  Вроде как Chrome не использует нативный Aero
                                                                    0
                                                                    Использует. Вкупе с кастом отрисовкой элементов.
                                                      +1
                                                      Интересно. Пожалуй скачаю, на всякий случай.
                                                        +2
                                                        Проверена совместимость со следующими браузерами: Internet Explorer 6


                                                        Ага…

                                                        Image #890565, 54.8 KB
                                                          +5
                                                          Ну это собственно как в Win7 если Aero выключить :)
                                                            +4
                                                            «Упрощенный стиль» же
                                                              0
                                                              Однако окошки то есть :) Пусть и не такие красивые. Многие уже даже degrade-режимы не делают для IE6, а используют «заглушки и уведомления».
                                                              +2
                                                              Под линуксом это выглядит особенно аутентично :)
                                                                0
                                                                нужно переверстать с использованием спрайтов
                                                                  0
                                                                  хм, пардон, в фаербаге показывается, что они-таки есть. Но у меня почему-то доолго не обновлялась кнопка закрытия окна при наведении на нее
                                                                  +2
                                                                  Что то эффект Аеро я так и не увидел.
                                                                  Ведь в первую очередь это blur

                                                                  А декорации и прозрачность, этим не удивишь.
                                                                    0
                                                                    Лучше бы у меня на компе так firefox запускался… Щёлк! И нате вам.
                                                                      +4
                                                                      Один я запустил FireFox, в котором запустил эти окна, в которых запустил FireFox, в котором запустил эти окна, в которых запустил FireFox?
                                                                      habreffect.ru/files/c7f/65d132cee/R.png
                                                                        0
                                                                        мсье, Вы знаете толк в извращениях :)
                                                                          0

                                                                          Исходный браузер не тот, но идея та же ;)
                                                                          +5
                                                                          Ещё никогда создание окон с телекинетическими антивирусами не было таким лёгким!
                                                                            0
                                                                            Появляются глюки если ресайзить окно. Требуется допил.
                                                                            В целом реализация так себе.
                                                                            Но всё равно респект автору.
                                                                              0
                                                                              Забавно, автору бы только вспомнить, когда он в последний раз посещал сайты с оконным интерфейсом, и задуматься
                                                                                0
                                                                                Кстати, может такие еще остались?
                                                                                Интересно было бы посмотреть!
                                                                              –6
                                                                              ExtJS рулит!
                                                                                +5
                                                                                Очень красиво и очень бесполезно =)
                                                                                  +2
                                                                                  Не согласен относительно реплик о бесполезности оконного интерфейса в браузере. Они чрезвычайно полезны во Front-end'ах, например, аналитических системах и т.д. Но там такой «кучерявости» конечно не требуется. Достаточно аскетизма ExtJS.
                                                                                  +1
                                                                                  Фирменного Аеровского блюра нет — фигня. Плюс глючит нереально.
                                                                                    0
                                                                                    Показалось, что со спрайтами проблема при ховерекнопок. Оба состояния должны находится в одном файле, иначе видна задержка при дозагрузке второго спрайта!
                                                                                    Навёл на кнопку. а она моргнула
                                                                                      –1
                                                                                      Учитывая, что Aero абсолютно неудобоваримый интерфейс, его копирование ни к чему хорошему не приведет. Я бы советовал не подражать плохому примеру.
                                                                                        0
                                                                                        А что такого плохого в Аэро? Конечно, тяжелый, но красивый же, не?
                                                                                          0
                                                                                          Красота только в блюре, нет? Что может быть красивого в широченных бордюрах и здоровенных заголовках?

                                                                                          Красота интерфейса, как мне кажется, в первую очередь в удобстве использования. Все, что есть удобного в Aero — возможность кликнуть мышкой по окошку через Alt+Tab (и то, с багом, — клавиша Alt остается нажатой). Больше ничего в нем нет. Таскбар со времен Win95 никак не изменился, если открыто более 7 окон — он бесполезен. Интересно, да, что за почти 15 лет никаких новшеств в интерфейсе не появилось?..

                                                                                          Буквально пару дней назад пересел с лицензионной семерки на openSUSE, KDE. Настроил AIGLX, в разы удобнее и быстрее. Но на вкус и цвет…
                                                                                            0
                                                                                            Я буквально пару лет назад пересел с бета1 семерки на Mac OS X, и нисколько не жалею об этом — самый продуманный и «чистый» от всего лишнего интерфейс, который только возможен. Вот уж действительно где минимум свистоперделок, главное — ехать.

                                                                                            Что касается семерки — «неудобоваримый» и «бесполезный» все-таки разные слова! Таскбар не изменился? А его докоподобность в семерке? И какие новшества вы ждали? Еще стопитьсот кнопок на заголовке окна для всех возможных ненужных никому, кроме красноглазых юношей, действий? Интерфейс макоси (кроме дока) за пятнадцать лет тоже менялся ТОЛЬКО косметически — ну а нахрена меня то, к чему итак уже весь мир привык?
                                                                                              0
                                                                                              Мне не нужны никакие кнопочки, вот лучший интерфейс для виндовс habrahabr.ru/blogs/netbook/49509/ (на другом компе стоит, на мониторе 19"). Все, что я ждал — нормальная реализация alt+tab (и человеческие бордюры у окон). А блюр и тени — бесполезная херня. В Маке есть Expose. И ведь никакой таскбар больше не нужен!
                                                                                                0
                                                                                                Вы знаете, я не собирался с вами устраивать холивар, и тем более спорить о вкусах с человеком, который «лучшим» называет интерфейс в депрессивных черных тонах. Плюс я из принципа не пользуюсь нетбуками (из неуважения к ним), поэтом вопрос экономии пикселей меня не особо волнует.

                                                                                                Насчет ненужности Expose, даже на 19 дюймах, если открыто 30+ окон, без дока не очень-то удобно.

                                                                                      Only users with full accounts can post comments. Log in, please.