Инструменты jQuery представляет собой набор наиболее важных компонентов пользовательского интерфейса для Интернета. Это вкладки, аккордеоны, всплывающие подсказки, оверлеи и прокручиваемые элементы. Они могут значительно улучшить удобство использования и скорость отклика вашего сайта. В основном они сосредоточены на представлении информации и визуальной привлекательности. В конце концов, это именно то, чего отчаянно хочет большинство веб-сайтов: представить свой контент читателю в простой и визуально приятной форме.
Другие библиотеки пользовательского интерфейса JavaScript сосредоточены на функциях, подобных настольным, таких как перетаскивание, ползунки, сортируемые таблицы или перетаскиваемые окна. Они предназначены для создания «богатых интернет-приложений» (RIA), таких как почтовые клиенты, диспетчеры задач, органайзеры изображений или средства просмотра каналов. Веб-сайты — это не настольные приложения. Они разные.
Самым захватывающим фактом об этой библиотеке является то, что один файл JavaScript весит всего 5,59 Кб! Этот файл можно добавить на ваши страницы из бесплатной сети доставки контента (CDN), чтобы он быстро загружался вашим клиентам, где бы они ни находились.
Вам не нужно быть программистом, чтобы использовать эти инструменты. и вы можете скопировать их исходный код на свой сайт, и все будет работать. Каждый инструмент используется аналогичным образом, и, изучив один инструмент, вы легко сможете освоить другие инструменты.
В этом руководстве представлены некоторые основные функции каждого инструмента. Мы только царапаем поверхность здесь. Если вы хотите увидеть больше, веб-сайт инструментов jQuery предлагает множество демонстраций для изучения.
jQuery Tools имеет открытый исходный код и распространяется под двойной лицензией MIT и GPL 2+.
Инструменты jQuery / Наложение
Начнем с инструмента Overlay. Его можно использовать для наложения любого вида HTML поверх основного документа различными способами. Наложение HTML поверх основного документа — одна из наиболее распространенных функций современных веб-сайтов. Вам нужны разные типы наложений для разных ситуаций, таких как:
- Великолепно выглядящие оверлеи для отображения ваших продуктов.
- Простые и быстрые наложения для отображения информации или предупреждений.
- Модальные диалоги для подсказок и предупреждений пользователей.
- Галереи изображений в стиле «лайтбокс».
Этот инструмент обрабатывает все эти различные ситуации, предлагая гибкую структуру эффектов. Вы можете использовать тот эффект, который наиболее подходит для данной ситуации.
Настройка HTML
Вот настройка HTML для приведенного выше примера.
Berlin Gustavohouse
The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in 1998 by the Spanish artist Gustavo.
Настройка JavaScript
// select elements and make them trigger an overlay
$("#overlaytrigger").overlay({effect: 'apple', expose: '#004C7D'});
Вы выбираете один (или несколько) элементов из документа для триггеров наложения с помощью селектора jQuery. После этого вы звоните в наложение функция инициализации с различными вариантами конфигурации. разоблачать Свойство конфигурации задает цвет «маски», которая размещается поверх документа. эффект определяет используемый эффект отображения/скрытия.
Если вы хотите полностью понять эту настройку, мы рекомендуем вам изучить минимальную настройку для оверлея. Вот еще одна демонстрация, которая демонстрирует эффект Apple для наложения.
Инструменты jQuery / Подсказка
Всплывающие подсказки — один из самых важных виджетов JavaScript в Интернете. Хотя они важны, они также оказываются очень плохо понятыми и плохо реализованными компонентами. Этот инструмент исправляет ситуацию. Вы получите профессиональное программное обеспечение, которое легко понять и использовать.
Настройка HTML
Все, что вам нужно, это элементы триггера и элемент всплывающей подсказки. Все аспекты могут быть оформлены с помощью CSS:
Настройка JavaScript
// select elements that will have tooltips
$("#tooltips img").tooltip({
tip: '#tooltip',
offset: [-15, 2],
effect: 'slide'}
// use dynamic plugin to take care of the repositioning of the tip
).dynamic();
Вот минимальная настройка для всплывающей подсказки.
Здесь мы используем подсказка инструмент вместе с динамичный
плагин который заботится о перемещении всплывающей подсказки, если она не вписывается в область просмотра браузера. Так же, как и у инструмента «Наложение», у всплывающей подсказки также есть рамки эффекта где вы можете указать, как всплывающая подсказка отображается/скрывается. Если вы владеете JavaScript, вы можете создавать свои собственные эффекты.
Инструменты/вкладки jQuery
Вкладки, безусловно, являются самым популярным компонентом пользовательского интерфейса в Интернете. И не зря: они интуитивно понятны, люди к ним привыкли, и, прежде всего, вы можете организовать свои страницы более удобным для пользователя способом. Он может загружать содержимое панели с сервера, поддерживает различные эффекты и имеет надежную структуру плагинов. Вы также можете использовать кнопки браузера назад/вперед для перехода между вкладками.
Настройка HTML
У нас есть вкладки и контейнер для содержимого. Область содержимого называется «панелью». Снова. Все можно стилизовать с помощью css.
.. контент №1 ..
.. содержание #2 ..
.. контент №3 ..
Настройка JavaScript
$("ul.tabs").tabs("div.panes > div").history();
Мы выбираем одну или (несколько) вкладок и ассоциативные панели. история Плагин заботится о кнопках назад/вперед в браузерах.
Если вы хотите полностью понять эту настройку, мы рекомендуем вам изучить минимальную настройку для вкладок.
Инструменты jQuery / Прокручиваемый
Scrollalble позволяет легко добавлять на веб-сайт настраиваемые функции прокрутки. Всякий раз, когда вы хотите прокручивать элементы HTML визуально привлекательным образом, это инструмент, который вам нужен. Вот несколько примеров сценариев, в которых вам будет полезно использовать библиотеку:
- Каталоги продукции
- Ленты новостей
- Пользовательские поля выбора в формах
- Галереи изображений
- Плейлисты видео
- Все виды навигационных систем
Настройка HTML
Настройка JavaScript
$("div.scrollable").scrollable().navigator().mousewheel();
Выберите один (или несколько) прокручиваемых элементов на странице и сделайте их прокручиваемыми. Укажите количество видимых элементов в конфигурации. Мы используем навигатор плагин для прокрутки, чтобы разместить эти маленькие навигационные «точки» над прокручиваемой и колесико мыши плагин для включения прокрутки с помощью колесика мыши.
Ищите более подробное объяснение настройки прокрутки на веб-сайте jQuery Tools. Обратите внимание, что каждый отдельный элемент вышеуказанной установки может быть изменен. Это включает в себя поведение и стиль. Вы также можете сделать вертикальную прокрутку.
Инструменты jQuery/Flashembed
Сегодня роль JavaScript возрастает с огромной скоростью. Все основные поставщики браузеров соревнуются друг с другом, пытаясь создать лучший в мире движок JavaScript. Мы можем ожидать, что на рынке будет появляться все больше и больше виджетов и вкусностей JavaScript. Не только эти инструменты. При этом технология Flash по-прежнему играет важную роль в Интернете. Особенно, когда вы хотите воспроизводить видео, конкуренции практически нет.
Flashembed — это инструмент JavaScript, который вы можете использовать для встраивания объектов Flash на свой веб-сайт. Существуют и другие инструменты для встраивания объектов Flash, но ни один из них не предлагает такой же гибкости и простоты использования, как этот. Здесь мы установили три Flash-объекта с помощью простой однострочной строки:
$("a.clock").flashembed("clock.swf");
А вот и наша настройка HTML.
Результат
Очень мощный.
Заключение
Рекомендуется начать разработку своих страниц без использования JavaScript. Есть много примеров высокофункциональных, красивых и удобных веб-сайтов, которые не используют JavaScript. Цель этой библиотеки — дополнить существующий сайт большими возможностями, которые могут предложить современные технологии JavaScript. По сути, это идея «прогрессивного улучшения», которая сегодня является распространенным шаблоном проектирования. Вы должны понимать, что высокопрофессиональные сайты не злоупотребляют JavaScript только ради удовольствия. Скрипты используются только тогда, когда они действительно делают страницы более читабельными и удобными для пользователя. Вот где эти инструменты вступают в игру.
jQuery Tools — это не фреймворк с крутой кривой обучения, большим количеством предварительной работы и строгими правилами написания кода. Вы не привязаны к каким-либо предопределенным структурам HTML или CSS. Вы можете включить библиотеку на свои страницы и сразу начать ее использовать. Вы можете свободно создавать внешний вид своего сайта или использовать дизайн, который есть в наших демонстрациях, в качестве шаблона.
Эти инструменты можно легко комбинировать. Подумайте о прокручиваемых элементах, которые запускают оверлеи или оверлеи, которые содержат прокручиваемые элементы вместе с всплывающими подсказками или любой другой комбинацией, которую вы можете себе представить. Возможности безграничны. А если этого недостаточно, вы можете использовать огромную мощь библиотеки jQuery. Много раз вы видели, как реализованы сложные компоненты JavaScript, которые можно реализовать всего несколькими строками кода jQuery. Для многих веб-сайтов это может быть единственная необходимая библиотека JavaScript.
Старая философия дизайна UNIX «инструменты, а не политика» очень важна в веб-дизайне.