Welcome Guest [Log In] [Register]
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:

Username:   Password:
Add Reply
Creating a jQuery plug-in
Topic Started: Apr 26 2011, 05:18 PM (110 Views)
Quozzo
Member Avatar
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.
Code:
 
$.fn.bgChanger = function(){

};
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
Code:
 
$.fn.bgChanger = function(){

$(this).click(function(){
$(this).css({"background-color":"#ff0000"});
});

};


To call the elements we want effected we use this:
Code:
 
$('*').bgChanger();
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
Code:
 
$(function(){
$('*').bgChanger();
});
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
Code:
 
$.fn.bgChanger = function(options){

$(this).click(function(){
$(this).css({"background-color":options});
});

};
Code:
 
$(function(){
$('*').bgChanger("#00ff00");
});
Of course it doesn't need to be the same colour for all elements
Code:
 
$.fn.bgChanger = function(options){

$(this).click(function(){
$(this).css({"background-color":options});
});

};
Code:
 
$(function(){
$('div').bgChanger("#00ff00");
$('td').bgChanger("#ff0000");
$('span').bgChanger("#0000ff");
});
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.
Code:
 
$.fn.bgChanger = function(options){

$(this).click(function(){
$(this).css(options);
});

};
Code:
 
$(function(){
$('div').bgChanger({"background-color":"#00ff00", "color":"#0000ff"});
$('td').bgChanger({"background-color":"#ff0000", "color":"#00ff00"});
$('span').bgChanger({"background-color":"#0000ff", "color":"#ff0000"});
});


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.
Code:
 
$.fn.bgChanger = function(options){

defaults = {
"font-weight": "900",
"border": "1px solid #cccccc"
}

$(this).click(function(){
$(this).css(options);
});

};
And then mixing the defaults with the options is achieved using the $.extend() function
Code:
 
$.fn.bgChanger = function(options){

defaults = {
"font-weight": "900",
"border": "1px solid #cccccc"
}

$.extend(true,defaults,options)

$(this).click(function(){
$(this).css(defaults);
});

};
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
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Code Tutorials · Next Topic »
Add Reply

Ruby Graphite created by Sarah & Delirium