JQuery_ Novice to Ninja - Earle Castledine [141]
$('#disclaimer').trigger('do-toggle');
})
When the button is clicked, the disclaimer is toggled. It might seem like the long way round compared to just hiding and showing with the toggle button, but now we’ve done two very important tasks: we’ve moved the code responsibility to the element itself, and given ourselves the ability to fire the event from any other location. Whether we want to toggle the disclaimer via our toggle button, or via a small icon at the top of the screen, there’s no need to replicate the code—we just fire the do-toggle event from wherever we like.
But wait, there’s more! The bind/trigger system also lets you append parameters when you fire events. Each triggering element can pass different data, so the event handler can customize its response. This makes custom events very powerful; you can now create widgets that can elegantly be controlled by multiple other elements on the page, so you can cleanly separate and isolate page behavior and make your code far more reusable.
As an example, we’re going to put an alternate trigger mechanism on the page for our animated content panes from the section called “Bouncy Content Panes” in Chapter 3. In this example, we made cool-looking content panes showing celebrity biographies that bounced open and closed when their headings were clicked. For clarity here, we’ll omit the bouncing effect, so when the user clicks on the biography headings the panes will toggle instantly.
However, there’ll also be a select box above the panes. When a celebrity is chosen from the list, the biography will toggle in the same manner; the same event handler will fire, except this time we’ll have a nice sliding effect.
Our select box trigger contains a list of the available biographies that the user can view. Later, we’ll attach a change event handler to it to trigger the sliding effect:
chapter_09/12_custom_events_with_params/index.html (excerpt)
Here is the important part. We are binding our custom reveal event to all of the biography headings. The code will accept an extra parameter, which we’ll use to determine how to display the biographies. If the effect parameter is set to ease, we’ll slideToggle, otherwise the user will see the standard nonsliding toggle:
chapter_09/12_custom_events_with_params/script.js (excerpt)
$('#bio h3').bind('reveal', function(e, effect) {
if (effect == 'ease') {
$(this).next().slideToggle();
} else {
$(this).next().toggle();
}
})
.click(function() {
// Trigger 1 : plain toggle
$(this).trigger('reveal');
});
Because our first trigger has no need to add any effect, we won’t add any parameters to the trigger call. When the bind code runs, it finds no effect parameter, so it does the regular toggle:
chapter_09/12_custom_events_with_params/script.js (excerpt)
$('#chooser')
.change(function() {
// Trigger 2: slidey toggle
$('#bio h3:contains(' + $(this).val() + ')')
.trigger('reveal', 'ease');
});
When the user changes the current selection in the select list, we find the correct content pane and trigger the reveal event again. But this time we add the 'ease' parameter, so the user experiences the fancy sliding version.
Adding data to custom events is a fantastic way to encapsulate your widget’s code, and expose an interface that other d evelopers can use to customize your functionality. To pass multiple items to the bind function, you need to wrap the trigger’s parameters in an array:
chapter_09/12_custom_events_with_params/script.js (excerpt)
$('#bio h3:contains(' + $(this).val() + ')')
.trigger('reveal', ['ease',2000]);
Unbinding and Namespacing
jQuery can create some amazing effects with just a handful of actions: the majority of our controls used no more than a few actions, and very little JavaScript code. As you start to expand your controls and effects—converting them to plugins and using multiple controls together to make bigger, cooler controls—you’ll find that your events start