Сегодня мы рады видеть нашу первую гостевую запись в нашем блоге jQuery. Bastien Liutkus из Binary Mind — дизайнер и разработчик внешнего интерфейса в CBS во Франции. Он разработал Magic jQuery — плагин, который прост в использовании, гибкий и оптимизированный плагин для управления веб-макетом и управления взаимодействием с пользователем. Плагин размещен на официальном сайте jQuery: http://plugins.jquery.com/project/Magic .
Посмотреть демо
Страница загрузки
О плагине
Magic jQuery был впервые создан для удовлетворения потребностей огромного трафика и SEO-зависимых веб-сайтов и, следовательно, его особенностей:
- минимальный размер плагина и оптимизирован для сокращения времени загрузки страницы (сжатые 35 КБ)
- очень гибкий, чтобы иметь возможность кодировать множество шаблонов и различного рода взаимодействия за очень короткое время (я один здесь на переднем крае для 5 сайтов с огромным трафиком).
- Помощь SEO благодаря независимости позиции контента и его видимого места на веб-странице (например, subMenus, которые находятся вверху страницы для пользователя, но в конце для Google)
- совместимость со старыми браузерами и прозрачное кодирование для специфического поведения планшетов / смартфонов.
Технические аспекты
Технически плагин имеет 5 основных аспектов:
- Позиция: любой элемент может иметь фиксированный | абсолютная позиция с переводящим смещением, если необходимо
ex1: вы хотите, чтобы #myElement имел фиксированную позицию, которую вы написали бы: $ (‘# myElement’). setPosition (“fixed”);
ex2: вы хотите, чтобы #myElement имел фиксированную позицию по смещению (40px, 100px), которую вы бы написали: $ (‘# myElement’). setPosition ({position: ‘fixed’, offset: {left: 40, top: 100) }); - Выровнять: вы можете выровнять любой элемент к любому другому или к экрану в любом направлении.
ex1: вы хотите выровнять подменю по левому или нижнему краю menuItem, который вы бы написали: $ (‘# subMenu’). align ({topIsBottomOf: ”menuItem”, слева: ”menuItem”}); - Ограничение: вы можете остановить естественное движение любого элемента, ограничив его любым другим элементом или экраном.
ex1: вы хотите, чтобы #myElement никогда не выходил на экран при прокрутке: $ (‘# myElement’). limit ({top: ””});
Примечание: в основном любое странное сочетание выравнивания / ограничения и положения работает, поэтому вы можете начать думать о забавных вещах. - Меню: целью является объединение реализации каруселей, меню, мега выпадающих меню, вкладок и т. Д. Все это меню. Легко связать подменю с элементом и добавить к нему некоторые параметры, если это необходимо для специализированного поведения.
например: $ («# anElement»). setSubMenu («mySubMenu»)
Действия меню: openMenu, closeMenu, openNext, openPrev, воспроизведение, остановка - Сообщения: вы можете создавать сообщения из любого элемента. При желании вы можете указать много параметров, таких как, конечно, его html-содержимое, его относительное положение, время жизни, которое он имеет, если мышь не проходит над ним, и т. Д.
Автор: Бастьен Люткус из Binary Mind — разработчик и дизайнер фронт-энда в CBS во Франции.
Связаться с автором