| Welcome to Byte It. We hope you enjoy your visit. Byte It is a forum dedicated to creating modifications for the ZetaBoards forum software. We have a large database of codes provided my the forum Admin, Quozzo, and other members of our community. If you dont see a code tgar fulfills your needs then you can request one right here. If you join our community, you'll be able to access member-only sections, and use many member-only features such as giving codes a Byte Mark, requesting modifications, and viewing a livePreview of codes we have in our database. Registration is simple, fast, and completely free. Join our community! If you're already a member please log in to your account to access all of our features: |
| Creating a jQuery plug-in | |
|---|---|
| Tweet Topic Started: Apr 26 2011, 05:18 PM (110 Views) | |
| Quozzo | Apr 26 2011, 05:18 PM Post #1 |
|
Administrator
![]() ![]() ![]() ![]() ![]()
|
jQuery is a really useful short cut to JavaScript and really flexible too. Creating a plug-in using jQuery is incredibly simple and easy to learn, here's how to do it. I'm going to be showing you just how to create a plug-in for changing the background colour of an element that a user clicks on. A pretty useless plug-in but one that should explain everything quite nicely. Firstly we need a name for our plug-in, we can change it later but this is necessary in creating our plug-in, lets call it bgChanger. That is syntax in letting jQuery know we are creating a plug-in, the name bgChanger is also used to call the function when needed Now to change the background color we simply add one line of jQuery inside a click event
To call the elements we want effected we use this: The above will select all elements and then change thier background color red when clicked. Unfortunately the above will be called before all the elements are loaded, so we must ensure it fires only when all the elements of a page are fully loaded There, that should work now. Changing any element red when clicked, but all this red is making me angry! Adding Options Adding options to the plug-in is just as easy as adding variables in a function, placing them in the parenthesis (or brackets). Making a few slight modifications to the code we can alter what color is shown when clicked
Of course it doesn't need to be the same colour for all elements
The above will change the background colour of any <div> tag to green, <td> to red and <span> to blue. Adding multiple options per element is achievable by using an object, full of different effects. The code will need another minor adjustment though.
Plugins usually have a lot of default values that need to be used, even if the user doesn't input anything. For this we need to enter them into the plugin like so. And then mixing the defaults with the options is achieved using the $.extend() function Specifying "true" ensures that it is recursive, meaning it will not overwrite the entire default array with the new one but instead replace any new options within that. look here for more information about $.extend(); Also note that "defaults" is the object that we are keeping as it is the one with the additional "options" variables, because of that the CSS variable needs to be changed from options to defaults. It is also possible to change the default options to the any new ones, not just adding new options. Thats it. Now you know how to create plug-ins using jQuery |
![]() |
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · Code Tutorials · Next Topic » |
| Track Topic · E-mail Topic |
2:49 PM Jul 11
|




![]](http://z4.ifrm.com/static/1/pip_r.png)



2:49 PM Jul 11