Truly Evil » jcfant http://trulyevil.com An exploration into frontend development Tue, 13 Oct 2009 19:26:16 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Custom Events in jQuery http://trulyevil.com/2009/05/07/custom-events-in-jquery/ http://trulyevil.com/2009/05/07/custom-events-in-jquery/#comments Thu, 07 May 2009 21:43:44 +0000 jcfant http://trulyevil.com/?p=83

Events seem daunting at first, but really jQuery makes them super simple. Events can be used to alter behavior or even have multiple events happen on a single state change.

We all know about events like click, onkeydown, onmousedown, onmouseover, etc. But you can fire custom events as well. First you need to understand how to fire events. You can do this by using the $().trigger() event through jQuery.

To do this, we will attach an event for the onchange to a select input. Then when the value changes we will fire a custom event called “update”.

First, the select box.

1
2
3
4
5
6
7
8
9
10
11
12
13

<select name="test" class="test">
<option value=" --- "> --- </option>
<option value=" Test 1"> Test 1</option>
<option value=" Test 2"> Test 2</option>
<option value=" Test 3"> Test 3</option>
<option value=" Test 4"> Test 4</option>
<option value=" Test 5"> Test 5</option>
<option value=" Test 6"> Test 6</option>
<option value=" Test 7"> Test 7</option>
<option value=" Test 8"> Test 8</option>
<option value=" Test 9"> Test 9</option>
<option value=" Test 10"> Test 10</option>
</select>
1
2
3

$('select.test').change( function() { 
     $('select.test').trigger('update', $(this).val()); 
});

Now we need to listen to this event, we can do this by using .bind() to listen to events triggered on a DOM element.

1
2
3

$('select.test').bind('update', function(e, data) { 
     console.log(data);
);

Thats the basic way of firing and listening to custom events in jQuery. We can attach more listeners to the “update” event by attaching them in the same way.

We can also do this in a more OO way. Lets say we have multiple objects/plugins on the page that need to update when the custom event is fired. We can do this by adding the bind code into the object, then when the event is fired we can update our objects.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var object1 = new function() {
    var obj = this;
    this.name = "Object 1"; 
 
    $('select.test').bind('update', function(e, data) { obj.update(data); }); 
 
    this.update = function(data){
        console.log("Update from %o with %o", this, data);
    };  
 
    return this;
};  
 
var object2 = new function() { 
    var obj = this;
    this.name = "Object 2"; 
 
    $('select.test').bind('update', function(e, data) { obj.update(data); }); 
 
    this.update = function(data){
        console.log("Update from %o with %o", this, data);
    };  
 
    return this;
};

The console will log the following:
Update from Object name=Object 1 with ” Test 1″
Update from Object name=Object 2 with ” Test 1″

Currently we have just been passing the value to our update event, BUT you can actually pass more than just the value. You can pass ANY of javascript built in data types, including functions, objects and arrays. If we update the trigger to pass the jQuery object, here is what it would look like:

1

$('select.test').change( function() { $('select.test').trigger('update', $(this)); } );

And now our console would log something like the following:
Update from Object name=Object 1 with <select class=”test” name=”test”>
Update from Object name=Object 2 with <select class=”test” name=”test”>

Want to see this in action? You can view the demo here.

*Update fixed link to the demo

]]> http://trulyevil.com/2009/05/07/custom-events-in-jquery/feed/ 4 Using callbacks from plugins and other javascript objects. http://trulyevil.com/2009/05/07/callbacks-from-plugins/ http://trulyevil.com/2009/05/07/callbacks-from-plugins/#comments Thu, 07 May 2009 20:06:53 +0000 jcfant http://trulyevil.com/?p=68

Now that we’ve seen how to implement callbacks from our plugins, lets take a look at what we can do with them. I previously touched on the jQuery Plugin Development pattern subject and built a quick tabs plugin that featured callbacks (you can see a demo here), now lets start taking advantage of them.

 

