-<!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