JQuery: Полезные фрагменты кода для вашего сайта

JQuery является популярной JavaScript библиотекой, которая используется многими разработчиками и во многих приложенях. При использовании JQuery нужно писать меньше кода, написание функций является менее сложным, и есть много плагинов, которые можно использовать бесплатно в веб-приложения. Даже если вы пишете весь код самостоятельно, то требуется всего лишь несколько строк кода, чтобы создавать красивые и мощные функции для вашего сайта.

Заполнение select-меню с jQuery и Ajax
Одни из наиболее мощных функций в Ajax содержатся в Ajax Suite. В данном примере показано, как заполнять второе select-меню на основе выбора первого меню.
Например, у нас есть меню с главными категориями:

Если кто-либо изменяет значение в данном меню выбора, то нам нужно показать эквивалентное меню внутри элемента span с ID "subcat". Для этого мы используем следующий фрагмент JQuery, который выполняет Ajax запрос к PHP-файлу с именем "getSubCat.php". После того, как меню выбора изменяется, выводится изображение загрузки (в случае медленного Интернет-соединения), вызывается PHP сценарий и суб-меню выбора становится видимым.

Код PHP используется из файла getSubCat.php:

Это простой пример того, как можно использовать возможности Ajax, которые включают в себя много функций и придают большую гибкость.

Отключение/включение кнопки "Отправить" на форме с помощью JQuery
На страницах с регистрацией и формах заказа посетитель должен принимать некоторые условия сервиса, перед тем как продолжить заполнение формы. Очень хорошим способом реализации этого является отключение кнопки "Отправить", пока пользователь не установит какой-либо флажок (например: Я принимаю условия сервиса). Следующий фрагмент кода будет включать/отключать кнопку "Отправить" после того, как будет установлен или снят флажок.

Вместе с этой функцией мы используем следующий HTML код для кнопки "Отправить".

Простая фото галерея с уменьшенными изображениями
Если вы ищете легкий способ создания фото галереи, этот фрагмент кода для вас. Функция работает очень просто: если посетитель нажимает миниатюрное изображение, то значение из атрибута "href" передается в атрибут "src" большего изображения. Вот и все, посмотрите пример кода JQuery и, конечно, HTML.

Как скрывать и показывать элементы на основе выбора переключателя
В JQuery есть много отличных функций, чтобы показывать или скрывать HTML-элементы. Этот пример о том, как показать дополнительный список на основе выбора кнопки-переключателя. Сначала сценарий проверяет, что переключатель установлен и отображает дополнительный контейнер, в противном случае скрывает этот контейнер.

Фрагмент HTML кода включает в себя группу переключателей и DIV контейнер, который становится видимым, когда установлен переключатель со значением "creditcard".

Все примеры вы можете посмотреть на этой странице.