sydcanem / bootstrap-contextmenu Goto Github PK
View Code? Open in Web Editor NEWContext menu plugin for Twitter's Bootstrap framework
Home Page: http://sydcanem.com/bootstrap-contextmenu/
Context menu plugin for Twitter's Bootstrap framework
Home Page: http://sydcanem.com/bootstrap-contextmenu/
#15 with position: 'fixed' on the context menu, the position is not correct.
using e.clientX and e.clientY fixes the problem
Menu key - http://en.wikipedia.org/wiki/Menu_key.
Tested this on an Ubuntu machine. The element which triggers contextmenu on right click was selected / focussed. Then pressed the menu button. Browser's contextmenu opens, not bootstrap-contextmenu.
I digged in a bit more and 'contextmenu' event is tiggered on pressing menu key. So it would seem bootstrap-contextmenu is somehow missing that event? If no, I would appreciate any advice with regards to what could be wrong / how can I debug this in my setup.
Hello,
Check this Fiddle.
http://jsfiddle.net/bababalcksheep/e3Y9u/.
Works great on dynamic elements too. for example new row in table etc.
Because you use .attr('data-target') if I dynamicly add .data('tartget', val) the plugin ignores the value... may want to switch it to checking .data('target').
It would be great if this plugin support the open / close methods.
For example $('#context').contextmenu('open');
I need support for touchscreen on mobile devices. I would like to open menu when user tap-and-hold instead of right mouse click
I activated a contextmenu using data attributes on multiple input fields as below:
<div class="inputfield" id="input-field1" data-toggle="context" data-target="#context-menu">
<div class="inputfield" id="input-field2" data-toggle="context" data-target="#context-menu">
<div class="inputfield" id="input-field3" data-toggle="context" data-target="#context-menu">
....
There is no easy way to invoke onItem for the contentmenu unless I do:
$('#context-menu ul li').each(function(i, li) {
$(li).click(function() {
alert($(this).text());
});
});
or I do the following multiple times for each field:
$('#input-field1').contextmenu({
target:'#context-menu',
onItem: function(e, item) {
alert($(item).text());
}
});
...
// THIS DOES NOT WORK
$('.inputfield').each(function() {
$(this).contextmenu({
target:'#context-menu',
onItem: function(e, item) {
alert($(item).text());
});
});
I am expecting something more robust like:
$('#content-menu').setup({
onItem: function(e, item) {
alert($(item).text());
}
});
Does this make sense?
I'm loving this context menu, but I can't figure out how to trigger it on a left mouse click. I figure someone has probably asked for/developed a solution for this, but I am unable to see it in the documentation/examples. Have I missed something?
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library sydcanem/bootstrap-contextmenu
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "sydcanem/bootstrap-contextmenu",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
I know this has been asked before (e.g. #8, #14) but both of them have a link to a gist that doesn't exist any more, so I'll ask this again.
Assuming I have markup like this:
<table>
<tr>
<td data-toggle="context" data-target="#context-menu">Delete</td>
<td data-toggle="context" data-target="#context-menu">Rename</td>
<td data-toggle="context" data-target="#context-menu">Copy</td>
</tr>
</table>
<div id="context-menu">
<ul class="dropdown-menu" role="menu">
<li><a tabindex="-1" href="#" onclick="eventHandler('Action1')">Action1</a></li>
<li><a tabindex="-1" href="#" onclick="eventHandler('Action2')">Action2</a></li>
</ul>
</div>
function eventHandler(action){
alert(action + ": How do I get the original <td>"?");
}
How do I get the original <td>
element that was right-clicked without using $().contextmenu();
?
Hello.
<table>
<tr id="row_0">
<td>a</td>
<td>b</td>
</tr>
<tr id="row_1">
<td>c</td>
<td>d</td>
</tr>
</table>
I want get id value this row right click in table.
Please help me. Thank!
Plugin does support jquery object as target option.
var target = $('#context-menu');
$('.context').contextmenu({
target:target ,
})
Context Menu not viewable on browser dimensions is smaller than the context element.
hi
we trying to bind bootstrap to iframe basically we wanted context menu only for iframe. context menu binds and works fine for DIV but not for iframe.. If any help or suggestion in this regard it will be of great help
thank
I have simple code like this:
$('.canvas').contextmenu({
target: '#canvas-menu'
});
When I open the menu and click the canvas, the menu doesn't close. In my app, the canvas covers the entire screen, making it hard for the user to close the menu without selecting a menu item.
Are submenus supported?
Hey there,
The plugin does not seem to 'hide' (open) contextmenu's when a new one is opened.
I saw something about it in the documentation, but it does not seem to work. Not when I use Javascript to toggle them, nor data-toggle.
Thanks for the script, I've modified it to add a after call once the menu was closed :)
Modify constructor LN42
this.before = this.options.before || this.before
this.onItem = this.options.onItem || this.onItem
this.after = this.options.after || this.after
Modify closemenu LN79
,closemenu: function(e) {
if(this.getMenu().hasClass('open'))
this.after();
this.getMenu().removeClass('open');
}
Add default after function LN92
,after: function(e) {
return true;
}
Add to clearMenus LN170
,clearMenus: function(e) {
if (!e.ctrlKey) {
$('[data-toggle=context]').each(function() {
if(this.getMenu().hasClass('open'))
this.after();
this.getMenu()
.removeClass('open');
});
}
}
In line 5095 of jquery-1.10.2.js error
Uncaught TypeError: Object # has no method 'apply'
<<<< DEBUG >>>>>
handleObj.origType = 'contextmenu'
https://jsfiddle.net/zumcncjx/1/
If you have a target="_blank" or even _self anchor (link) in a context menu, they do not work. Removing the return false;
from the closemenu function fixes the issue, but I'm not sure of the other ramifications.
Hi,
Thanks for the plugin, it looks nice, but what is the license ? Can I use it in commercial website ?
Thanks
If I annotate two divs with data-toggle="context" but point data-target at two different context menus, I can get both menus to show simultaneously by right clicking each div in succession. Note Bootstrap's implementation of Dropdowns, for example: http://getbootstrap.com/javascript/#dropdowns. In their docs, "Note: The data-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it."
Is this by design? If so, perhaps a plugin-level option to allow only one context menu to be visible at any time is in order. I'll end up solving this in application code if what I'm suggesting is undesirable.
Thank you very much for your work on this plugin--it saved us valuable time in a crunch situation!
Hello,
I try to use the javascript plugin, but I cannot get it work.
See jsfiddle here : http://jsfiddle.net/7qswF/2/
Am I missing something ?
Let's say you have a ul list with a single contextmenu so you have only one menu to manage and It also prevent to have several contextmenu opened at the same time on each li.
The thing is that it is impossible to get the li caller so you can perform the desired action following that li contextmenu just clicked.
hi
i wonder what can be done to prevent right click on the bootstrap-contextmenu itself.
also, we can still select text on the menu.
Using "absolute" position for the location of the menu drop-down will put the position absolutely relative to any parent divs whose position has been set to "relative". "Fixed" position ignores any parents. Looks like line 96 is where this would be changed. Thx.
I'm hoping this is an easy fix, but I want it to only open when I click the body, not it's children. (it's for a quick background image changer)
The clearMenus()
function relies on the presence of the originally clicked dom element in order to close the menu.
If the element is removed from the dom the .open
class never gets removed and the menu remains visible.
See this jsFiddle.
As an example scenario, I'm using an AngularJS ng-repeat
directive to render a number of taskbar "items". Right clicking on these taskbar items opens up the bootstrap contextmenu.
One of options within this menu is responsible for closing a module and removing the taskbar item from the dom. When this happens the context menu stays visible.
I have an image gallery and each item will have basically the same context menu. In the docs it is said that all events are fired on the context menu level though. Is there a way to pass the source of which element has opened the context menu into that event?
Right now, I am building in the way that each item has its own context menu and I find that a bit redundant, as I think one context menu should suffice, as long as I could differentiate from where it was opened.
If it is not possible, then please consider this a feature request to pass a source into the context menu handler.
I hope my use case is understandable and thank you very much for this plugin.
I'm attaching the context menu with ".class" selector. The onItem callback is executed N times (N= the elements that meet the jQuery selector) because for each element that meets the selector the contextmenu is individually created (:162) and therefore calls the listen function (binding the on click event).
Any recomendation how to fix this? (Except using a global binding for it with a check inside the before callback)
When I click on an item, onItem()
is called and the menu is hidden. But hide.bs.context
and hidden.bs.context
are not triggred.
$('#filetree').contextmenu(
target: "#filetree-contextmenu"
scopes: "li > a"
before: (event, element, target)->
event.preventDefault()
elem = event.target
if elem.tagName isnt 'A'
event.preventDefault()
@closemenu(event)
return false
true
onItem: (c,e) ->
contextmenu_click(c,e)
).on('hide.bs.context', ->
alert()
#Not Triggered
)
Is there any way to click on an item
the context menu is not hidden
and hidden by clicking
in the body of the page?
What's the license of this plug in -- Apache License?
Again, not sure if this will affect anyone negatively, but I have a lot of absolutely positioned divs with z-indexes, and I'll need the context menu to always be above all others. Might be reasonable to add a z-index to the menu of say 9999, as I imagine most people would have z-indexes much lower than that, but would always want the menu on top. Thx again!
tried it with bootstrap 3 and on div columns. Doesnot work.
Menu opens outside row -> column scope.
hi
i got another issue.
if u implement the context menu on the entire page, and right click at the bottom two corners, horizontal scrollbars appears.
thnx
The given demo page [1] fails with plenty of errors. Additionaly the demo page is based on an old version. It still uses $(item)
instead of e.target
.
hi, i'm using single context menu shared between several elements.
Is it possible in current version to find out which element was clicked to open menu?
The solution can be to toggle some class of element, e.g. context-open
..
Is it possible to add icons (glyphicons specifically) to the contextmenu somehow? The position of the icons would be to the left of the text.
Hello,
I'm improving my cms with twitter bootstrap. My cms uses a right context menu to manage contents (you can see this video to see how it works http://www.alphalemon.com/alphalemon-cms-contents-management-screencast-tutorial).
Since now I've used medialize context menu https://github.com/medialize/jQuery-contextMenu but, due to twitter bootstrap, I'd like to use its context menu.
I've tried to use your plugin in my cms but it forces me to add position relative to the target div where the context menu must be displayed and this is not possible in my situation. Is it possible to remove this requirement?
Thanks a lot
I have a sort of tree view -- it's a bunch of nested uls inside a div at the top-level. When I open the context menu on a tree item and select a menu item, onItem
is invoked and the context
argument is always set to the whole div, not the specific item (e.g. the li, or the span in the li's label) that was right-clicked.
My current workaround is to use $(document.elementFromPoint(e.clientX, e.clientY))
in the before handler, but this seems a bit hacky. Is there another way to get at the clicked element?
Code on README.MD doesn't work:
$('.context').contextmenu({
target:'#context-menu',
before: function(e,context) {
}
});
You have to explicitly return true to get this to work:
$('.context').contextmenu({
target:'#context-menu',
before: function(e,context) {
return true;
}
});
The documentation says:
If this function returns false, the context menu will not be displayed.
...but the functionality is more like:
If this function returns true, the context menu will be displayed.
I have submitted a pull request (#76) with the fix and unit tests for this issue.
Hey There,
thanks for great work done. I was trying to populate submenus/multilevel context menu.please share example if you have.
Thanks I advance,
Ganesh.
How I can display the menu with javascript without using the right mouse button?
Hi,
Is there a way to manually open context menu if some event happens ?
Actually what I am trying to accomplish is this
I have a big table with many cells and when I attach context menu for each of them it becomes slow - when I right click I wait a little for it to appear. What I think to do is to attach a right click event to each cell, and when the user clicks on it show the context menu.
Thanks
Found it already !!
Hey there,
it is currently not possible to handle multiple context menus within one page. Opening a second context menu works, but the closing of this menus does not work correctly.
Thanks and best regards
Johannes
bootstrap supports "dropdown-submenu".
When I use submenu with this plugin,
Parent Menu is ok but child menu goes off screen if too close to border of parent.
http://getbootstrap.com/2.3.2/components.html
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
'''
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.