选择行上下文菜单

时间:2011-07-29 06:26:09

标签: jquery contextmenu

我想实现所选行的上下文菜单。有一次,可以选择一行,如果用户右键单击它,则应弹出上下文菜单。如果用户单击未选中的其他行,则不应弹出上下文菜单。

我的代码已经给出;请给我一个想法?

jQuery的:

jQuery(document).bind("contextmenu", function(e) {
     jQuery('#myMenu').hide();
     return false;
     });

     jQuery('.even').bind("contextmenu", function(e) {    
         jQuery('#myMenu').css({        
             top: e.pageY+'px',        
                 left: e.pageX+'px'    
                 }).show();    
         return false;


     });

     jQuery('.odd').bind("contextmenu", function(e) {    
         jQuery('#myMenu').css({        
             top: e.pageY+'px',        
                 left: e.pageX+'px'    
                 }).show();    
         return false;


         });

上下文菜单:

<ul id="myMenu" class="contextMenu">
      <li class="liReview"><a href="#liReview"><%include:SignforReview%></a></li>        
      <li class="liApprove"><a href="#liApprove"><%include:SignforApproval%></a></li>                    
      <li class="liRetReview"><a href="#liRetReview"><%include:RetractReviewSignature%></a></li>            
      <li class="liRetApprove"><a href="#liRetApprove"><%include:RetractReviewSignature%></a></li>            
</ul>

HTML -

<table> 
<tr id="line_<%=getData(ttEnl.line-num)%>" 
                        <%if:rowStyle(2)%>
                            class="even"
                            onmouseover="highlightLink(this,'even');" 
                            onmouseout="restore(this,'even');"
                            onclick="setSelected(this,'even');subjectSessionCheck('<%=getData(ttEnl.line-num)%>','<%=getData(ttEnl.rEnlRowid)%>','<%=getData(ttEnl.obj_enl)%>'); "
                        <%else:rowStyle%>
                            class="odd"
                            onmouseover="highlightLink(this,'odd');"
                            onmouseout="restore(this,'odd');"
                            onclick="setSelected(this,'odd');subjectSessionCheck('<%=getData(ttEnl.line-num)%>','<%=getData(ttEnl.rEnlRowid)%>','<%=getData(ttEnl.obj_enl)%>'); "
                        <%end:rowStyle%>
<td>.....</td>
<td>.....</td>
<td>.....</td>
</tr>
</table>

1 个答案:

答案 0 :(得分:2)

你的代码几乎就在那里。你只是遗漏了一些东西:

    在你的css课上
  1. ,你必须设置position: 'absolute'

  2. 渲染所选行时,您已向其中添加了一个名为rowselected的类。您可以通过设置class="even rowselected"或通过设置来完成此操作 $(selector).addClass('rowselected')

  3. 您必须将选择器类更改为仅选择$('.even.rowselected, .odd.rowselected')

  4. http://jsfiddle.net/rkw79/58dRL/