2011-07-29 6 views
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

코드는 꽤 많이있다. 당신은 단지 몇 가지 누락 :

  1. 당신의 CSS의 클래스를, 당신은 당신이 선택한 행을 렌더링 할 때 position: 'absolute'

  2. 을 설정해야합니다, 당신은 그것을 rowselected라는 클래스를 추가해야합니다. 당신은 선택 class="even rowselected"를 설정하거나 당신이 당신의 선택 클래스를 변경해야 $(selector).addClass('rowselected')

  3. 함께 수행하여이 작업을 수행 할 수 있습니다 $('.even.rowselected, .odd.rowselected')

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

관련 문제