главная

Теги:


Конвертируем код jQuery в плагин

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

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

Идея

Написание плагина jQuery является очень простым процессом. Нужно расширить объект $.fn своей функцией. Более сложной задачей будет определение корректной структуры кода так, чтобы плагин было легко использовать и встраивать, без зависимостей.

Есть несколько задач, которые надо решить при конвертировании кода урока в плагин jQuery:

  1. Нужно дать пользователю возможность контролировать то, какая разметка будет генерироваться для выпадающего списка. Например, код урока работает на основе атрибутов data- , которые содержат разметку HTML. Это отличный способ, который следует оставить в реализации плагина.
  2. Так как плагин будет вызываться, то нам нужно изменить код так, чтобы использовать объект “this”, передаваемый в плагин, вместо жестко заданного селектора. Таким образом, станет возможно конвертировать несколько элементов select на странице одновременно.
  3. Нам нужно будет выделить код JavaScript и CSS в разные файлы, чтобы было просто встраивать и распространять плагин.

 

Код

Наш код jQuery сканировал опции элемента select и строил неупорядоченный список. В процессе работы он также просматривал несколько атрибутов data-, который содержали URL изображения и описание, которые использовались в списке.

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

Вот так будет выглядеть код:

(function($){

	$.fn.tzSelect = function(options){
		options = $.extend({
			render : function(option){
				return $('
  • ',{ html : option.text() }); }, className : '' },options); // Код будет добавляться здесь. } })(jQuery);
  • Функция render берет элемент option (который содержится в элементе select) и возвращает элемент li, который непосредственно включается в выпадающий список в плагине. Это решение задачи №1 в вышеприведенном списке.

    Прежде чем мы перейдем к решению задачи №2, взглянем, как наш плагин будет вызываться:

    $(document).ready(function(){
    	$('select').tzSelect();
    });
     

    В вышеприведенном примере плагин применяется к каждому элементу select на странице. Мы можем получить доступ к указанным элементам за счет использования объекта “this”, который передается в плагин:

        return this.each(function(){
    	
    	// "this" указывает на текущий элемент select:
    	
    	var select = $(this);
    
    	var selectBoxContainer = $('
    ',{ width : select.outerWidth(), className : 'tzSelect', html : '
    ' }); var dropDown = $('
      ',{className:'dropDown'}); var selectBox = selectBoxContainer.find('.selectBox'); // Цикл по опциям оригинального элемента select if(options.className){ dropDown.addClass(options.className); } select.find('option').each(function(i){ var option = $(this); if(i==select.attr('selectedIndex')){ selectBox.html(option.text()); } // Так мы используем jQuery 1.4.3, то можно получить доступ к атрибуту HTML5 // data с помощью метода data(). if(option.data('skip')){ return true; } // Создаем выпадающий пункт в соответствии с атрибутами HTML5 // data-icon и data-html-text HTML5: var li = options.render(option); li.click(function(){ selectBox.html(option.text()); dropDown.trigger('hide'); // Когда происходит событие click, мы также отображаем изменения на // оригинальном элементе select: select.val(option.val()); return false; }); dropDown.append(li); }); selectBoxContainer.append(dropDown.hide()); select.hide().after(selectBoxContainer); // Привязываем пользовательские события show и hide к dropDown: dropDown.bind('show',function(){ if(dropDown.is(':animated')){ return false; } selectBox.addClass('expanded'); dropDown.slideDown(); }).bind('hide',function(){ if(dropDown.is(':animated')){ return false; } selectBox.removeClass('expanded'); dropDown.slideUp(); }).bind('toggle',function(){ if(selectBox.hasClass('expanded')){ dropDown.trigger('hide'); } else dropDown.trigger('show'); }); selectBox.click(function(){ dropDown.trigger('toggle'); return false; }); // Если мы нажмем где-нибудь на странице в то время, когда выпадающий список выведен, // то он будет скрыт: $(document).click(function(){ dropDown.trigger('hide'); }); });

    Выше приведенный фрагмент кода почти идентичен коду урока, который мы конвертируем. Есть одно существенное отличие: в нашем варианте переменной select присваивается  $(this), а в предыдущем коде используется $('select.makeMeFancy') (жестко заданный селектор), что существенно ограничивало рамки действия кода.

    Также вместо непосредственного генерирования выпадающего списка мы вызываем функцию render, которая передается плагину как параметр.

    При объединении выше приведенных частей мы получим код нашего плагина:

    tzSelect/jquery.tzSelect.js

    (function($){
    	
    	$.fn.tzSelect = function(options){
    		options = $.extend({
    			render : function(option){
    				return $('
  • ',{ html : option.text() }); }, className : '' },options); return this.each(function(){ // "this" указывает на текущий элемент select: var select = $(this); var selectBoxContainer = $('
    ',{ width : select.outerWidth(), className : 'tzSelect', html : '
    ' }); var dropDown = $('
      ',{className:'dropDown'}); var selectBox = selectBoxContainer.find('.selectBox'); // Цикл по опциям оригинального элемента select if(options.className){ dropDown.addClass(options.className); } select.find('option').each(function(i){ var option = $(this); if(i==select.attr('selectedIndex')){ selectBox.html(option.text()); } // Так мы используем jQuery 1.4.3, то можно получить доступ к атрибуту HTML5 // data с помощью метода data(). if(option.data('skip')){ return true; } // Создаем выпадающий пункт в соответствии с атрибутами HTML5 // data-icon и data-html-text HTML5: var li = options.render(option); li.click(function(){ selectBox.html(option.text()); dropDown.trigger('hide'); // Когда происходит событие click, мы также отображаем изменения на // оригинальном элементе select: select.val(option.val()); return false; }); dropDown.append(li); }); selectBoxContainer.append(dropDown.hide()); select.hide().after(selectBoxContainer); // Привязываем пользовательские события show и hide к dropDown: dropDown.bind('show',function(){ if(dropDown.is(':animated')){ return false; } selectBox.addClass('expanded'); dropDown.slideDown(); }).bind('hide',function(){ if(dropDown.is(':animated')){ return false; } selectBox.removeClass('expanded'); dropDown.slideUp(); }).bind('toggle',function(){ if(selectBox.hasClass('expanded')){ dropDown.trigger('hide'); } else dropDown.trigger('show'); }); selectBox.click(function(){ dropDown.trigger('toggle'); return false; }); // Если мы нажмем где-нибудь на странице в то время, когда выпадающий список выведен, // то он будет скрыт: $(document).click(function(){ dropDown.trigger('hide'); }); }); } })(jQuery);
  • Размещение кода в отдельном файле решает задачу №3. Но мы намеренно оставили код, который использует атрибуты data- , чтобы сделать плагин более гибким в использовании. Нужно передавать пользовательскую функцию render при вызове плагина, как ниже приведенном примере:

    $(document).ready(function(){
    	
    	$('select.makeMeFancy').tzSelect({
    		render : function(option){
    			return $('
  • ',{ html: ''+ option.data('html-text')+'' }); }, className : 'hasDetails' }); // Вызываем версию по умолчанию для выпадающего списка $('select.regularSelect').tzSelect(); });
  • Готово!

    Плагин можно использовать в своих проектах.

    Источник урока: tutorialzine.com/2011/02/converting-jquery-code-plugin/

    Урок Создан:2011-05-18 Просмотров:1666

    Добавить комментарий:

    
    Copyright© 2009 Hosted by Zhost