Web Development with jQuery®

(Elliott) #1

Writing a Plugin (^) ❘ 251
Enable Context Menu</
span>





  • Open


  • Save

  • Save As...


  • Edit






The preceding XHTML 5 document sets up the necessary markup structure to begin a context
menu plugin. There’s a bit of text, a couple of elements that can toggle whether the context
menu is enabled, and the structure for the context menu itself. This markup is put together with the
following CSS, which styles the context menu to look a lot like a Mac OS X system context menu—
which I did because I can.
html,
body {
padding: 0 ;
margin: 0 ;
width: 100%;
height: 100%;
}
body {
font: 12px 'Lucida Grande', Helvetica, Arial, sans-serif;
background: #fff;
color: rgb(50, 50, 50);
line-height: 1.5em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div#applicationContainer {
width: 400px;
padding: 20px;
}
div.contextMenu {
display: none;
position: absolute;
z-index: 10 ;
top: 0 ;
left: 0 ;
width: 200px;
font-size: 14px;
background: #fff;
background: rgba(255, 255, 255, 0.95);
[http://www.it-ebooks.info](http://www.it-ebooks.info)
Free download pdf