(^250) ❘ CHAPTER 9 PLUGINS
{
// In a jQuery plugin; 'this' is already a jQuery ready object
// Performing an operation like addClass() works on one
// or more items, depending on the selection.
return this.addClass('movieSelected');
},unselect : function()
{
return this.removeClass('movieSelected');
}
});console.log($.fn);The call to console.log() allows you to examine the structure of jQuery itself, both built-in
plugins and custom third-party plugins. In Firefox’s web console, when you click the console
entry that represents console.log($.fn), you see a list expand in the right column that is fi lled
with the names of jQuery plugins, both built-in plugins and custom plugins that have been added
via $.fn.extend().Writing a Context Menu jQuery Plugin
In Example 9-4, you write a more complicated jQuery plugin with some of the features that you’re
used to seeing in jQuery plugins, such as being self-contained, and the ability to apply behavior to
an element that has been prepared for use with a jQuery plugin through the application of a particu-
lar HTML structure and CSS. In this example, you can see how to transform an unordered list into
a custom context menu. To start, download or type in the following XHTML 5 document:<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="content-language" content="en-us" />
<title>Context Menu Plugin</title>
<script type='text/javascript' src='../jQuery.js'></script>
<script type='text/javascript' src='Example 9-4.js'></script>
<link type='text/css' href='Example 9-4.css' rel='stylesheet' />
</head>
<body class='contextMenuContainer'>
<div id='applicationContainer'>
<p>
jQuery plugins give you the ability to extend jQuery's functionality,
quickly and seamlessly. In this example you see how to make a context
menu plugin. It demonstrates some of what you might need to make a
context menu widget as a self-contained jQuery plugin.
</p>
<p class='applicationContextMenuToggles'>
<span id='applicationContextMenuDisable'>Disable Context Menu</
span> |