First, lets setup our tabs.

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium aliquet risus a tristique. Proin pellentesque, urna sit amet vestibulum mollis, leo magna placerat ligula, ac tincidunt urna libero in nisi. Quisque blandit lorem id libero pulvinar vel viverra urna consequat. Sed nisl nibh, condimentum vel tincidunt in, bibendum id magna. Pellentesque eleifend est sed odio sollicitudin ultricies. Morbi porta metus nec nulla imperdiet pulvinar. Sed tincidunt augue id dui consectetur eleifend. Sed sit amet eros sit amet est viverra tristique. Quisque lorem tellus, faucibus sed vulputate nec, malesuada ac libero. Nulla facilisi. Morbi tincidunt sagittis enim, in viverra lorem mollis eget. In hac habitasse platea dictumst. Vivamus nec fermentum neque. Nulla facilisi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium aliquet risus a tristique. Proin pellentesque, urna sit amet vestibulum mollis, leo magna placerat ligula, ac tincidunt urna libero in nisi. Quisque blandit lorem id libero pulvinar vel viverra urna consequat. Sed nisl nibh, condimentum vel tincidunt in, bibendum id magna. Pellentesque eleifend est sed odio sollicitudin ultricies. Morbi porta metus nec nulla imperdiet pulvinar. Sed tincidunt augue id dui consectetur eleifend. Sed sit amet eros sit amet est viverra tristique. Quisque lorem tellus, faucibus sed vulputate nec, malesuada ac libero. Nulla facilisi. Morbi tincidunt sagittis enim, in viverra lorem mollis eget. In hac habitasse platea dictumst. Vivamus nec fermentum neque. Nulla facilisi.

Now that we have the tabs setup, lets add in some magic. We need to create an options hash that will contain our callbacks for beforeLoad, onload, and afterLoad.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var options = { 
                tab0 : { 
                            beforeLoad : '', 
                            onload : '', 
                            afterload : '', 
                        },  
                tab1 : { 
                            beforeLoad : '', 
                            onload : '', 
                            afterload : '', 
                        },  
                tab2 : { 
                            beforeLoad : '', 
                            onload : '', 
                            afterload : '', 
                        },  
            };

Now that we have the basic structure, lets add in some functionality. For this, we will create a loadItem object with a couple of functions that will help us along. You could just add the functionality straight to the options hash, however managing that can be a bit difficult and if you ever have to edit the options later on, it may be easier to just have a seconday object to do the heavy lifting.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var loadItem = new function() {
    this.createLoading = function(tabs){
        $('.tab' + tabs.getCurrentTab()).html($('<div class="loading"><img src="http://trulyevil.com/images/loading.gif" /></div>')).show();
        return true;
    };  
    this.get = function(tabs, url){
        $.get(url, function(data) { loadItem.loadData(tabs, data)
});
        return true;
    };  
    this.loadData = function(tabs, data){
        $('.tab' + tabs.getCurrentTab()).html(data);
    };  
    this.afterloading = function(tabs){
        $('.tab' + tabs.getCurrentTab()).show();
        return true;
    };  
};

Notice that each of the functions that will be called return a true value. If we return “false” for any one of the functions the callbacks will stop. Now all we need to do is to update the options hash with the calls to these functions and we will have a true progressivly enhanced tabs widget.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var options = { 
                tab0 : { 
                            beforeLoad : function() { return loadItem.createLoading(this) },
                            onload : function() { return loadItem.get(this, "/scripts/get.cgi?url=www.google.com") },
                            afterload : function() { return loadItem.afterloading(this) }
                        },  
                tab1 : { 
                            beforeLoad : function() { return loadItem.createLoading(this) },
                            onload : function() { return loadItem.get(this, "/scripts/get.cgi?url=www.google.com") },
                            afterload : function() { return loadItem.afterloading(this) }
                        },  
                tab2 : { 
                            beforeLoad : function() { return loadItem.createLoading(this) },
                            onload : function() { return loadItem.get(this, "/scripts/get.cgi?url=www.google.com") },
                            afterload : function() { return loadItem.afterloading(this) }
                        },  
            };

Notice how we pass “this” into each of the functions. Because of the way we setup the callbacks function for tabs, it applys the tabs object to the function that is being called. It allows us to call tabs.getCurrentTab() and have it return the current tab we are working with.

Now, all we need to do is to add the following to the bottom of our page to complete the tabs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

