2010-06-16 5 views
0

이름이 표시된 <div> 요소 스택이 있습니다. 각 <div>의 측면에 + 링크를 포함하고 싶습니다. 클릭하면 <div>이 확장되고 (RoR 컨트롤러에서) 자세한 정보가 추가됩니다.div 기반 테이블의 행 확장

그물을 파고 들자 나는 link_to_remote과 관련된 RoR 항목을 찾았지만 함께 작동하도록 올바른 조합을 얻지 못하는 것 같습니다. 누군가가 튜토리얼을 가르쳐 주거나 컨트롤러와 뷰 상호 작용이 어떻게 생겼는지 보여줄 수 있습니까?

감사합니다.

+0

방해가되지 않는 이유는 무엇입니까? Jquery ?? –

+0

나는 사랑하고 싶습니다. 어떻게 설명 할 수 있니? – magneticMonster

답변

0
당신은 아래의 예에서 자바 스크립트와 정말 쉽게 할 수

: 당신이 숨겨진에 DIV 년대의 초기 가시성을 설정하면

<html> 
<head> 
<title>Text Page</title> 
<script language="Javascript"> 
    function toggleDiv(divid) { 
    if (document.getElementById(divid).style.visibility == 'hidden') { 
     document.getElementById(divid).style.visibility = 'visible'; 
    } 
    else { 
     document.getElementById(divid).style.visibility = 'hidden'; 
    } 
    } 
</script> 
</head> 
<body> 
    <span onClick="toggleDiv('div1');" style="cursor:pointer;">+</span> 
    <div id="div1" style="visibility:hidden;">This is DIV 1</div> 
    <span onClick="toggleDiv('div2');" style="cursor:pointer;">+</span> 
    <div id="div2" style="visibility:hidden;">This is DIV 2</div> 
</body> 
</html> 

, 당신은 전환하려면 위에 표시된 toggleDiv 기능을 사용할 수 있습니다 ID가 주어진 DIV의 가시성. DIV가 더하기 기호 (예 : 테이블에 인접한 <TD>'s에 넣으십시오) 옆에 표시되도록 DIV에 대한 스타일 정의를 조정해야 할 수도 있지만 간단하게 유지할 것이라고 생각했습니다.

행운을 비네.