2011-07-29 22 views
1

選択した行のコンテキストメニューを実装します。 1つの行を選択できます。ユーザーが右クリックすると、コンテキストメニューが表示されます。ユーザーが選択されていない他の行をクリックすると、コンテキストメニューが表示されません。選択された行のコンテキストメニューが表示されます

マイコードが記載されています。私にアイデアを教えてください?

の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> 

答えて

2

あなたのコードはかなりあります。あなただけのいくつかが欠落している:あなたのCSSクラスの

  1. 、あなたが選択した行をレンダリングするときposition: 'absolute'

  2. を設定する必要があり、あなたはそれにrowselectedというクラスを追加しています。あなただけ選択するようにclass="even rowselected"を設定するか、あなたのセレクタクラスを変更する必要が $(selector).addClass('rowselected')

  3. でそれをすることによってこれを行うことができますいずれか$('.even.rowselected, .odd.rowselected')

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

関連する問題