Adding Methods to jQuery - PHP and Jquery

To add a chainable method to the jQuery object, you have to attach it to the fnobject of jQuery. This allows you to call the method on a set of selected elements:

$(".class").yourPlugin();

Building Your Plugin

The plugin you’ll build in this section will rely on a simple method to enlarge the event titles when a user hovers over them, and then return them to their original size when the user moves his mouse off the title.

This plugin will be called dateZoom, and it will allow the user to configure the size, speed, and easing equation used for the animation.

Creating a Properly Named Plugin File

Your first order of business when creating this plugin is to give it a name. Create a new file in the jsfolder called jquery.dateZoom.js and insert the custom alias function:

(function($){
// plugin code here
})(jQuery);

Inside this function, attach the new method to the fnobject by inserting the following bold code:

(function($){
// A plugin that enlarges the text of an element when moused
// over, then returns it to its original size on mouse out
$.fn.dateZoom = function(options)
{
// code here
};
})(jQuery);

Providing Publicly Accessible Default Options

In your validDate() plugin, the function’s default options are stored in a private object. This can be undesirable, especially in instances where a user might apply the plugin method to multiple sets of elements and then want to modify the defaults for all instances.

To make default options publicly accessible, you can store them in the date Zoomnamespace. For your dateZoomplugin, create a publicly accessible defaults object that contains four custom properties:

  • fontsize: The size to which the font will expand. Set this to 110% by default.
  • easing: The easing function to use for the animation. Set this to swing by default.
  • duration: The number of milliseconds the animation should last. Set this to 600 by default.
  • callback: A function that fires upon completion of the animation. Set this to null by default.

Now add the default options to the dateZoomplugin by inserting the following bold code:

(function($){
// A plugin that enlarges the text of an element when moused
// over, then returns it to its original size on mouse out
$.fn.dateZoom = function(options)
{
// code here
};
// Defines default values for the plugin
$.fn.dateZoom.defaults = {
"fontsize" : "110%",
"easing" : "swing",
"duration" : "600",
"callback" : null
};
})(jQuery);

At this point, a user can change the defaults for all calls to the dateZoomplugin using syntax something like this:

$.fn.dateZoom.defaults.fontsize = "120%";

To override default options, a user can pass an object with new values for one or more of the default options, as in the validDateplugin. You can use $.extend() to create a new object that contains values for the current invocation of the plugin when it is created.

The following bold code adds this functionality to the dateZoomplugin:

(function($){
// A plugin that enlarges the text of an element when moused
// over, then returns it to its original size on mouse out
$.fn.dateZoom = function(options)
{
// Only overwrites values that were explicitly passed by
// the user in options
var opts = $.extend($.fn.dateZoom.defaults, options);
// more code here
};
// Defines default values for the plugin
$.fn.dateZoom.defaults = {
"fontsize" : "110%",
"easing" : "swing",
"duration" : "600",
"callback" : null
};
})(jQuery);

Maintaining Chainability

To keep plugin methods chainable, the method must return the modified jQueryobject. Fortunately, this is easy to accomplish with jQuery: all you need to do is run the .each() method on the this object to iterate over each selected element, and then return the this object.

In the dateZoomplugin, you can make your method chainable by inserting the code shown in bold:

(function($){
// A plugin that enlarges the text of an element when moused
// over, then returns it to its original size on mouse out
$.fn.dateZoom = function(options)
{
// Only overwrites values that were explicitly passed by
// the user in options
var opts = $.extend($.fn.dateZoom.defaults, options);
// Loops through each matched element and returns the
// modified jQuery object to maintain chainability
returnthis.each(function(){
// more code here
});
};
// Defines default values for the plugin
$.fn.dateZoom.defaults = {
"fontsize" : "110%",
"easing" : "swing",
"duration" : "600",
"callback" : null
};
})(jQuery);

Creating a Publicly Accessible Helper Method

To keep your plugin code clean and organized, you will place the actual animation of the elements in a helper method called zoom.This method, like the defaults object, will be publicly accessible under the date Zoomnamespace. Making this method public means that a user can potentially redefine the method before calling the plugin or even call the method outside of the plugin, if he so desires.

You create the zoom method by inserting the following bold code into the dateZoomplugin:

(function($){
// A plugin that enlarges the text of an element when moused
// over, then returns it to its original size on mouse out
$.fn.dateZoom = function(options)
{
// Only overwrites values that were explicitly passed by
// the user in options
var opts = $.extend($.fn.dateZoom.defaults, options);
// Loops through each matched element and returns the
// modified jQuery object to maintain chainability
returnthis.each(function(){
// more code here
});
};
// Defines default values for the plugin
$.fn.dateZoom.defaults = {
"fontsize" : "110%",
"easing" : "swing",
"duration" : "600",
"callback" : null
};
// Defines a utility function that is available outside of the
// plugin if a user is so inclined to use it
$.fn.dateZoom.zoom = function(element, size, opts)
{
// zoom the elements
};
})(jQuery);

This method accepts the element to animate, the size to which it should be animated, and an object containing options.Inside this method, you will use the .animate(), .dequeue(), and .clearQueue() methods to animate the object and prevent animation queue buildup; add the code shown in bold to accomplish this:

