If you've used jQuery, or are just starting out, then you should realize jQuery functions as simplified namespace calls of otherwise tedious function calls. For example, $.ajax() is a jQuery function that provides almost all of the complexities of an ajax call into one name space where parameters are passed through in simple json style such as $.ajax({ url: 'http://spyk3lc.blogspot.com' });. You too can have this power!
To demonstrate this easy procedure, I'm going to take something simple, used quite frequently ... everywhere and make it into a simple, reusable set of functions. So what is this all powerful command? Simply tuning your cursor from default to waiting and back again.
First, I'll look at the most simple approach. Perhaps you simply want to set your cursor t wait while something is happening and then to default when that event is done. So at the start of your action you may have something like:
While at the end of your action your change becomes:
While this is a simple process, when surrounded by jQuery calls, it can look completely out of place and may not fit in the manner you wish. So we want to change these calls to fit in jQuery style functions we can use again and again.
A prior warning, this next couple steps negates paying attention to jQuery name-spacing and is not "best practice", however, before I end this article, I will explain a better way to "crop" this down to size and review why name-spacing is important, I promise. For now, let's stick with the simple process of making those jQuery functions!
The first thing to know is that this doesn't have to be wrapped in your typical "document.ready" bubble, as jQuery already provides a "plug-in" style way of adding your functions, after you've called for jQuery. The mark up is simple:
With that said, you are now ready to make your first custom jQuery function. Inside your new extension set up, simply start your function with an if statement that determines if the namespace you're using is available in the jQuery library. This if function is as simple as:
Keep in mind, this check is no magic. It is as simple as javascript trying to use the function $.cursorDefault and then getting a kick back tell it that namespace is undefined. Yay! Then we can use it! For future reference, get familiar with the console, and if ever question a namespace you are about to use, then simply try to console log it first to see if it exist. For example, before writing this function we're about to write, if you want to double check if that namespace exist, then do the following:
- Use a browser like Google chrome and go to your page or even the jQuery homepage
- Open the debugging console (ctrl+shift+j in Chrome)
- Click to type in the console
- Type $.YourDesiredFunctionName
- If it says something like undefined after you press enter, then you are in the clear to use this as a function name, just be careful it doesn't interfer with any other desired
Finally, we can make our first function.
Walla! It was just that easy! And reuse is even easier. Simply type `$.cursorDefault();` and at that moment it is called, your cursor will magically become normal again. Now where is that wait function?
Oh there it is, but there is a problem here. The namespace issue! It's never a good idea to make multiple function names where one will do. This is where you must be work smarter, not harder. Think about what our two functions are doing and what they are similar too.
Well, one function sets it to default or 0 as seen in the binary world, whereas the other provides it an action state. This is very similar to a boolean!
But how do we simulate this out of two functions? Parameters!
So now all we need is a new function name not being used by jQuery and one that probably want be used by other plugins. In our case we'll use "cursorWait", as we already have it tested and working, but this time we're going to make a parameter change to it.
So let's see how to rewrite this into one function name:
Now, you have written your first jQuery function, and it's reuse is simple.
Before we go,let me point out that our final function solution can actually be written in several ways. I chose the switch statement simply to drive home the point that this will work weather it has a parameter or not. However, since the only param we need is `false`, you could just as easily use a full if statement or even a online if statement such as:
That's all for now! Keep an eye out for more easy jQuery tips and even other language and library tips in the near future! Good luck!
Oh there it is, but there is a problem here. The namespace issue! It's never a good idea to make multiple function names where one will do. This is where you must be work smarter, not harder. Think about what our two functions are doing and what they are similar too.
Well, one function sets it to default or 0 as seen in the binary world, whereas the other provides it an action state. This is very similar to a boolean!
But how do we simulate this out of two functions? Parameters!
So now all we need is a new function name not being used by jQuery and one that probably want be used by other plugins. In our case we'll use "cursorWait", as we already have it tested and working, but this time we're going to make a parameter change to it.
So let's see how to rewrite this into one function name:
Now, you have written your first jQuery function, and it's reuse is simple.
Before we go,let me point out that our final function solution can actually be written in several ways. I chose the switch statement simply to drive home the point that this will work weather it has a parameter or not. However, since the only param we need is `false`, you could just as easily use a full if statement or even a online if statement such as:
That's all for now! Keep an eye out for more easy jQuery tips and even other language and library tips in the near future! Good luck!
