--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">\r
+\r
+<html xmlns="http://www.w3.org/1999/xhtml">\r
+\r
+ <head>\r
+ <title>jQuery Context Menu Plugin Demo</title>\r
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />\r
+ \r
+ <style type="text/css">\r
+ BODY,\r
+ HTML {\r
+ padding: 0px;\r
+ margin: 0px;\r
+ }\r
+ BODY {\r
+ font-family: Verdana, Arial, Helvetica, sans-serif;\r
+ font-size: 11px;\r
+ background: #FFF;\r
+ padding: 15px;\r
+ }\r
+ \r
+ H1 {\r
+ font-family: Georgia, serif;\r
+ font-size: 20px;\r
+ font-weight: normal;\r
+ }\r
+ \r
+ H2 {\r
+ font-family: Georgia, serif;\r
+ font-size: 16px;\r
+ font-weight: normal;\r
+ margin: 0px 0px 10px 0px;\r
+ }\r
+ \r
+ #myDiv {\r
+ width: 150px;\r
+ border: solid 1px #2AA7DE;\r
+ background: #6CC8EF;\r
+ text-align: center;\r
+ padding: 4em .5em;\r
+ margin: 1em;\r
+ float: left;\r
+ }\r
+ \r
+ #myList {\r
+ margin: 1em;\r
+ float: left;\r
+ }\r
+ \r
+ #myList UL {\r
+ padding: 0px;\r
+ margin: 0em 1em;\r
+ }\r
+ \r
+ #myList LI {\r
+ width: 100px;\r
+ border: solid 1px #2AA7DE;\r
+ background: #6CC8EF;\r
+ padding: 5px 5px;\r
+ margin: 2px 0px;\r
+ list-style: none;\r
+ }\r
+ \r
+ #options {\r
+ clear: left;\r
+ }\r
+ \r
+ #options INPUT {\r
+ font-family: Verdana, Arial, Helvetica, sans-serif;\r
+ font-size: 11px;\r
+ width: 150px;\r
+ }\r
+ \r
+ </style> \r
+ \r
+ <script src="../js/lib/jquery-1.4.2.min.js" type="text/javascript"></script>\r
+ <script src="jquery.contextMenu.js" type="text/javascript"></script>\r
+ <link href="jquery.contextMenu.css" rel="stylesheet" type="text/css" />\r
+ \r
+ <script type="text/javascript">\r
+ \r
+ $(document).ready( function() {\r
+ \r
+ // Show menu when #myDiv is clicked\r
+ $("#myDiv").contextMenu({\r
+ menu: 'myMenu'\r
+ },\r
+ function(action, el, pos) {\r
+ alert(\r
+ 'Action: ' + action + '\n\n' +\r
+ 'Element ID: ' + $(el).attr('id') + '\n\n' + \r
+ 'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' + \r
+ 'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'\r
+ );\r
+ });\r
+ \r
+ // Show menu when a list item is clicked\r
+ $("#myList UL LI").contextMenu({\r
+ menu: 'myMenu'\r
+ }, function(action, el, pos) {\r
+ alert(\r
+ 'Action: ' + action + '\n\n' +\r
+ 'Element text: ' + $(el).text() + '\n\n' + \r
+ 'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' + \r
+ 'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'\r
+ );\r
+ });\r
+ \r
+ // Disable menus\r
+ $("#disableMenus").click( function() {\r
+ $('#myDiv, #myList UL LI').disableContextMenu();\r
+ $(this).attr('disabled', true);\r
+ $("#enableMenus").attr('disabled', false);\r
+ });\r
+ \r
+ // Enable menus\r
+ $("#enableMenus").click( function() {\r
+ $('#myDiv, #myList UL LI').enableContextMenu();\r
+ $(this).attr('disabled', true);\r
+ $("#disableMenus").attr('disabled', false);\r
+ });\r
+ \r
+ // Disable cut/copy\r
+ $("#disableItems").click( function() {\r
+ $('#myMenu').disableContextMenuItems('#cut,#copy');\r
+ $(this).attr('disabled', true);\r
+ $("#enableItems").attr('disabled', false);\r
+ });\r
+ \r
+ // Enable cut/copy\r
+ $("#enableItems").click( function() {\r
+ $('#myMenu').enableContextMenuItems('#cut,#copy');\r
+ $(this).attr('disabled', true);\r
+ $("#disableItems").attr('disabled', false);\r
+ }); \r
+ \r
+ });\r
+ \r
+ </script>\r
+ </head>\r
+ \r
+ <body>\r
+ \r
+ <h1>jQuery Context Menu Plugin Demo</h1>\r
+ <p>\r
+ This plugin lets you add context menu functionality to your web applications.\r
+ </p>\r
+ \r
+ <p>\r
+ <strong>Tip:</strong> Try using your keyboard to make a selection.\r
+ </p>\r
+ \r
+ <p>\r
+ <a href="http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/">Back to the project page</a>\r
+ </p>\r
+ \r
+ <h2>Demo</h2>\r
+ \r
+ <div id="myDiv">\r
+ Right click to view the context menu\r
+ </div>\r
+ \r
+ <div id="myList">\r
+ <ul>\r
+ <li>Item 1</li>\r
+ <li>Item 2</li>\r
+ <li>Item 3</li>\r
+ <li>Item 4</li>\r
+ <li>Item 5</li>\r
+ <li>Item 6</li>\r
+ </ul>\r
+ </div>\r
+ \r
+ <div id="options">\r
+ <p>\r
+ <input type="button" id="disableItems" value="Disable Cut/Copy" />\r
+ <input type="button" id="enableItems" value="Enable Cut/Copy" disabled="disabled" />\r
+ </p>\r
+ \r
+ <p>\r
+ <input type="button" id="disableMenus" value="Disable Context Menus" />\r
+ <input type="button" id="enableMenus" value="Enable Context Menus" disabled="disabled" />\r
+ </p>\r
+ </div>\r
+ \r
+ <ul id="myMenu" class="contextMenu">\r
+ <li class="edit"><a href="#edit">Edit</a></li>\r
+ <li class="cut separator"><a href="#cut">Cut</a>\r
+ <ul>\r
+ <li class="pe"><a href="#pe">Pe</a></li>\r
+ </ul>\r
+ </li>\r
+ <li class="copy"><a href="#copy">Copy</a></li>\r
+ <li class="paste"><a href="#paste">Paste</a></li>\r
+ <li class="delete"><a href="#delete">Delete</a></li>\r
+ <li class="quit separator"><a href="#quit">Quit</a></li>\r
+ </ul>\r
+ \r
+ </body>\r
+</html>\r
fnp / redakcja.git / blobdiff