UI: magnifier — описание всех функций



    Вместе с выходом jQuery UI 1.6rc2 появились новые виджеты, один из которых Magnifier. Это интересный элемент управления, который может разнообразить дизайн на странице. К сожалению, описание этого виджета отсутствует на странице официальной документации и этот пост призван восполнить пробел и описать все параметры виджета Magnifier.
    обращаю внимание, что это мои личные исследования виджета и полученные результаты могут не совпадать с финальной версией или с документацией, которую выпустят разработчики, которые могут оставить недокументированными некоторые из найденных параметров


    distance


    значение по умолчанию: 150

    указывает расстояние (от центра изображения), с которого изображения начинают реагировать на мышь и изменять масштаб
    $("#mag").magnifier({distance: 300});


    magnification


    значение по умолчанию: 2

    указывает максимальный коэффициент увеличения изображения
    $("#mag").magnifier({magnification: 3});


    baseline


    значение по умолчанию: 0

    похоже, это будет недокументированный параметр, он влияет на css-свойство top для изображений. При изменении значений magnifier ведет себя неадекватно, используйте осторожно.
    $("#mag").magnifier({baseline: 0});


    verticalLine


    значение по умолчанию: -0.5,

    более адекватное свойство, которое влияет на css-свойство left для изображений
    $("#mag").magnifier({verticalLine: 0});


    items


    значение по умолчанию: "> *"

    очень полезное свойство, которое позволяет задать элементы участвующие в масштабировании. Используя это свойство можно сделать так, чтобы изображения имели ссылки, по умолчанию обернутые в тэг «a» изображения не масштабируются. С этим свойством, можно обойтись без использования свойства «click». Так же это свойство позволит фильтровать элементы, которые должны масштабироваться.
    $("#mag").magnifier({items: «img.sample»});


    click


    указывает функцию, которая будет вызвана при нажатии на изображение. Функция имеет два параметра: указатель на div, опции которые содержат: опции с которыми был выполнен magnifier (options), указатель на текущее изображение (current) и указатель на следующее изображение (currentOffset).

    $("#mag").magnifier({
    click: function(e, opt) {
    if (opt.current.alt != «later») {
    document.location = «hd/»+opt.current.alt;
    }
    }
    });


    overlap


    значение по умолчанию: false

    принимает значение true или false. Указывает на то, как будут себя вести масштабируемые изображения, будут ли они перекрывать друг друга.
    $("#mag").magnifier({overlap: true});

    opacity


    устанавливает диапазон прозрачности неактивного и максимально отображаемого элементов
    $("#mag").magnifier({
    opacity: {
    min: 0.6,
    max: 1.0
    }
    });


    zIndex


    для неактивного состояния magnifier задает z-index всему div, для активного состояния, когда элементы начинают реагировать на положение курсора мыши, z-index задается только для текущего выбранного элемента.
    $("#mag").magnifier({zIndex: 2});


    axis


    свойство принимает значения «x» или «y». В зависимости от параметра растягивает изображения по оси Х или У. Второй вариант растягивает все изображения сразу, первый выглядит более интересным.
    $("#mag").magnifier({axis: «x»});


    Заключение


    Magnifier — интересный виджет. В этом топике я постарался описать все его параметры, для того, чтобы восполнить пробел в документации на официальном сайте. Надеюсь, кто-то найдет данную информацию полезной. Так же ожидаю в комментариях указаний на ошибки или неточности в статье.
    Поделиться публикацией

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 48

      +1
      Притормаживает значительно. Хоть и машина у меня слабенькая, но этот увеличитель — непозволительная роскошь и функционал небольшой.
        0
        можно системные характеристики вашей машины?
          0
          Можно:
          Celeron 1800 MHz, 512 MB — ubuntu 8.10b
            –2
            Мне кажется может быть проблема именно в последнем символе вашего поста;)
            Ждите стабильного релиза и тогда протестите.
              0
              ubuntu 8.04, Windows XP,
              Intel Pentium 4 (по 3GHz два ядра), 1024 Ram
              Opera, Firefox (на обоих платформах)

              Тормозит просто отлично.
              Особенно порадовало сколько всего грузится при начальной загрузки — 691 KB.
                –1
                про линукс уже можно не писать, все поняли что jQuery UI на нем тормозит страшно

                про размер: посмотрите что он грузит и все поймете, подгружаются десятки статики для других примеров и локализации
                  0
                  WinXP, Celeron 2.67, 2GB RAM

                  Chrome/FF3/Opera — не тормозят.

                  IE7 — подтормаживает на полупрозрачных, но это закономерно.
                  0
                  Приношу извинения, действительно не от релиза зависит. У меня под FF2, FF3, Opera, Arora, Konqueror — везде тормоза.
                  Мне кажется с данной задачей флеш справился бы намного лучше.
                  0
                  машинка С2D 2200 2Gb Ram Ubuntu 8.04 Firefox 3.0.3 тормозит значительно.
                0
                сейчас проверил на субноуте с 800Мгц все работает отлично, в ie6 не тормозит ни капли
                  0
                  core2duo примерно на 1600MHz, 2GB RAM, gentoo, FireFox 2.0.0.17.
                  тормозит адски.
                    0
                    что не везет линуксу
                    хотел бы взглянуть на тормоза, но как?
                    может ролик заснимите :)
                      0
                      *что-то
                        +3
                        На линуксе в FireFox'е JS-эффекты тормозят. Проверено на CentOS также. Почему — не задавался вопросом.
                        0
                        я б заснял, но не знаю как =)
                        не тормозит только если ооооочень медленно мышку везти. чуть быстрее — и все рывками
                          0
                          ну тогда у меня точно такого нет, я мышью дергаю туда-сюда и все в порядке
                          аномалии, не иначе как нло
                            –1
                            протестил на 3ем на той же машине — все гладенько =)
                      0
                      Core 2 Duo 2.8 gHz, 4 Gb RAM, Windows Vista SP1, Firefox 3.0.3.
                      А6налогично адские тормоза. В IE8 — тормоза примерно третьего круга ада.
                        0
                        я в печали, потому что либо у нас разные понятия «тормоза», либо magnifier тормозит выборочно
                        потому что ни в ie8b2, ни в ff 3.0.3, ни в chrome, ни в opera 9.52 тормозов я не наблюдаю
                        страница грузится очень долго (это общая проблема сайта), но тормозов в работе виджета нет

                        PS: в опере, кстати отображается хуже всего
                          +1
                          Страница грузится долго — да, но я никак не связываю это с Javascript'ом.
                          Но вот то, что картинки «дёргаются», и нормально всё это счастье работает только при очень плавном движении мышкой, я и называю тормозами.
                          Кроме того, в Firefox временами на доли секунды пропадает вся страничка, оставляя только фон.
                            0
                            у меня такого нет
                              0
                              Нам везёт по-разному :)
                      +1
                      Хм… Core Duo 1.66 / 2Gb RAM / Win XP Pro / Firefox 3.0.3 — тормозов не отмечено. В IE 7 тоже нет, только выглядит намного хуже. Процессоры не грузятся более, чем наполовину.
                        0
                        у меня на двухядерном пне 2.8 под винду ХР в хроме тормозит.
                          +1
                          Проблема не с работой самого скрипта, а с отрисовкой эффектов.

                          Поставьте драйвера для вашей видеокарты и будьте счастливы.
                            0
                            Что-то вы не то говорите.
                            Результаты на моей рабочей машине

                            последняя версия проприетарных драйверов,
                            firefox 3.0.3
                            Processor: AMD Sempron(tm) Processor 3000+
                            Memory: 449MB (297MB used)
                            Operating System: Ubuntu 8.04.1
                            OpenGL Renderer: GeForce 6100 nForce 400/PCI/SSE2/3DNOW!
                            X11 Vendor: The X.Org Foundation

                            Всё точно так же тормозит, как и дома на машине с карточкой ATI
                              0
                              В силу небольшого опыта работы с Linux, не могу подсказать в чем ваша проблема. Поэтому говорю за себя.

                              После установки драйверов на свою nVidia карточку, все стало замечательно.
                              FF стоит последний. В Opera и Konqueror тоже все ок.
                          0
                          Хм… страница с примером грузилась 26 секунд. Я еле дождался, и чуть было не свалил.

                          В Хроме не совпадает движение курсора с движением «часиков».
                            0
                            длительная загрузка — это проблема сервера UI там все страницы так грузятся, даже без скриптов

                            хром посмотрел, несовпадение есть, но по моему незначительное, думаю к релизу и того и другого проблем не станет
                              0
                              несовпадение значительное — ровно в противофазу
                              Это у вас глаз присмотрелся, а я когда первый раз хромым зашел вообще не понял что это такое :)
                                0
                                надеюсь поправят или одни или другие
                            +1
                            >>появились новые виджеты
                            именно магниферу больше года точно :)
                            когда-то понравилась эта красивая вещь, но где его использовать в голову не пришло. Да и ui, увы имеет хороший вес.
                              0
                              его убирали из одного из релизов
                              теперь вернули :)
                              0
                              Если у первого демо сделать View Source, 2 нижних глючат.
                                0
                                ага, это баг
                                с динамкой на странице виджет не дружит
                                +1
                                Беспонтовый плагин. Жуткие тормоза вряд ли понравятся конечным пользователям.
                                  +2
                                  Что-то похожее на Mootools — MooFlow
                                    +2
                                    нифига не похоже, но MooFlow прекрасен :)
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      +1
                                      для запуска всего-то и надо было четырехядерную станцию :)
                                      у меня везде не тормозит, я даже не понимаю, как эти тормоза выглядят, если честно
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          0
                                          могу только надеяться что к релизу тормоза уменьшаться или исчезнут
                                            0
                                            в сторону: как всегда большинство комментов в топике не по теме статьи а около того
                                            статья про api виджета, но народ испытал его на скорость :)
                                            это хорошо, не расслабишься
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                        0
                                        Хм… год назад задействрвал его в своём проекте. Отлично получилось, а ля Мак.
                                          0
                                          Тормозов я не замечал ещё пару лет назад, когда он был обычным плагином.
                                            0
                                            Не знаю как у вас чувак, а у меня на аймаке в ФФ ничего не тормозит.
                                              +1
                                              Описываемы тормоза под линуксом — не результат медленной работы js вообще или jQuery в частности. Проблема в отрисовке эффектов и отсутствии драйверов для видео.

                                              Когда работал над своим проектом, делал галерею на Lightbox'e для jQuery. Тормозило все жутко. Но т. к. основная наша аудитория сидит под виндовыми браузерами, решили на тормоза не обращать внимания.

                                              Через какое-то время я решил поставить драйвера для своей видеокарты. Загрузил их с сайта производителя, установил и продолжил работать с проектом. Тормоза на отрисовке Lightbox'a исчезли.

                                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                              Самое читаемое