Пользовательский плагин, возможность добавить класс - PullRequest
Новая
       12

Пользовательский плагин, возможность добавить класс

1 голос
/ 09 мая 2011

Я пытаюсь написать свой первый маленький плагин, и я как бы ударил стену.

Мой плагин - простая функция .replace (), которая находит значения openReplace и closeReplace и переключает ихих с моими значениями tagOpen и tagClose.

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

Надеюсь, что это имеет смысл иНе стесняйтесь оставлять мне отзывы о структуре кода моего плагина.

Спасибо 

(function($){

  $.fn.TextColor = function(options) {  

    var defaults = {
      class            :'',
      openReplace      :'{',
      closeReplace     :'}',
      tagOpen          :'<span>',
      tagClose         :'</span>'
    };

    return this.each(function() {        

      if ( options ) { 
        $.extend( defaults, options );
      }

      var obj = $(this);

      //Add a var to be able to add a class to tagOpen here and replace with defaults.tagOpen in the colorText variable below

      var colorText = obj.html().replace(defaults.openReplace,defaults.tagOpen).replace(defaults.closeReplace,defaults.tagClose);

      obj.html(colorText);


    });

  };
})( jQuery );

1 Ответ

0 голосов
/ 09 мая 2011

Как насчет регулярного выражения + создание тега с помощью JQuery: 

(function($){
    $.fn.TextColor = function(options) {

var defaults = {
  className        :'myClass',
  openReplace      :'{',
  closeReplace     :'}',
  openTag          :'<span>',
  closeTag         :'</span>'
};

if ( options ) { 
    $.extend( defaults, options );
 }

return this.each(function() {        
    var $obj = $(this);
    var html = = obj.html();
    var regex = new RegExp(defaults.openReplace + '(.+?)' + defaults.closeReplace, 'gi');

    html = html.replace(regex, function(outerMatch, innerMatch) {
         var wrapper = $("<div>");
         var tag = $(defaults.openTag)
                       .addClass(defaults.className)
                       .html(innerMatch)
                       .appendTo(wrapper);

     return wrapper.html();                 
   });

   obj.html(colorText);

});

}; })( jQuery );

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

...