Skip to content

Commit

Permalink
rewrote that beast to use delegated events
Browse files Browse the repository at this point in the history
  • Loading branch information
@rodneyrehm
rodneyrehm committed Jun 17, 2011
1 parent 21d1c04 commit f600943
Show file tree
Hide file tree
Showing 5 changed files with 461 additions and 563 deletions.
198 changes: 37 additions & 161 deletions index.html
View file
Expand Up @@ -18,179 +18,55 @@
background: #FFF;
padding: 15px;
}

H1 {
font-family: Georgia, serif;
font-size: 20px;
font-weight: normal;
}

H2 {
font-family: Georgia, serif;
font-size: 16px;
font-weight: normal;
margin: 0px 0px 10px 0px;
}

#myDiv {
width: 150px;
border: solid 1px #2AA7DE;
background: #6CC8EF;
text-align: center;
padding: 4em .5em;
margin: 1em;
float: left;
}

#myList {
margin: 1em;
float: left;
}

#myList UL {
padding: 0px;
margin: 0em 1em;
}

#myList LI {
width: 100px;
border: solid 1px #2AA7DE;
background: #6CC8EF;
padding: 5px 5px;
margin: 2px 0px;
list-style: none;
}

#options {
clear: left;
}

#options INPUT {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 150px;
}

</style>

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
</style>
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="jquery.contextMenu.js" type="text/javascript"></script>
<link href="jquery.contextMenu.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

$(document).ready( function() {

// Show menu when #myDiv is clicked
$("#myDiv").contextMenu({
menu: 'myMenu'
},
function(action, el, pos) {
alert(
'Action: ' + action + '\n\n' +
'Element ID: ' + $(el).attr('id') + '\n\n' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'
);
});

// Show menu when a list item is clicked
$("#myList UL LI").contextMenu({
menu: 'myMenu'
}, function(action, el, pos) {
alert(
'Action: ' + action + '\n\n' +
'Element text: ' + $(el).text() + '\n\n' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'
);
});

// Disable menus
$("#disableMenus").click( function() {
$('#myDiv, #myList UL LI').disableContextMenu();
$(this).attr('disabled', true);
$("#enableMenus").attr('disabled', false);
});

// Enable menus
$("#enableMenus").click( function() {
$('#myDiv, #myList UL LI').enableContextMenu();
$(this).attr('disabled', true);
$("#disableMenus").attr('disabled', false);
});

// Disable cut/copy
$("#disableItems").click( function() {
$('#myMenu').disableContextMenuItems('#cut,#copy');
$(this).attr('disabled', true);
$("#enableItems").attr('disabled', false);
});

// Enable cut/copy
$("#enableItems").click( function() {
$('#myMenu').enableContextMenuItems('#cut,#copy');
$(this).attr('disabled', true);
$("#disableItems").attr('disabled', false);
});

});

</script>
</head>

<body>

<h1>jQuery Context Menu Plugin Demo</h1>
<p>
This plugin lets you add context menu functionality to your web applications.
</p>

<p>
<strong>Tip:</strong> Try using your keyboard to make a selection.
</p>

<p>
<a href="http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/">Back to the project page</a>
</p>

<h2>Demo</h2>

<div id="myDiv">
Right click to view the context menu
<script>
$(function(){
$.contextMenuFoo({selector: '.context-menu-one', items: {
edit: {name: "Edit", icon: "edit", callback: $.noop},
cut: {name: "Cut", icon: "cut", callback: $.noop},
copy: {name: "Copy", icon: "copy", callback: $.noop},
paste: {name: "Paste", icon: "paste", callback: $.noop},
delete: {name: "Delete", icon: "delete", callback: $.noop, className: "context-menu-separator"},
quit: {name: "Quit", icon: "quit", callback: $.noop},
}});
$.contextMenuFoo({selector: '.context-menu-two', items: {
foo: {name: "Foo", icon: "foo", callback: $.noop},
disabled: {className: "context-menu-separator", name: "disabled", icon: "bar", callback: $.noop, disabled: true},
bar: {name: "Bar", icon: "bar", callback: function(){ return false; }},
toggle: {name: "toggle", icon: "bar", callback: function($trigger, opt){ opt.items.foo.disabled = !opt.items.foo.disabled; return false; }}
}});
});

// demonstrate dynamic binding…
$(function(){
$('<button>add context-menu-one</button>').bind('click', function(){
$('<div class="context-menu-one" style="width: 200px; height: 200px; background-color:magenta; display:inline-block">menu 1 injected</div>')
.appendTo(document.body);
}).prependTo(document.body);
});
</script>
<div style="width: 200px; height: 200px; background-color:red; display:inline-block" class="context-menu-one">
menu 1
</div>

<div id="myList">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<div style="width: 200px; height: 200px; background-color:blue; display:inline-block" class="context-menu-two">
menu 2
</div>

<div id="options">
<p>
<input type="button" id="disableItems" value="Disable Cut/Copy" />
<input type="button" id="enableItems" value="Enable Cut/Copy" disabled="disabled" />
</p>

<p>
<input type="button" id="disableMenus" value="Disable Context Menus" />
<input type="button" id="enableMenus" value="Enable Context Menus" disabled="disabled" />
</p>
<div style="width: 200px; height: 200px; background-color:blue; display:inline-block" class="context-menu-two">
menu 2
</div>
<div style="width: 200px; height: 200px; background-color:green; display:inline-block" class="context-menu-two context-menu-disabled">
menu 2 disabled
</div>

<ul id="myMenu" class="contextMenu">
<li class="edit"><a href="#edit">Edit</a></li>
<li class="cut separator"><a href="#cut">Cut</a></li>
<li class="copy"><a href="#copy">Copy</a></li>
<li class="paste"><a href="#paste">Paste</a></li>
<li class="delete"><a href="#delete">Delete</a></li>
<li class="quit separator"><a href="#quit">Quit</a></li>
</ul>

</body>
</html>

0 comments on commit f600943

Please sign in to comment.