title: How to use jQuery extend method to create a custom plugin for element or class selectors
body: <p>Trying to improve my jQuery/javascript skills and I think I have the perfect problem that may help me learn how and when to use the extend approach to an jQuery object. I am basically try to create a function that restricts the max-length of an <code>input[type=text]</code> element. </p>
  
  <p>What I really want is this to be an example for users  on how to use jQuery extend $fn. to create custom plugins. While not an ideal usage, this example is simple as the user simply passes in some sort of value (min or max or both?) using the selector based off the class name and  then the plugin automatically updates the elements max-length/min-length and length value). </p>
  
  <p>This is what I have so far but I know I am not on the right track yet. Or even better yet, also create another plugin that sets the <code>min-length</code>, max-length, <code>length</code> attributes. Please feel free to edit as needed. Thanks in advance!</p>
  
  <pre><code>&lt;script&gt;
  maxLength(length,element) {
  
          if (element.val().length &lt;= length) { 
              return false;
          } else {
              return true;
          }
  
  }
  
  $(".max-length").keypress(function (element) {
      maxLength(2,element);
  });
  &lt;/script&gt; 
  </code></pre>
  
  <p>What I want is that I can either</p>
  
  <p>A: <code>$("Textbox).maxLength(2);</code> //Prefer this as this is how I would like to use it I think?</p>
  
  <p>OR </p>
  
  <p>B: <code>maxLength($("#Textbox"), 2);</code></p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here is the closet examples I found but this is just an indicator/variable that extends the object not a method for a jQuery/js object:</p>
  
  <p>$(document).tooltip.temporarilyOff
  Then when I initialize the jQuery tooltip, I just need to add a check in the open:</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>Whats messed up is I guess I didnt know what I was looking for was a plugin. Doh! jQuery docs had my example the whole time. I guess now the passing of args is all thats left</p>
  
  <pre><code>$.fn.greenify = function() {
      this.css( "color", "green" );
  };
  
  $( "a" ).greenify(); // Makes all the links green.
  </code></pre>