var loadItem = new function() {
    this.createLoading = function(tabs){
        $('.tab' + tabs.getCurrentTab()).html($('<div class="loading"><img src="http://trulyevil.com/images/loading.gif" /></div>')).show();
        return true;
    };  
    this.get = function(tabs, url){
        $.get(url, function(data) { loadItem.loadData(tabs, data) }); 
        return true;
    };  
    this.loadData = function(tabs, data){
        $('.tab' + tabs.getCurrentTab()).html(data);
    };  
    this.afterloading = function(tabs){
        $('.tab' + tabs.getCurrentTab()).show();
        return true;
    };  
};  
 
var options = { 
                tab0 : { 
                            beforeLoad : function() { return loadItem.createLoading(this) },
                            onload : function() { return loadItem.get(this, "/scripts/get.cgi?url=www.google.com") },
                            afterload : function() { return loadItem.afterloading(this) }
                        },  
                tab1 : { 
                            beforeLoad : function() { return loadItem.createLoading(this) },
                            onload : function() { return loadItem.get(this, "/scripts/get.cgi?url=www.google.com") },
                            afterload : function() { return loadItem.afterloading(this) }
                        },  
                tab2 : { 
                            beforeLoad : function() { return loadItem.createLoading(this) },
                            onload : function() { return loadItem.get(this, "/scripts/get.cgi?url=www.google.com") },
                            afterload : function() { return loadItem.afterloading(this) }
                        },  
            };  
$(document).ready(function() {
        $('div.tabs').tabs(options);
});

You can see the demo of this here.

]]> http://trulyevil.com/2009/05/07/callbacks-from-plugins/feed/ 0 Expanding the jQuery Plugin Development Pattern http://trulyevil.com/2009/05/01/eexpanding-the-jquery-plugin-development-pattern/ http://trulyevil.com/2009/05/01/eexpanding-the-jquery-plugin-development-pattern/#comments Fri, 01 May 2009 20:08:45 +0000 jcfant http://trulyevil.com/?p=10

Recently I was tasked with writing a jQuery plugin for a carousel. I am sure at this point you are asking yourself, “Why would you write another one when there are so many out there?”. I agree. However, while there are alot of very good carousel plugins, the requirements meant that I would end up having to edit the code anywyas. And, since this would be my first shot at writing a jQuery plugin from scratch and I figured it would be a good time to learn the process and to document some best practices/design patterns.

Getting Started:

Read through jQuery Authoring Guidelines, this will get you 90% of the way to writing your first plugin.

Patterns:

If you haven’t seen it yet, you need to checkout a post on LearningJquery.com by Mike Alsup. He came up with a good base for a design pattern on writing jQuery plugins:

There are a few requirements that I feel this pattern handles nicely:

  1. Claim only a single name in the jQuery namespace
  2. Accept an options argument to control plugin behavior
  3. Provide public access to default plugin settings
  4. Provide public access to secondary functions (as applicable)
  5. Keep private functions private
  6. Support the Metadata Plugin

While those are a great start, lets add some new ideas to it.

  1. Claim only a single name in the jQuery namespace
  2. Accept an options argument to control plugin behavior
  3. Provide public access to default plugin settings
  4. Provide public access to secondary functions (as applicable)
  5. Keep private functions private
  6. Support the Metadata Plugin
  7. Allow for extending the object via callbacks (either hooks or events) as applicable
  8. scope all selectors with the ‘this’ object

Setting Up the Pattern

For this example, I am going to write a tab plugin. I know, I know… again there are already so many out there. However, we need an example that will show off the 7-9 in the list, and really its not that hard to write.

Here is a full example that meets the first 6 rules in this design. I am not going to go into detail on each of the first 6, since they are well outlined by Mike Alsup.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

(function($){
 
    $.<span class="internal fn">fn.tabs = function(tabOptions) {
        // support mutltiple elements
        if (this.length > 1){ 
            this.each(function() { $(this).tabs(tabOptions) }); 
            return this;
        }   
 
        // SETUP private variabls;
        var pOne = ""; 
        var pTwo = ""; 
        //...
 
        // SETUP private functions;
        var findTabs = function() {
                                // do something ... 
                            }   
        var hooks = function() {
                                // do something ... 
                            }   
        // ... 
 
        // setup options
        var defaultOptions = { 
                                    debug : false
                                };  
        var options = $.extend({}, defaultOptions, tabOptions);
 
        this.intialize = function() {
                // support MetaData plugin
                if ($.meta){
                    options = $.extend({}, options, this.data());
                }   
        };  
 
        this.changeTab = function() {
            // change Tab 
        };  
 
        this.getOptions = function() {
            return options;
        };  
 
        return this.intiazlie();
    }   
})(jQuery);

