redakcja/static/contextmenu/index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">\r
   2 \r
   3 <html xmlns="http://www.w3.org/1999/xhtml">\r
   4 \r
   5         <head>\r
   6                 <title>jQuery Context Menu Plugin Demo</title>\r
   7                 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />\r
   8                 \r
   9                 <style type="text/css">\r
  10                         BODY,\r
  11                         HTML {\r
  12                                 padding: 0px;\r
  13                                 margin: 0px;\r
  14                         }\r
  15                         BODY {\r
  16                                 font-family: Verdana, Arial, Helvetica, sans-serif;\r
  17                                 font-size: 11px;\r
  18                                 background: #FFF;\r
  19                                 padding: 15px;\r
  20                         }\r
  21                         \r
  22                         H1 {\r
  23                                 font-family: Georgia, serif;\r
  24                                 font-size: 20px;\r
  25                                 font-weight: normal;\r
  26                         }\r
  27                         \r
  28                         H2 {\r
  29                                 font-family: Georgia, serif;\r
  30                                 font-size: 16px;\r
  31                                 font-weight: normal;\r
  32                                 margin: 0px 0px 10px 0px;\r
  33                         }\r
  34                         \r
  35                         #myDiv {\r
  36                                 width: 150px;\r
  37                                 border: solid 1px #2AA7DE;\r
  38                                 background: #6CC8EF;\r
  39                                 text-align: center;\r
  40                                 padding: 4em .5em;\r
  41                                 margin: 1em;\r
  42                                 float: left;\r
  43                         }\r
  44                         \r
  45                         #myList {\r
  46                                 margin: 1em;\r
  47                                 float: left;\r
  48                         }\r
  49                         \r
  50                         #myList UL {\r
  51                                 padding: 0px;\r
  52                                 margin: 0em 1em;\r
  53                         }\r
  54                         \r
  55                         #myList LI {\r
  56                                 width: 100px;\r
  57                                 border: solid 1px #2AA7DE;\r
  58                                 background: #6CC8EF;\r
  59                                 padding: 5px 5px;\r
  60                                 margin: 2px 0px;\r
  61                                 list-style: none;\r
  62                         }\r
  63                         \r
  64                         #options {\r
  65                                 clear: left;\r
  66                         }\r
  67                         \r
  68                         #options INPUT {\r
  69                                 font-family: Verdana, Arial, Helvetica, sans-serif;\r
  70                                 font-size: 11px;\r
  71                                 width: 150px;\r
  72                         }\r
  73                         \r
  74                 </style>                \r
  75                 \r
  76                 <script src="../js/lib/jquery-1.7.2.min.js" type="text/javascript"></script>\r
  77                 <script src="jquery.contextMenu.js" type="text/javascript"></script>\r
  78                 <link href="jquery.contextMenu.css" rel="stylesheet" type="text/css" />\r
  79                 \r
  80                 <script type="text/javascript">\r
  81                         \r
  82                         $(document).ready( function() {\r
  83                                 \r
  84                                 // Show menu when #myDiv is clicked\r
  85                                 $("#myDiv").contextMenu({\r
  86                                         menu: 'myMenu'\r
  87                                 },\r
  88                                         function(action, el, pos) {\r
  89                                         alert(\r
  90                                                 'Action: ' + action + '\n\n' +\r
  91                                                 'Element ID: ' + $(el).attr('id') + '\n\n' + \r
  92                                                 'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + \r
  93                                                 'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'\r
  94                                                 );\r
  95                                 });\r
  96                                 \r
  97                                 // Show menu when a list item is clicked\r
  98                                 $("#myList UL LI").contextMenu({\r
  99                                         menu: 'myMenu'\r
 100                                 }, function(action, el, pos) {\r
 101                                         alert(\r
 102                                                 'Action: ' + action + '\n\n' +\r
 103                                                 'Element text: ' + $(el).text() + '\n\n' + \r
 104                                                 'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + \r
 105                                                 'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'\r
 106                                                 );\r
 107                                 });\r
 108                                 \r
 109                                 // Disable menus\r
 110                                 $("#disableMenus").click( function() {\r
 111                                         $('#myDiv, #myList UL LI').disableContextMenu();\r
 112                                         $(this).attr('disabled', true);\r
 113                                         $("#enableMenus").attr('disabled', false);\r
 114                                 });\r
 115                                 \r
 116                                 // Enable menus\r
 117                                 $("#enableMenus").click( function() {\r
 118                                         $('#myDiv, #myList UL LI').enableContextMenu();\r
 119                                         $(this).attr('disabled', true);\r
 120                                         $("#disableMenus").attr('disabled', false);\r
 121                                 });\r
 122                                 \r
 123                                 // Disable cut/copy\r
 124                                 $("#disableItems").click( function() {\r
 125                                         $('#myMenu').disableContextMenuItems('#cut,#copy');\r
 126                                         $(this).attr('disabled', true);\r
 127                                         $("#enableItems").attr('disabled', false);\r
 128                                 });\r
 129                                 \r
 130                                 // Enable cut/copy\r
 131                                 $("#enableItems").click( function() {\r
 132                                         $('#myMenu').enableContextMenuItems('#cut,#copy');\r
 133                                         $(this).attr('disabled', true);\r
 134                                         $("#disableItems").attr('disabled', false);\r
 135                                 });                             \r
 136                                 \r
 137                         });\r
 138                         \r
 139                 </script>\r
 140         </head>\r
 141         \r
 142         <body>\r
 143                 \r
 144                 <h1>jQuery Context Menu Plugin Demo</h1>\r
 145                 <p>\r
 146                         This plugin lets you add context menu functionality to your web applications.\r
 147                 </p>\r
 148                 \r
 149                 <p>\r
 150                         <strong>Tip:</strong> Try using your keyboard to make a selection.\r
 151                 </p>\r
 152                 \r
 153                 <p>\r
 154                         <a href="http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/">Back to the project page</a>\r
 155                 </p>\r
 156                 \r
 157                 <h2>Demo</h2>\r
 158                 \r
 159                 <div id="myDiv">\r
 160                         Right click to view the context menu\r
 161                 </div>\r
 162                 \r
 163                 <div id="myList">\r
 164                         <ul>\r
 165                                 <li>Item 1</li>\r
 166                                 <li>Item 2</li>\r
 167                                 <li>Item 3</li>\r
 168                                 <li>Item 4</li>\r
 169                                 <li>Item 5</li>\r
 170                                 <li>Item 6</li>\r
 171                         </ul>\r
 172                 </div>\r
 173                 \r
 174                 <div id="options">\r
 175                         <p>\r
 176                                 <input type="button" id="disableItems" value="Disable Cut/Copy" />\r
 177                                 <input type="button" id="enableItems" value="Enable Cut/Copy" disabled="disabled" />\r
 178                         </p>\r
 179                         \r
 180                         <p>\r
 181                                 <input type="button" id="disableMenus" value="Disable Context Menus" />\r
 182                                 <input type="button" id="enableMenus" value="Enable Context Menus" disabled="disabled" />\r
 183                         </p>\r
 184                 </div>\r
 185                 \r
 186                 <ul id="myMenu" class="contextMenu">\r
 187                         <li class="edit"><a href="#edit">Edit</a></li>\r
 188                         <li class="cut separator"><a href="#cut">Cut</a>\r
 189                           <ul>\r
 190                             <li class="pe"><a href="#pe">Pe</a></li>\r
 191                           </ul>\r
 192                         </li>\r
 193                         <li class="copy"><a href="#copy">Copy</a></li>\r
 194                         <li class="paste"><a href="#paste">Paste</a></li>\r
 195                         <li class="delete"><a href="#delete">Delete</a></li>\r
 196                         <li class="quit separator"><a href="#quit">Quit</a></li>\r
 197                 </ul>\r
 198                 \r
 199         </body>\r
 200 </html>\r