Простые примеры jQuery

Сегодня уже почти никто не создаёт сайты на чистом html, это скучно и не интересно. С появлением библиотеки jQuery и ей подобных веб-страницы стали динамичнее и лучше. В этой статье я специально собрал простые примеры на jQuery, чтобы вы могли увидеть на что способен jQuery.

Для каждого примера я привожу его исходный код и демо для просмотра в действии. Итак, начнём по-порядку с самого простого.

В начале работы, чтобы иметь возможность использовать jQuery, необходимо подключить эту библиотеку в теге <head>

<script type="text/javascript" src="/jquery.min.js"></script>

Саму библиотеку можно скачать на официальном сайте jQuery.com

Да, ещё один нюанс, на этой странице приведены примеры только в целях ознакомления, помните, что некоторые из них могут некорректно работать в старых браузерах и особенно это касается любимого Интернет Эксплорера.


Открывающийся блок

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

Вариант 1

Открыть/закрыть

HTML + CSS + JQUERY

Закрыть

Открывающийся блок (вариант 1)

html-код:

css-код:

jQuery-код:

Вариант 2

Рядом со ссылкой, после клика по которой открывается блок информации, можно вставить изображения "плюс" и "минус". Я не стал вставлять картинки, вы сможете сделать это самостоятельно, я лишь покажу вам пример реализации.

+ открыть

HTML + CSS + JQUERY

Закрыть

Открывающийся блок (вариант 2)

html-код:

css-код:

jQuery-код:

Вариант 3

Наконец, можно сделать открывающийся блок при отмеченном чебоксе (при установке "птички").

пункт 1
пункт 2

HTML + CSS + JQUERY

Закрыть

Открывающийся блок (вариант 3)

html-код:

css-код:

jQuery-код:

Эти примеры вы можете применить на своём сайте, это немного оживит его. Что ж, смотрим следующие примеры.


Отмечаем все chekbox одним кликом

Подобная функция есть на сайте mail.ru, когда нужно отметить в своём почтовом ящике все письма и произвести с ними некоторые действия. В этом примере я покажу как отметить все чебоксы одним кликом на jQuery.

Вариант 1

Отметить все

чебокс 1

чебокс 2

чебокс 3

чебокс 4

чебокс 5

HTML + CSS + JQUERY

Закрыть

Отмечаем все chekbox одним кликом (вариант 1)

html-код:

css-код:

jQuery-код:

В первом варианте есть один недостаток, хотя это как посмотреть. Обратите внимание, если до клика по ссылке "Отметить все" были отмечены какие-то чебоксы, то после клика происходин инверсия, выделяются пустые, а отмеченные наоборот становятся пустыми. Во-втором варианте, независимо от предыдущих действий, выделяются все чебоксы.

Вариант 2

Отметить все

чебокс 1

чебокс 2

чебокс 3

чебокс 4

чебокс 5

HTML + CSS + JQUERY

Закрыть

Отмечаем все chekbox одним кликом (вариант 2)

html-код:

css-код:

jQuery-код:

С помощью таких нехитрых скриптов можно значительно усовершенствовать свой сайт.


Заполни поле

В этом примере пользователю дают подсказку, что в поле нужно ввести своё имя, если поставить курсор в поле, то надпись исчезнет и наоборот до тех пор, пока пользователь не введёт своё имя.

HTML + CSS + JQUERY

Закрыть

Заполни поле

html-код:

css-код:

jQuery-код:


Счётчик символов

С помощью jQuery мы можем подсчитывать сколько символов пользователь ввёл в текстовое поле.

Введите имя:

HTML + CSS + JQUERY

Закрыть

Счётчик символов

html-код:

css-код:

jQuery-код:


Проверка полей с помощью jQuery

Обычно проверка введённых данных начинается в момент нажатия на кнопку "Отправить", "Зарегистрироваться" и т.п. Проверка производится средствами php и в принципе это наиболее правильный вариант, но, в случае возникновения ошибок пользователю придётся повторять нажатие на кнопку, поэтому в целях экономии времени и ресурсов можно производить дополнительную проверку с помощью jQuery, естественно, без перезагрузки страницы.

Введите имя:

HTML + CSS + JQUERY

Закрыть

Проверка полей с помощью jQuery (проверка имени)

html-код:

css-код:

jQuery-код:

Чтобы проверить введённый емаил требуется немного иной подход.

Введите e-mail:

HTML + CSS + JQUERY

