jQuery have been widely used for interactive websites. There are plenty of plugins available built on jquery. We can also create our plugins. In this tutorial we will create a plugin and add few options.
We will create a jquery.myplugin.js and include it in our HTML document. You may choose plugin name of your choice. We will keep all files in same directory.
In our HTML document we will include both jquery and our plugin files.
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.myplugin.js"></script>
In our jQuery Plugin file we will create a function:
(function($) {
$.fn.sayHello = function() {
// code goes here
}
}(jQuery));
To prevent collision with other JavaScript we need to put everything inside self-enclosed JavaScript pattern (function() {}). This keeps the variables in our plugin safely outside of the global namespace. $.fn is jQuery’s way to define plugin.
Adding features to our plugin:
Suppose we want a feature to add text. Lets add a feature to add text.
(function($) {
$.fn.sayHello = function() {
this.each( function() {
$(this).text("Hi guys, i have been just created!");
});
}
}(jQuery));
Now you can invoke this method in our HTML page like this:
<script>
$(document).ready( function() {
$('h2').sayHello();
});
</script>
Lets test in with our HTML document.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.myplugin.js"></script>
</head>
<body>
<h2></h2>
<h2></h2>
<h2></h2>
</body>
<script>
$(document).ready( function() {
$('h2').sayHello();
});
</script>
</html>
Congrats you have just created your first working plugin. But we are not done with this. With this plugin we cannot further chain other feature. Our plugin does not return results after invoking the method on objects. To further chain methods we need to properly return results from our methods.
(function($) {
$.fn.sayHello = function(customText) {
return this.each( function() {
$(this).text("Custom text: "+customText);
});
}
}(jQuery));
Lets add more feature to our plugin. For now we have used hard coded text in our plugin. We can give option for custom text provided to plugin.
Now add a new feature to add color and chain methods. In our plugin add new method:
(function($) {
$.fn.sayHello = function(customText) {
return this.each( function() {
$(this).text("Custom text: "+customText);
});
}
$.fn.addColor = function(customText) {
return this.each( function() {
$(this).css("color", "red");
});
}
}(jQuery));
Now change our script in HTML document like this:
<script>
$(document).ready( function() {
$('h2').sayHello("this is custom text!!!").addColor();
});
</script>
Voila !!!!!! We will cover few more things in our next tutorial.
0 Comment(s)