I was thrilled to find Cory LaViska’s jQuery Context Menu Plugin a few months ago. In very little time, I was able to integrate the context menu with the jQuery Treeview. I quickly had a really pretty user interface which took full advantage of limited real estate. And guess what. As promised, the plugin worked in Chrome, Safari 3, IE 6/7/8, Firefox 2/3 and Opera 9.5. Everything was perfect and I shipped to the Integration Environment.
One thing kept bugging though – right clicks aren’t the standard in a web environment. Sure, when one hovers over the treeview node, the mouse changed from an arrow to a pointer, but without help text most users will certainly left-click rather than right.
if (event.which == null) /* IE case */ button= (event.button < 2) ? "LEFT" : ((event.button == 4) ? "MIDDLE" : "RIGHT"); else /* All others */ button= (event.which < 2) ? "LEFT" : ((event.which == 2) ? "MIDDLE" : "RIGHT");
Yikes. The content menu code was simply checking if event.button == 2. No problem. Cory offers a jQuery Right Click Plugin which I’m sure works for windows but probably not the Mac either. (Please note I haven’t verified this.)
Anyway, I decided to address my UI design concern and the Safari Mac issue in one swoop. I decided to make the context menu respond to any mouse click event. This didn’t take much – especially after seeing how Bill Beckelman updated the library to recognize the left click.
First, I added an AnyClick option to the library defaults:
And then I trigger the context menu dropdown based on the following conditional:
Nothing tricky about that, right? Finally, I updated my menu setup to include the AnyClick value, if true:
Now the context menu works in “all” environments if you left, right or even middle click.