Learn how you to can create your own BitsyCode methods and support the cause.
1. Create a method that requires an element to be specified.
// Create the BitsyCode function, notice the fn refering to an element needing to be specified
bitsyCode.fn.red = function() {
// Loop through all the elements matched (this.nodes)
for (var i = 0; i < this.nodes.length; i++) {
// Set the color of all the metched elements to red
this.nodes[i].style.color = 'red';
}
// Return this element for Chaining purposes
return this;
}// Set the color of all p tags to red
bitsyCode('p').red();
2. Create a method that DOES NOT require an element to be specified.
// Create the BitsyCode function, notice there's no fn specified, so no element is needed to be specified.
bitsyCode.red = function() {
// Get all the p tags on the page
var pTags = document.getElementById("p");
// Loop through all the p
for (var i = 0; i < pTags.length; i++) {
// Set the color of the p tag
pTags[i].style.color = "red";
}
// Return this element for Chaining purposes
return this;
}// Set the color of all p tags to red
bitsyCode.red();
3. Create a method with arguments
// Create the BitsyCode function,
// notice the fn refering to an element needing to be specified,
// also notice the options being passed to the function, this allows the function to accept arguments that the user passes through
bitsyCode.fn.color = function(options) {
// Set some default options
var default_options = {
color:"red"
}
//Merge objects options and default options. If the user sent no options through then default options will be used.
var o = bitsyCode.mergeobjects([default_options,options]);
// Loop through all the elements matched (this.nodes)
for (var i = 0; i < this.nodes.length; i++) {
// Set the color of all the metched elements to red
this.nodes[i].style.color = o.color;
}
// Return this element for Chaining purposes
return this;
}// Call method and pass through options as an Object
// This will obviously make the color of all p tags to yellow
bitsyCode("p").color({ color: 'yellow' });
That's the end of it for now
So that's just the basics of how you can get started with creating your very own BitsyCode methods.
BitsyCode is just a JavaScript library, so you can wrap your existing JavaScript methods with BitsyCode, it's that easy.
Once you have created your BitsyCode method and would like to share it with the world, head over to our submit my contribution page and send us your code to be added on this website, if it has been successful.