jQuery Plugins

Sometimes you will come across some bit of functionality that jQuery doesn't handle natively and jQuery UI doesn't offer up a solution.  For example, let's say you need to implement a mask on a text box for a phone number.  You could use the Ajax Control Toolkit, but I've had issues getting this to work so I don't recommend it.  I love jQuery and jQuery UI, but you can't do this "out of the box".

A jQuery plugin is an extension of jQuery that "some guy" has written to accomplish something that jQuery doesn't do by itself.  In fact, jQuery UI is basically a "plugin".  The only difference is that jQuery UI is official and a plugin is not.  And this is what makes me a little hesitant to use plugins.  But, in the case of our phone number mask example, I think it's probably the best fit.

First go to the jQuery Plugins page and find something you think will work.  The inputmask seemed to work well for me.  Download all the files, and stick them all in a folder in your project folder.  There should be some documentation either on the plugin page or downloaded into your folder.  It will tell you how to use the plugin in your code.  As an example, here is how I used the inputmask.

First add this script to your page.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="InputMask/dist/jquery.inputmask.bundle.js" type="text/javascript"></script>

Note that I'm using a content provider (google) to host the "out of the box" jQuery code.  This is simply for brevity.

Then your jQuery would look like this:

        $(document).ready(function () {
            $("#txtPhoneNum").inputmask("999-999-9999");
        });