Skip to content

Added a live selector #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sebmaster wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Added a live selector #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0543f1c
Added a liveSelector setting.
Jul 6, 2012
286f06b
Don't use Array.prototype.forEach since this is not supported in olde…
Jul 6, 2012
48e3db5
Disable the standard image border in IE.
Jul 6, 2012
88c1df4
Added examples to the readme and the demo for the new liveSelector se…
Jul 6, 2012
0d44a3a
Split the second example in it's own demo.
Jul 7, 2012
1615151
Clarified the usage example of the liveSelector in the README a bit.
Jul 7, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Include the files `jquery.contextmenu.css` and `jquery.contextmenu.js` in your p
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.6.2.min.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.contextmenu.js"></script>
<link rel="stylesheet" href="jquery.contextmenu.css">
... rest of your stuff ...
Expand Down Expand Up @@ -63,6 +63,23 @@ You can wire up a context menu like this:
{label:'Blah Blah', icon:'icons/book-open-list.png', action:function() { alert('clicked 3') } },
]});

If you add elements to your DOM dynamically you can use the liveSelector property in the settings object like this:

<div id="mythingy">
<div class="hasMenu">Menu 1</div>
<div>No-Menu 2</div>
</div>

$('#mythingy').contextPopup({
title: 'My Popup Menu',
liveSelector: '.hasMenu',
items: [
{label:'Some Item', icon:'icons/shopping-basket.png', action:function() { alert('clicked 1') } },
{label:'Another Thing', icon:'icons/receipt-text.png', action:function() { alert('clicked 2') } }
]});

If you then add more elements to #mythingy which have a hasMenu class they will react to a rightclick too, while the other elements will not.

Icons
-----

Expand Down
4 changes: 2 additions & 2 deletions demo/example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="../jquery.contextmenu.js"></script>
<link rel="stylesheet" href="../jquery.contextmenu.css">
<script>
Expand Down Expand Up @@ -32,4 +32,4 @@

right click out of the box to show the standard browser menu (if you're trying to view-source, right click here)
</body>
</html>
</html>
32 changes: 32 additions & 0 deletions demo/example2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="../jquery.contextmenu.js"></script>
<link rel="stylesheet" href="../jquery.contextmenu.css">
<script>
$(function() {

var id = 1;
$('#mythingy').contextPopup({
title: 'My Popup Menu',
liveSelector: 'div',
items: [
{label:'Entry1', icon:'icons/shopping-basket.png', action:function() { $('#mythingy').prepend('<div>Element '+(++id)+'</div>') } },
{label:'Entry2', icon:'icons/receipt-text.png', action:function() { alert('clicked 2') } }
]
});
});
</script>
</head>
<body style="background-color:#000000; color:#ffffff; font-family:arial,sans-serif">

<div id="mythingy" style="width:500px; height: 500px; margin: 10px; border:2px dashed #666666; padding:6px; overflow: auto">
<div>Element 1</div>
</div>

notice that in comparsion to example.html in this demo only the elements in the box have a contextmenu while the box itself has none and<br>
the added elements have a context menu without executing contextPopup on every element.<br>
right click out of the box to show the standard browser menu (if you're trying to view-source, right click here)
</body>
</html>
1 change: 1 addition & 0 deletions jquery.contextmenu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
}

.contextMenuPlugin > li > a img {
border: none;
position: absolute;
left: 3px;
margin-top: -2px;
Expand Down
18 changes: 12 additions & 6 deletions jquery.contextmenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ jQuery.fn.contextPopup = function(menuData) {
headerClass: 'header',
seperatorClass: 'divider',
title: '',
items: []
items: [],
liveSelector: null
};

// merge them
Expand All @@ -43,7 +44,7 @@ jQuery.fn.contextPopup = function(menuData) {
if (settings.title) {
$('<li class="' + settings.headerClass + '"></li>').text(settings.title).appendTo(menu);
}
settings.items.forEach(function(item) {
jQuery.each(settings.items, function(i, item) {
if (item) {
var rowCode = '<li><a href="#"><span></span></a></li>';
// if(item.icon)
Expand All @@ -66,9 +67,8 @@ jQuery.fn.contextPopup = function(menuData) {
menu.find('.' + settings.headerClass ).text(settings.title);
return menu;
}

// On contextmenu event (right click)
this.bind('contextmenu', function(e) {

function contextMenuHandler(e) {
var menu = createMenu(e)
.show();

Expand Down Expand Up @@ -104,7 +104,13 @@ jQuery.fn.contextPopup = function(menuData) {

// Cancel event, so real browser popup doesn't appear.
return false;
});
}

if (settings.liveSelector) {
this.on('contextmenu', settings.liveSelector, contextMenuHandler);
} else {
this.on('contextmenu', contextMenuHandler);
}

return this;
};
Expand Down