2. Розширення бібліотеки функцій jQuery plugins

jQuery дозволяє доповнювати бібліотеку методів власними функціями для використанні їх при розробці динамічних веб –сторінок. Останні називаються вбудованими інструментами (plugin) для маніпуляцій над DOM вузлами за допомогою ключового слова ‘this’ і таким чином приєднуються функції.

Послідовність методів утворює ланцюжок методів:

$("div")

.parent()

.css("heigth", "10px")

.fadeTo(0, 0.5)

.addClass("divOwner");

Зазвичай, JavaScript-плагіни розташовуються в окремих файлах. Для файлів з плагінами jQuery існує умова щодо їх назви - воно має задовольняти формату jquery.plaginName.js. Таким чином, файл потрібно назвати jquery. reverseText.js.

Якщо задати функцію через jQuery.fn, то вона буде працювати з елементами знайденими через функцію $ (). Контекст цієї функції буде містити вибрані елементи.

Якщо задати функцію через jQuery, то до неї можна звернутися тільки через глобальний об'єкт jQuery. В такому випадку контекст функції буде вказувати на глобальний об'єкт window.

jQuery.sayHello = function() {

alert('Привіт! Знайдено ' + this.length + 'елементів' );

}

$('div').sayHello(); // нічого не відбувається

jQuery.fn.sayHello = function() {

  alert('Привіт! Знайдено ' + this.length + 'елементів' );

}

$('div').sayHello(); // Виводить "Привіт! знайдено ХХ елементів", де ХХ - це кількість знайдених елементів на сторінці

Таким чином, якщо потрібно написати плагін, який буде працювати тільки з обраними об'єктами, то потрібно його створювати в jQuery.fn, а якщо нам неважливо які елементи сторінки були обрані, то краще створювати функцію через jQuery.

Вправа 6. Поданий нижче плагін – це метод друку текстового рядка у зворотному порядку. Розглянемо способи оголошеня такої функції. Існує два способи :

З неявним позначенням параметрів, які подаються пізніше:

Query.fn.reverseText = function(params) { ... };  

або з конкретними параметрами ( наприклад, minlength та maxlength).

Щоб уникнути можливих конфліктів назв у плагігі при використанні знаку $, код охопюється у конструкцію (function ($) {}) (jQuery) (подробиці див вопісаніі jQuery.noConflict ()):

(function($) {  

$.fn.reverseText = function(minlength, maxlength) { ... };  

})(jQuery);  

Тоді виклик здійснюється так:

$("p").reverseText(0, 100);  

viewВ першому способі для опису параметрів виористовується функція jQuery extend

params = $.extend( {minlength: 0, maxlength: 99999}, params);  

Отже, params.minlength є 0 і params.maxlength є 99999 поки не перевизначені змінні.

Тепер подамо безпосередньо код функції подачі тексту у зворотному порядку:view plainprint?

// traverse all nodes

  this.each(function() {  

// express a single node as a jQuery object  

var $t = $(this);  

// find text  

var origText = $t.text(), newText = '';  

// text length within defined limits?  

if (origText.length >= params.minlength &&  origText.length <= params.maxlength) {  

// reverse text  

for (var i = origText.length-1; i >= 0; i--) newText += origText.substr(i, 1);  

   $t.text(newText);  

    }  

});  return this;

Змінна this, в тілі методу, завжди містить поточний об'єкт jQuery (той, на якому і був викликаний метод). Для того, щоб обійти всі вибрані елементи окремо, використовуємо метод each (). А для можливості продовжити ланцюжок методів метод повинен повернути поточний об'єкт jQuery:

Повна функція має вигляд :view plainprint?

(function($) {  

  // jQuery plugin definition  

 $.fn.reverseText = function(params) {  

  // merge default and user parameters  

 params = $.extend( {minlength: 0, maxlength: 99999}, params);  

// traverse all nodes  

 this.each(function() {     

        // express a single node as a jQuery object  

var $t = $(this);  

// find text  

    var origText = $t.text(), newText = '';  

   // text length within defined limits?  

            if (origText.length >= params.minlength &&  origText.length <= params.maxlength) {  

    // reverse text  

          for (var i = origText.length-1; i >= 0; i--) newText += origText.substr(i, 1);  

                $t.text(newText);  

            }  

        });  

        // allow jQuery chaining  

        return this;  

    }; 

})(jQuery);  

Цей файл зберігається під назвою jquery.reversetext.js, і викликається у HTML сторінці після завантаження бібліотеки jQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  

<html lang="en">  

<head>  

<title>jQuery plugin: reverseText demonstration</title>   </head>  

<body>  

<h1>jQuery plugin: reverseText</h1>  

<p>This jQuery plugin reverses all the text in the selected nodes.</p>  

<ul>  

<li>This text will be reversed</li>  

<li>This text will not be reversed</li>  

<li>reversed</li>  

<li>not reversed</li>  

</ul>  

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

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

<script type="text/javascript">  

// reverse even-numbered LI tag text  

$("ul li:even").reverseText();  

</script>  

</body>  

</html>  

Перший і третій пункт списку будуть записані у зворотньому порядку.