f099c959720912a4d50e412bab42789c8b8ffd23
[redakcja.git] / 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