As an application developer, I try to always keep in mind that a new behavior or user interface element, as intuitive as it may be, is something the user isn't familiar with. It increases the learning curve for the user, which can often drive users away from your application. Long story short, user interface (UI) elements that your users are familiar with make them feel at ease with your application. Thus, they are more likely to continue to use your application.
I noticed this when I was teaching newbies how to use the Internet. On the desktop, people are used to having to double click on an application to launch it. So when they are on a website and I ask them to click on a link, more often than not they tend to click it twice.
In the past several years, Web-based applications have gained in popularity in comparison to desktop applications. Still, the one major advantage that desktop applications had over Internet applications is usability. They inherently support keyboard shortcuts, file storage and context menus. Recently, Internet applications have been adding these features rather quickly. In fact, keyboard shortcuts, local storage and context menus have all become possible in Internet applications as well. In this article, we are going to see how you can implement context menus in your Internet applications using jQuery.
Hijacking the Right Click
Enabling this function involves a few steps. First, we need to take control of the right click. Fortunately, there is a jQuery plugin that enables us to do this. Download the jQuery library and the right click plugin.
The plugin allows us to handle three events: right click, right mouse down and right mouse up. Usually, the right click will suffice, but I mention the others in case you need to attach the event to one of them.
The following code allows us to capture the event we are interested in:
This is the most critical part of the script. Once we are able to capture the event, we simply need to display a div next to the cursor and style it to look like a context menu.
However, before we go into the details, let's see a working demo of the context menu. You can download the source code here.
The Context Menu
Let's look at the details of the code. First, we will study the markup of the context menu.
The markup is pretty simple. The first div -- #context-menu-bkg -- is required to give the context menu a slight transparency. The lines following it are the menu items that comprise the context menu. You will notice that some of the menu items are disabled. This is often the case in a real application. Instead of hiding the menu items altogether, it is often better to disable them.
Handing the Right Click
Earlier, we learned how to attach an event to the right click. We will now use it. The following code handles the right click. (Note: #right-click-controller is the div that will accept the right click.)
This function needs to be called after the element that captures the right click is created. Typically, you can call it when the page loads. This function does the following:
- creates an overlay
divon top of everything else to capture clicks outside the context menu - calls a function to show the menu next to the cursor
These two functions are pretty straightforward. ShowContextMenu() shows the context div and the context background div and adjusts its height so that the entire context menu gets the transparency. HideContextMenu() hides all the divs that were shown. It also hides the overlay div if it has not yet been deleted. If you doubt the necessity of the #context-menu-bkg div and think that we could have added the transparency to the #context-menu div, the problem is that the transparency would apply to the entire div, including its content.
Find a programming school near you