Writing a Plugin (^) ❘ 261
element, except those with contextMenuDisabled and contextMenuSeparator (fi ltered out using
not()) class names receives a contextMenuHover class name when the user hovers over those
elements within the context menu. If you look at the CSS, this causes a CSS gradient to be applied
during mouseover.
if (!this.data('contextMenu'))
{
this.data('contextMenu', true)
.addClass('contextMenu')
.bind(
'mouseover.contextMenu',
function()
{
$(this).data('contextMenu', true);
}
)
.bind(
'mouseout.contextMenu',
function()
{
$(this).data('contextMenu', false);
}
);
As explained earlier in this chapter, this refers to the element or elements that are selected. In this
case this refers directly to this selection:
$('div#applicationContextMenu')
If you were to do console.log(this) in Safari or Chrome, you’d see the HTML source code of <div
id="applicationContextMenu">.The preceding block of code begins by checking to see if data has
been attached to that
element, under the name contextMenu.
if (!this.data('contextMenu'))
{
If no data is found, data is created.
this.data('contextMenu', true)
Invisibly, data is attached to the
if (!this.data('contextMenu'))
{
If no data is found, data is created.
this.data('contextMenu', true)
Invisibly, data is attached to the
element, within jQuery.
Then the
Then the
element is given the class name contextMenu.
.addClass('contextMenu')
That
.addClass('contextMenu')
That
element now looks like this:
And that same
And that same
element receives mouseover and mouseout events, which themselves set the same
data on the
data on the
element, which is used to keep track of whether the context menu is active. If the
mouse cursor isn’t over the context menu, then the context menu is considered inactive, and if a
[http://www.it-ebooks.info](http://www.it-ebooks.info)
mouse cursor isn’t over the context menu, then the context menu is considered inactive, and if a
[http://www.it-ebooks.info](http://www.it-ebooks.info)