Как написать первый плагин на jQuery, с использованием ajax?

Опубликовано admin - вс, 06/03/2018 - 10:52

Возможно рано или поздно Вам придётся писать серьёзные скрипты на jQuery, поскольку jQuery наиболее популярен в последнее время. Использовать стандартные функции, которые описываются в руководстве jQuery ( http://slyweb.ru/jquerymain/ ) достаточно лишь начинающим, чтобы двигаться дальше, необходимо изучать более сложные примеры, в которых проявляется вся мощь jQuery. А где же сосредотачивается вся мощь jQuery? На мой взгляд именно в плагинах jQuery, в них нет простых примеров, нет пояснений, но есть лишь большой простор для развития творческой натуры веб-программиста. Поэтому советую Вам изучать jQuery не только на основе руководства jQuery, но и на основе плагинов jquery, благо их сейчас уже очень много. Но чтобы было проще разбираться мы попробуем написать один простой плагин реализующей отправку ajax запроса на сервер и использующей некоторые эффекты jQquery.

Для этого Вам понадобится jquery.js,jquery.ui.js,effects.core.js, effects.explode.js, effects.highlight.js и немного терпения.

Итак начнём. Плагин написать в jQuery можно используя несколько функций во взаимосвязи. Ими являются - jQuery.fn.extend(object) и jQuery.extend(object). Первая, по сути представляет средство для расширения пространиства имён jQuery, вторая содержит дополнительные объекты, за счёт которых происходит расширение.

Итак наш плагин будет называться MyPlagin, но прежде нам понадобится объект, который расширяет jQuery.

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

Далее мы переходим к созданию собственной функции на jQuery. Собственную функцию на jQuery можно создать следующим способом.

jQuery.fn.MyPlagin = function(option) {....ваш код...};

После этого нам нужно прменить функцию jQuery.extend(), следующим способом:

var current = jQuery.extend({},jQuery.IamjQuery,option);

Здесь переменная current содержит расширенный объект jQuery.

Теперь в основном содержании скрипта Вы можете получить доступ к расширенному объекту используя, например следующий синтаксис current.link (так Вы получите значение параметра link(extend/extend.php)).

Полсе этого нам понадобится эффект, имитирующий загрузку. За него отвечает следующий код.

Здесь функция bind() связывает события ajaxSend и ajaxComplete с определенными функциями, за счёт которых происходит, появление и скрытие изображения.

События ajaxSend и ajaxComplete возникают при начале отправки запроса на сервер и при его завершении.

Слдеовательно чтоб они появились необходим сам запрос. Вот он.

Здесь можно лишь пояснить следующее - функции animate() и effect() схожи, разница лишь в том что первая создаёт пользовательскую анимацию, вторая заранее ограничена определёнными эффектами (explode,highlight и тд.) и ещё в том что первая (animate) функция может применяется без дополнительных скриптов, effect() применяется лишь при установке дополнительных скриптов (effect.core, effects.explode.js, effects.highlight.js и тд).

Ответ от сервера формирует простой скрипт на php.

Чтобы было более удобно читать, ниже указан весь код.

В общем на этом разработка Вашего первого плагина окончена. Применить его можно так же как стандартую функцию jQuery. Надеюсь Вам понравилась статья и пример. 

Взаимосвязанные материалы

# 1. О сайте (суббота, июля 6, 2019 - 21:51 ),

Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.

На сегодняшний день slyweb.ru представляет следующие услуги:

читать...
# 2. Как написать первый плагин на jQuery, с использованием ajax? (воскресенье, июня 3, 2018 - 10:52 ),

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

# 3. jQuery для начинающих! (пятница, июня 1, 2018 - 21:28 ),

Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?". читать...

# 4. jQuery - самое нужное! Карусель! (воскресенье, мая 20, 2018 - 19:22 ),

Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель. читать...

# 5. Аудио плеер на основе HTML5 и jQuery (вторник, апреля 17, 2018 - 19:23 ),

Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.

Плеер будет поддерживать следующие функции:

читать...

Комментарии

На разработку сайта! Скидки до 20%!