PDA

View Full Version : jQuery Context Menu script



dexter24
12-24-2009, 11:58 AM
1) Script Title:
jQuery Context Menu script
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm#
3) Describe problem:
hy there
i am new here and really like your staff
i want to use this script (works fine ) but if you want for exemlpe to associate a function that acts in the html element where we right click ,we can't cause i we don't know the object

i explain : i have a table and i want everytime the user right clik in a row ,the contexte menu shows delete this row , and call the function deleteRow(obj) // obj is the TR in which we had right clik

so i think the solution is to change the .addcontextmenu function to add the obj( right cliked)
//Usage: $(elementselector).addcontextmenu('id_of_context_menu_on_page' ,obj)


so in html every row will be like this

"<tr onclick='javascript:this.addcontextmenu('id_of_context_menu_on_page' ,this)'>"
but because i am not too good in javascript and don't know jquery i could'nt do that
please tell me if is it possible to do that?

please help and sorry fo my bad english

dexter24
12-27-2009, 08:58 PM
please help my freinds:(

ddadmin
12-28-2009, 12:45 AM
There are more than 1 thing involved here. Is deleteRow(obj) an actual function you already have handy, in which you're just asking how to use the context menu to invoke it on the row that's right clicked on?

dexter24
12-28-2009, 08:38 AM
There are more than 1 thing involved here. Is deleteRow(obj) an actual function you already have handy, in which you're just asking how to use the context menu to invoke it on the row that's right clicked on?

yes deleteRow(obj) is already a function that i made ,have also addRow,editRow (put inputs in the td ..) ,validateRow (with ajax...)
so i need to use the context menu to invoke it on the row that's right clicked on

thank you very much for your help

ddadmin
12-29-2009, 04:48 AM
Try adding the line in red into the .js file:


$target.bind("contextmenu", function(e){
$contextmenu.data('$targettr', $(e.target).closest('tr'))
jquerycontextmenu.hidebox($, $('.jqcontextmenu')) //hide all context menus (and their sub ULs)
jquerycontextmenu.positionul($, $contextmenu, e)
jquerycontextmenu.showbox($, $contextmenu, e)
return false
})

With this change, whenever the user right clicks witin a TR, the script will store a reference to this TR inside the context menu's DIV container. You can then retrieve this reference to do as you like when a link is clicked inside the context menu, such as delete it. In the below example, it merely alerts this TR when a context menu link is clicked on:




<script type="text/javascript">
jQuery(document).ready(function($){
$('tr').addcontextmenu('contextmenu2') //apply context menu to all TRs on the page
})
</script>

<!--HTML for Context Menu 2-->
<ul id="contextmenu2" class="jqcontextmenu">
<li><a href="#" onClick="alert(jQuery('#contextmenu2').data('$targettr').get(0))">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
</ul>


In other words:


jQuery('#contextmenu2').data('$targettr').get(0)

contains a reference to the TR element as a DOM object.

dexter24
12-29-2009, 10:36 AM
thank you very much ddadmin for your answer
is it possible to get reference to the object (right clicked) ,because i have functions that will act in tab cells or in a tab columns (to delete columns ,move right or left i right clik in the first cell in the thead...)

perhaps i will edit 2 context menus ,one that keeps reference to the tr ,and one other that keeps reference to the closest th(the cell in which i right clik to edit on culumn) but i don't think it's the best thing to dp
i have all functions but really need a context menu to apply them

also can u help me with jquery syntax ,do you recommend a website or tutorials to understand it because i don't understand how it works

thank you for your time

ddadmin
12-29-2009, 08:17 PM
Well, the line:


$contextmenu.data('$targettr', $(e.target).closest('tr'))

causes the corresponding TR element to be stored and accessible using jQuery('#contextmenu2').data('$targettr'). Lets say you wish to store the closest TH element instead. Just change "tr" above to "th", ie:


$contextmenu.data('$targetth', $(e.target).closest('th'))

Or if you want to just store the element the mouse actually right clicked over (which will change depending on what the mouse is over within the TR element at the time of right click), you'd use:


$contextmenu.data('$targetelement', $(e.target))

Pretty much all you need as far as jQuery syntax can be found here (http://docs.jquery.com/Main_Page).