Закрыть

Проверка полей с помощью jQuery (проверка емаил)

html-код:

css-код:

jQuery-код:


Выпадающее меню

На jQuery можно сделать отличное выпадающее меню, причём исходный код такого меню будет исключительно коротким благодаря данной технологии.

Вариант 1

HTML + CSS + JQUERY

Закрыть

Выпадающее меню (вариант 1)

html-код:

css-код:

jQuery-код:

Вот такое интересное меню, но это не всё, если поиграть тегами и стилями, то можно получить и другие варианты меню для ваших сайтов.

Вариант 2

HTML + CSS + JQUERY

Закрыть

Выпадающее меню (вариант 2)

html-код:

css-код:

jQuery-код:

Вариант 3

HTML + CSS + JQUERY

Закрыть

Выпадающее меню (вариант 3)

html-код:

css-код:

jQuery-код:

Вариант 4

Пункты в этом меню раскрываются по клику

HTML + CSS + JQUERY

Закрыть

Выпадающее меню (вариант 4)

html-код:

css-код:

jQuery-код:

Вариант 5

HTML + CSS + JQUERY

Закрыть

Выпадающее меню (вариант 5)

html-код:

css-код:

jQuery-код:


Таймер на jQuery

Часто вебмастера ищут скрипт таймера, в результате работы которого вместо чисел должна появиться ссылка для скачивания файла, вот вам рабочий вариант такого таймера на jQuery.

Пуск

В исходном коде приведен вариант без кнопки запуска таймера, т.е. он начнёт отсчёт после загрузки страницы. HTML + CSS + JQUERY

Закрыть

Таймер на jQuery

html-код:

css-код:

jQuery-код:


Плавающий или фиксированный блок на jQuery

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

Обратите внимание, что в первом варианте плавающий блок не подымается выше блока с чёрной рамкой, но может опускаться ниже него.

Вариант 1

Плавающий блок DIV

Контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент

HTML + CSS + JQUERY

Закрыть

Плавающий блок DIV (вариант 1)

html-код:

css-код:

jQuery-код:

Вариант 2

Во втором случае блок плавает в пределах блока с чёрной рамкой.

Плавающий блок DIV

Контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент

HTML + CSS + JQUERY

Закрыть

Плавающий блок DIV (вариант 2)

html-код:

css-код:

jQuery-код:


Выезжающее меню на jQuery

В последнее время часто на сайтах можно увидеть выезжающие блоки, обычно для добавления отзыва о сайте. В этом примере смотрим как сделать свой собственный выплывающий блок, кстати, он с самого начала просмотра данной страницы плавает слева со ссылкой "open".

HTML + CSS + JQUERY

Закрыть

Выезжающее меню на jQuery

html-код:

css-код:

jQuery-код:


Переключение закладок на jQuery

Вы можете значительно сэкономить место на сайте, если для небольших блоков контента будете использовать вот такие вкладки на jQuery.

Вариант 1

Описание
HTML
CSS
jQuery

Блок с закладками может значительно сэкономить место на ваших веб-страницах.

html-код:

css-код:

jQuery-код:


Вариант 2

Теперь закладки слева.

Закладка 1
Закладка 2
ГАЛЕРЕЯ
КОД

Заголовок 2

Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.

Переключение закладок на jQuery

Исходный код данных закладок на 4-й вкладке.

Простая фотогалерея на jQuery

Закладки на jQuery

html-код:

css-код:

jQuery-код:



Определение IP-адреса сайта по его домену на лету

Выше я показал исключительно возможности jQuery, которые просто поражают своими возможностями по сравнению с обычными html-страницами. Однако jQuery способен на большее, нежели спецэффекты на странице. jQuery в связке с php могут совершать настоящие чудеса, ниже я приведу вам простейший пример как можно на лету, без перезагрузки страницы определить IP-адрес доменного имени.

Введите в поле ниже адрес своего сайта и узнаете его IP-адрес.

пример: mail.ru

Заметьте, проверка IP-адреса происходит моментально и при этом не нужно ждать, пока страница перезагрузится. Вы можете посетить страницу одного из моих сервисов по определению IP-адреса домена и посмотреть этот же скрипт только с перезагрузкой страницы, вы сразу почуствуете преимущества связки jQuery + PHP по стравнению с обычным PHP.

А мораль такова: Учите php!


Copyright © computerlessons.mega8.ru, 2007 - 2024. Все права защищены.

Информация