jquery это javascript библиотека(framework) которая упрощяет многие популярные действия с йаваскриптом делает их кросбраузерными и более легкими в написании. jQuery реально способен уменьшить количество строчек кода с множества строк до несколько строчек и в некоторых случаев даже до одной строчки.

Библиотека jquery работает с браузером Microsoft’s Internet Explorer с 6 версии и выше, Firefox с версии 1.5 и выше, Safari с версии 2.0.2 и выше, Opera с версии 9 и выше, и также с Google’s Chrome с версии 0.2 и выше.

Начать работать с jquery достаточно просто для этого нужно скачать и в заголовке html документа подключить его -

(далее…)

После введение в первую очередь научимся выбирать элементы DOM с помощью Selectors API. Использование селектора в jQuery очень похоже на использование css. C помощью Selectors API можем выбирать любой DOM элемент на веб странице. Для выборки части документа нужно использовать такую конструкцию – $(’.Dom элемент’). Знак доллара это функция в которой параметры это дом элементы. Вместо $ можно писать – jquery. $ является псевдоним для jquery.

Начнем с примера:
Файл 1.html

Файл 1.css

Файл 1.js

В файл 1.html подключаются файлы 1.css и 1.js. В нашем скрипте код jQuery исполняется до загрузки всего документа. То есть сразу после загрузки DOM элементов. Если бы мы загружали через body onload, тогда наш код выполнялся после загрузки всего документа включая и все изображения. Используя конструкцию $(document).ready() мы загружаем наш jQuery код до загрузки изображения.

Выбираем клас – newses c помощью конструкции $(’.newses’) и с помощью метода .addClass() добавляем клас replacenewses в div с класом newses. В нашем случае запись выглядела так – .addClass(’replacenewses’).

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

Скачать ThickBox тут. Для того чтобы данный плагин работал также нужно скачать саму библиотеку jQuery. Но если вы используете популярный движок например wordpress или drupal, тогда jQuery уже встроена в движок. В других случаях нужно скачивать и подключать.

Давайте для пример подключим библиотеку к обычной html страницы:

1. Скачиваем в одну папку сам thickbox, стили, изображение загруски и загружаем cаму библиотеку jQuery.
2. Создаем файл в папке в которую мы загружали thickbox.
3. Подключаем jquery и сам thickbox в заголовке документа -

4. Нужно зайти в thickbox.js и правильно прописать путь к изображению на строчке 8

В нашем случае путь на строчке 8 будет такой – “loadingAnimation.gif”.

Все успешно подключено теперь примеры.

Выводим фотографии – фотоальбом.

Для данного примера нужен jquery 1.2.6(На момент написание материала jquery 1.3.2 не работал с этим примером) Создаем папку img в нашей папке и помещаем туда фотографии.
Код Фотоальбома -

Для того чтобы большая фотка выводилась через thickbox нужно для изображения устанавливать class=”thickbox”. Чтобы фотки были в виде фотоальбома нужно писать rel с одинаковыми значениями, тогда во всплывающем окне появляются ссылки на следующею и предыдущею фотку. Если убрать rel тогда фотки будут независимы.

Наш пример выводит(кликните на фотку) –

На этом все. В следующем материале раскажу как подключать thickbox к wordpress и как выводить текст.
Всех благ!

Создаем папку jquery в корне сайта и в саму папку закидываем файл jquery-1.2.6.min.js. Затем в папке jquery создаем папку thickbox и в нее вставляем файлы loadingAnimation.gif, thickbox.css и thickbox.js. Где скачать эти файл я говорил в предыдущем материале.

Дальше с корня сайта переходим в папку wp-content/themes и там выбираем нашу тему. В теме открываем файл header.php и до тега вводим -

Все thickbox подключен.

Теперь в wordpress выведем html во всплывающем окне через thickbox

Для этого создаем отдельный html файл с любым содержимым. Я создал страницу с поздравлением с наступившим новым 2010 годом. Выведу эту страницу через thickbox. Весь процесс показан ниже:
1. Создаю html cтраницу в папке wp-content под названием – mypages
2. В папку mypages закидываю файл pozdravlenie.html, который будет выводится через thickbox. Содержимое файла -

3.Теперь создаем материал в админке wordpress и вставляем в него ссылку

Нажмите тут – Поздравление, что бы увидеть всплывающее окно.

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

В этой записи я покажу как можно загружать файлы без перезагрузки странице. Без данного функционала не обойтись например, в веб приложениях где очень не желательна перезагрузка. Например на сайтах где все данные получаются с помощью ajax. Не очень красиво будет если все получаем без перезагрузи, а загружаем файлы с перезагрузкой страницы. Эту проблему нам поможет решить отличный jquery плагин — Uploadify.

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

(далее…)

Когда вы комбинируете некоторую функциональную особенность php c jQuery. В результате у вас может получиться интересный результат. В этом обучающим руководстве мы создадим голосование, используя PHP и XHTML. Используем некоторые jQuery Ajax эффекты для того чтобы страница не перезагружалась и для добавления к голосованию немного анимации.

HTML

Давайте получим наш <head>. Установим:

– style.css управляет CSS разметкой.
– jquery.js главная jQuery библиотека
– jquery.cookie.js Плагин (автор – Klaus Hartl)добавляет управление куки в jQuery.
–poll.js это Javascript который делает голосование динамическим
(далее…)

Сегодня поговорим о замечательном jquery плагине – jQuery Treeview. С помощью этого плагина можно отображать дерево меню с вложенными данными. Например, если взять интернет магазин, то часто в магазине кроме категорий содержатся подкатегории, и если подключить Treeview к магазину, то нажав плюсик перед названием категории, ниже откроется cсылки на подкатегории.

Пример работы можно посмотреть по этой ссылке – http://jquery.bassistance.de/treeview/demo/.

Итак, первое, что нужно сделать, это подключить в заголовке html странице библиотеку jquery.js, также и сам скрипт Treeview — jquery.treeview.js и для работы с куки нам понадобится файл jquery.cookie.js. Хотя jquery.cookie.js не обязательно. Jquery.cookie.js нам понадобится, если мы хотим сохранять состояние открытого дерева. Итак, подключаем -

Дальше в заголовок странице добавляем такой код -
(далее…)