Pull to refresh

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

Reading time 3 min
Views 2.7K


Вместе с выходом 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 — интересный виджет. В этом топике я постарался описать все его параметры, для того, чтобы восполнить пробел в документации на официальном сайте. Надеюсь, кто-то найдет данную информацию полезной. Так же ожидаю в комментариях указаний на ошибки или неточности в статье.
Tags:
Hubs:
+25
Comments 48
Comments Comments 48

Articles