2011-04-28 4 views
1

에 테이블 컬럼의 변경 내용 :Rails3 : 테이블과 간단한보기 감안할 때 마우스 오버

 <% entries.each do |entry| %> 
      <tr> 
       <td class="align-left"><%= entry.date.strftime("%d.%m.%Y") %></td> 
       <td class="align-right><%= my_number_to_currency entry.amount_calc %></td> 
       <td class="align-left"><%= entry.description %></td> 
       <td class="align-left"><%= entry.tag %></td> 
      </tr> 
     <% end %> 

나는에 런타임에 entry.amount을 my_number_to_currency하기 (모든 항목) 두 번째 컬럼의 내용을 변경하려면 마우스를 다시 움직이면 다시 원래 값으로 변경됩니다. 또한 class = "over"또는 직접 요소의 색상을 설정하는 다른 스타일을 추가하고 싶습니다.

모든 포인터에 대해 Rails3에서 가장 좋은 방법이 될 수 있었으면 좋겠습니다 (단 하나의보기에서만 코드를 넣을 수있는 곳).

(비고 : my_number_to_currency은 정상 number_to_currency 생각, 간단한 도우미 내가 이미 자동 완성이 사용하고 도움이되는 경우가 있으므로 솔루션을 사용할 수있게되면 나는 JQuery와 태그 추가)

UPDATE를

나는 성공과 application.js에 다음과 같은 시도 :

$(document).ready(function() { 
    $(".joint").hover(
     function() { $(this).children(".full").show(); $(this).children(".half").hide(); }, 
     function() { $(this).children(".half").show(); $(this).children(".full").hide(); } 
    ); 
}); 

답변

1

이 ...

,536 정확하게 당신이 찾고있는 무엇, 그러나 당신의 위치에 I이었다하지 않을 수 있습니다

기본값과 마우스 오버 값을 <td>에 입력하고 jQuery hide() 및 show()를 사용하여 값을 숨기고 나타냅니다. 이렇게하면 사용자가 자바 스크립트를 사용할 수 있는지 여부에 관계없이 정보를 사용할 수 있습니다 (즉 점진적 향상). 또한 일정한 마우스 이동으로 필요한 서버 호출 수가 줄어 듭니다.

태블릿, iPad, iPhone 및 기타 기기에 마우스 오버 기능이 없으므로 마우스 오버가 아닌 다른 이벤트를 연결해야합니다.

jQuery/javascript를 사용하여 원하는 모든 기능을 수행 할 수 있습니다. jQuery를 처음 사용하는 경우 documentation 바위가 있습니다.