(function($){
// A plugin that enlarges the text of an element when moused
// over, then returns it to its original size on mouse out
$.fn.dateZoom = function(options)
{
// Only overwrites values that were explicitly passed by
// the user in options
var opts = $.extend($.fn.dateZoom.defaults, options);
// Loops through each matched element and returns the
// modified jQuery object to maintain chainability
returnthis.each(function(){
// more code here
});
};
// Defines default values for the plugin
$.fn.dateZoom.defaults = {
"fontsize" : "110%",
"easing" : "swing",
"duration" : "600",
"callback" : null
};
// Defines a utility function that is available outside of the
// plugin if a user is so inclined to use it
$.fn.dateZoom.zoom = function(element, size, opts)
{
$(element).animate({
"font-size" : size
},{
"duration" : opts.duration,
"easing" : opts.easing,
"complete" : opts.callback
})
.dequeue() // Prevents jumpy animation
.clearQueue(); // Ensures only one animation occurs
};
})(jQuery);

Modifying Each Matched Element

Because the .each() method accepts a callback, you can easily modify each matched element in the jQueryobject being processed. For the dateZoomplugin, you’ll add hover event handlers to each selected element.

When a user hovers her mouse over an element to which dateZoomhas been applied, the zoommethod will run. This method relies on the fontsizeproperty of the defaults object to enlarge the text appropriately. When the user stops hovering, the original text size will be passed to zoom, and the element’s text will return to its original size.

To store the original size, use the .css() method and place the original font size in a private variable.You use the .hover() method to implement this functionality by inserting the following bold code into the dateZoomplugin:

(function($){
// A plugin that enlarges the text of an element when moused
// over, then returns it to its original size on mouse out
$.fn.dateZoom = function(options)
{
// Only overwrites values that were explicitly passed by
// the user in options
var opts = $.extend($.fn.dateZoom.defaults, options);
// Loops through each matched element and returns the
// modified jQuery object to maintain chainability
returnthis.each(function(){
// Stores the original font size of the element
varoriginalsize = $(this).css("font-size");
// Binds functions to the hover event. The first is
// triggered when the user hovers over the element, and
// the second when the user stops hovering
$(this).hover(function(){
$.fn.dateZoom.zoom(this, opts.fontsize, opts);
},
function(){
$.fn.dateZoom.zoom(this, originalsize, opts);
});
});
};
// Defines default values for the plugin
$.fn.dateZoom.defaults = {
"fontsize" : "110%",
"easing" : "swing",
"duration" : "600",
"callback" : null
};
// Defines a utility function that is available outside of the
// plugin if a user is so inclined to use it
$.fn.dateZoom.zoom = function(element, size, opts)
{
$(element).animate({
"font-size" : size
},{
"duration" : opts.duration,
"easing" : opts.easing,
"complete" : opts.callback
})
.dequeue() // Prevents jumpy animation
.clearQueue(); // Ensures only one animation occurs
};
})(jQuery);

Implementing Your Plugin

At this point, your plugin is ready to implement. All that remains is to include the file and select a set of elements to run it on.

Including the Plugin File

To include the plugin file, you need to modify footer.inc.phpand add a new script tag. As with the validDateplugin, the date Zoomplugin needs to be included before init.js, so that the method is available to be called:

<script type="text/javascript"
src="http://www.wisdomjobs.com/jsapi"></script>
<script type="text/javascript">
wisdomjobs.load("jquery", "1");
</script>
<script type="text/javascript"
src="assets/js/jquery.validDate.js"></script>
<script type="text/javascript"
src="assets/js/jquery.dateZoom.js"></script>
<script type="text/javascript"
src="assets/js/init.js"></script>
</body>
</html>

Initializing the Plugin on a Set of Elements

The plugin is now included in the application, so you can call the .dateZoom() method on a set of elements. The next set of changes requires that you modify init.js, so open that file now.

Begin by changing the default fontsizevalue to 13px, and then add the .dateZoom() method to the chain of methods on the set of elements selected with the "li a" string. As already indicated, you implement these changes by adding modifying init.js, as shown in the bold code that follows:

jQuery(function($){
varprocessFile = "assets/inc/ajax.inc.php",
fx = {...}
// Set a default font-size value for dateZoom
$.fn.dateZoom.defaults.fontsize = "13px";
// Pulls up events in a modal window and attaches a zoom effect
$("li a")
.dateZoom()
.live("click", function(event){
// Stops the link from loading view.php
event.preventDefault();
// Adds an "active" class to the link
$(this).addClass("active");
// Gets the query string from the link href
var data = $(this)
.attr("href")
.replace(/.+??(.*)$/, "$1"),
// Checks if the modal window exists and
// selects it, or creates a new one
modal = fx.checkmodal();
// Creates a button to close the window
$("<a>")
.attr("href", "#")
.addClass("modal-close-btn")
.html("&times;")
.click(function(event){
// Removes event
fx.boxout(event);
})
.appendTo(modal);
Loads the event data from the DB
$.ajax({
type: "POST",
url: processFile,
data: "action=event_view&"+data,
success: function(data){
// Displays event data
fx.boxin(data, modal);
},
error: function(msg) {
alert(msg);
}
});
});
$(".admin-options form,.admin")
.live("click", function(event){...});
// Edits events without reloading
$(".edit-form input[type=submit]")
.live("click", function(event){...});
$(".edit-form a:contains(cancel)")
.live("click", function(event){...});
});

Save these changes, reload http://localhost/ in your browser, and then hover over an event title to see the dateZoomplugin in action

The event title enlarges when hovered over

The event title enlarges when hovered over

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

PHP and Jquery Topics