#7 Extend the plugin via callbacks

Sounds complicated, but this will allow your plugin to remain flexible and not have to be redesigned each time something new and exciting comes up that you need to accomplish. Taking the code above, lets look at first the changeTab() routine.

1
2
3

this.changeTab = function() {
    // change Tab 
};

In order to make a call back we need to allow some options to be passed in. We set up the options like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

var options = { 
                    tab0  : {
                                onstart : function() { }, // do something here
                                onload : function() { }, // do something here
                                onfinished : function() { } // do something here
                            },
                    tab1  : {
                                // lets chain some methods together
                                onstart : function() { }, // do something here
                                onload : [ function() { }, function() { } ], // 2 methods each will be execute
                                onfinished : [ function() { }, function() { } ] // again 2 methods
                            }
                }

Now, when each of the two tabs loads, we can check and see if there are any callbacks that need to be called in order to extend the functionality. The new changeTab code would look something like this:

1
2
3
4
5
6
7
8
9
10
11

this.changeTab = function(element) {
    // find tab clicked
    var tabIndex = findTabIndex(element);
    hooks(this, options['tab' + tabIndex].onstart);
 
    // change Tab ... 
    hooks(this, options['tab' + tabIndex].onload);
 
    // tab.show();
    hooks(this, options['tab' + tabIndex].onfinished);
};

Now that we are checking to see if the functionality has been extended. Lets look at how we can actually call this in a generic way?

1
2
3
4
5
6
7
8
9

var hooks = function(thisObject, hookList){
    if (<span class="internal typeof">typeof hookList == 'function') {
        hookList.call(thisObject);
    } else if (/object|array/.test(<span class="internal typeof">typeof hookList)) {
        for (var i = 0; i < hookList.length; i++) {
            hookList[i].call(thisObject);
        }
    }
}

What exactly is this doing? First of all the hooks function takes 2 parameters. thisObject is equal to the object that you want the callback function to have “this” set to. and a method to call back on called hookList. The reason we call it list, is that we will check to see if hookList is an array of functions or just a single function. The following call passes in the tabs object and the onstart callbacks.

1

hooks(this, options['tab' + tabIndex].onstart);

In the hooks method, we have a little magic happening.

1

hookList.call(thisObject);

We use the .call(object) method on the function. Basically this sets the “this” inside of the function to the “thisObject” being passed into the function.

Scope all selectors with the ‘this’ object

This is actually really simple, but will control the scope of the objects returned by jQuery. Without this, you may clobber another widget on the page or jump outside of the element you are working on. Inside of the findTabs function we need to find all of the tabs and compare it to the current element that was clicked.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var findTabs = function(element){
    var index = 0;
    var selected = 0;
    $('.tabs li').each(function() {
                                        if (this == element){
                                            selected = index;
                                            $(this).addClass('selected');
                                        } else {
                                            $(this).removeClass('selected');
                                        }   
                                        index++;
                                    }); 
    return selected;
};

On the surface, there is nothing wrong with this. However, what happens if we have two different tab groups on the page? Nothing? How about a DOM the size of Amazon.com? Would this slow down? Yes, actually it would and you may or may not be acting on a set of tabs that aren’t your own.

So how do we fix this?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var findTabs = function(element){
    var index = 0;
    var selected = 0;
    $('.tabs li', this).each(function() {
                                        if (this == element){
                                            selected = index;
                                            $(this).addClass('selected');
                                        } else {
                                            $(this).removeClass('selected');
                                        }   
                                        index++;
                                    }); 
    return selected;
};

Wait, that is the same code? Close, but look closer at the $(’.tabs li’) selector. Notice, we now use $(’.tabs li’, this). (You could also use this.find(’.tabs li’); which uses less function lookups however thats a topic for another day). This limits the scope of the search for the tabs. It won’t clobber any other tabs on the page and you can even nest tabs once you are using this method.

* Update – Added in new Demo page. You can get the full code to play around with.

]]> http://trulyevil.com/2009/05/01/eexpanding-the-jquery-plugin-development-pattern/feed/ 29