Как использовать метод расширения jQuery для создания настраиваемого плагина для селекторов элементов или классов

Question

Попытка улучшить мои навыки jQuery/javascript, и я думаю, что у меня есть прекрасная проблема, которая может помочь мне узнать, как и когда использовать расширенный подход к Объект jQuery. Я в основном пытаюсь создать функцию, которая ограничивает максимальную длину элемента input[type=text].

Я действительно хочу, чтобы это был пример для пользователей о том, как использовать jQuery для расширения $ fn. для создания пользовательских плагинов. Хотя это не идеальное использование, этот пример прост, так как пользователь просто передает какое-то значение (мин или макс или оба?), Используя селектор, основанный на имени класса, а затем плагин автоматически обновляет элементы max-length/min- длина и длина).

Это то, что у меня есть до сих пор, но я знаю, что я еще не на правильном пути. Или еще лучше, также создайте еще один плагин, который устанавливает атрибуты min-length, max-length, length. Не стесняйтесь редактировать по мере необходимости. Заранее спасибо!

<script> 
maxLength(length,element) { 

     if (element.val().length <= length) { 
      return false; 
     } else { 
      return true; 
     } 

} 

$(".max-length").keypress(function (element) { 
    maxLength(2,element); 
}); 
</script> 

То, что я хочу, что я могу либо

A: $("Textbox).maxLength(2); // Предпочитают это как это, как я хотел бы использовать его, я думаю?

ИЛИ

В: maxLength($("#Textbox"), 2);

---

РЕДАКТИРОВАТЬ

Вот примеры шкаф я нашел, но это только индикатор/переменная, которая расширяет объект не метод для jQuery/js объект:

$ (document) .tooltip.temporarilyOff Затем, когда я инициализировать всплывающую подсказку JQuery, мне просто нужно добавить проверку в открытоугольной:

var settings = {}; 
settings.tooltipClass = "tooltip"; 
settings.open = function (event, ui) { 
    if ($(document).tooltip.temporarilyOff) { 
     ui.tooltip.stop().remove(); 
    } 
}; 

$(document).tooltip(settings); 

//set the variable of the object 
$(document).tooltip.temporarilyOff = true; 

Что перепутались, я думаю, я не знаю, что я искал был плагин. Doh! У jQuery docs был мой пример все время. Я думаю, теперь прохождение арга это все, что осталось

$.fn.greenify = function() { 
    this.css("color", "green"); 
}; 

$("a").greenify(); // Makes all the links green. 

Answer 1

Здесь вы идете:

Я продлил решение тянуть длину макс от атрибута данных, поэтому он может быть более гибким для вас.

<input type="text" class="max-length" data-maxlength="5"> <input type="text" data-maxlength="3" class="max-length" /> 
<script type="text/javascript"> 
    //https://learn.jquery.com/plugins/basic-plugin-creation/ 

(function($) { //Protect the $ Alias and Adding Scope 
    $.fn.restrictLength = function(lengthVal) { 
     //This plugin will work for all the elements that match the selector 
     return this.each(function() { 
     //Capture the keypress event and evaluate the input value length 
     $(this).keypress(function(e) { 
      //Make sure the data attribute is a number, else allow unrestricted max value 
      //prevents hex and other number with alphas 
      this.value = this.value.replace(/[^0-9.]/g,''); 
      var dataMax = !isNaN($(this).data('maxlength')) ? $(this).data('maxlength') : ($(this).val().length+1); 
      //Use the passed in value if it exists, if not use the data attribute (if it exists and is a nummber), else make it longer than the current value (not restricted) 
     var length = !isNaN(lengthVal) ? lengthVal : dataMax; 
     if ($(this).val().length >= length) { 
      //String is too long, don't execute the event 
      return false; 
      } else { 
      //String length is good, allow the keyPress event to continue 
      return true; 
      } 
     }); 
     }); 

    }; 
}(jQuery)); 


$(document).ready(function() { 
// $(".max-length").restrictLength(4); //Restrict all fields to 4 characters 
    $(".max-length").restrictLength(); //Each field will be restricted to its data attribute value 
}) 
</script> 

Codepen: http://codepen.io/nobrien/pen/MyVRXd