Адаптивный макет в веб-дизайне является важной темой для обсуждения на данный момент. В основном адаптивный макет позволяет предлагать определенный и оптимизированный размер экрана в зависимости от того, какое устройство (мобильное устройство, планшет…) использует посетитель. Как правило, вы бы использовали Media Queries для изменения размера общего макета, но навигация, формы, изображения, ползунки, карусели … все они также должны быть оптимизированы. Вот почему мы даем вам нашу коллекцию из 10 плагинов jQuery, которые помогут вам оптимизировать и изменить размеры этих хитрых веб-элементов. Веселиться!
Похожие сообщения:
- 10 уроков по jQuery
- 10 плагинов jQuery для настройки вашей веб-страницы
- 8 Потрясающих плагинов макета страницы jQuery
1. Сетка Heads-Up
Построен с HTML, CSS и JavaScript. Heads-Up Grid — это адаптивная оверлейная сетка для разработки веб-сайтов в браузере. Он был создан для того, чтобы относительно легко адаптироваться к потребностям адаптивного веб-дизайна.
2. FitVids.JS
Это легкий и простой в использовании плагин jQuery для адаптивного встраивания видео в ширину. Он автоматизирует метод внутреннего соотношения Тьерри Кобленца, чтобы добиться гибкости видео в вашем адаптивном веб-дизайне.
3. AdaptiveMedia
С AdaptiveMedia вам нужен только один файл CSS для окон любого размера, не нужно LESS или такие же решения, не нужны CSS3 Media Queries. Менее 3 КБ, совместимы с HTML5 и IE6. Пользовательский обратный вызов: выполнение пользовательской функции до завершения всей работы.
4. rlightbox
Является мультимедийным интерфейсом jQuery UI, который может отображать различные типы контента, такие как изображения, видео YouTube и Vimeo. Он имеет множество уникальных функций, таких как Panorama и Live Re-size, и, как и другие виджеты jQuery UI, готов для ThemeRoller.
5. Эластислайд
Является отзывчивой каруселью jQuery, которая адаптирует свой размер и поведение для работы на любом размере экрана.
6. Адаптивная галерея изображений с миниатюрной каруселью
Используя плагин Elastislide (выше), этот метод покажет вам, как реализовать адаптивную галерею, которая адаптируется к ширине порта просмотра. Галерея будет иметь переключатель просмотра, который позволяет просматривать его с каруселью миниатюр или без. Также поддерживается клавиатурная навигация.
7. Бесшовные Отзывчивый Фотосетка
Поддерживает соотношение сторон ваших изображений.
8. Отзывчивый JQuery слайд-шоу
Этот пример позволяет создавать плавные слайд-шоу jQuery, которые масштабируются быстро. Это тот же метод, который используется на новом kiskolabs.com.
9. wmuSlider
Пожалуйста, имейте в виду, что он все еще очень сырой (на самом деле) и в соответствии с ЛИЦЕНЗИЕЙ MIT, что в основном означает: разбить его, украсть, но ПОДАРОК ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ»!
10. Двойной удар
Doubletake — это плагин, предназначенный для подтверждения концепции, который динамически обновляет src ваших изображений в зависимости от ширины браузера. Вы начинаете с небольшого мобильного изображения в вашем HTML. Затем Doubletake будет использовать определенный набор точек останова для обновления SRC изображений, когда это необходимо.
