Расширение строки в таблице на основе div - PullRequest
Новая
       31

Расширение строки в таблице на основе div

0 голосов
/ 16 июня 2010

У меня есть стек <div> элементов, которые показывают имя.Я хотел бы включить ссылку + сбоку от каждой <div>, которая при нажатии расширяет <div> и добавляет более подробную информацию (из контроллера RoR).

После нажатиягде-то в сети я нашел link_to_remote и связанные с ним материалы RoR, но я не могу найти правильную комбинацию для совместной работы.Может кто-нибудь указать мне на учебник или показать, как должен выглядеть взаимодействие между контроллером и представлением?

Спасибо!

1 Ответ

0 голосов
/ 16 июня 2010

Вы можете сделать это очень легко с помощью Javascript в следующем примере: 

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

Если вы установили начальную видимость DIV на скрытый, вы можете использовать функцию toggleDiv, показанную выше, чтобы переключать видимость любого DIV с данным ID. Возможно, вам потребуется настроить определения стилей для DIV, чтобы они отображались рядом со знаками плюса (например, поместите их в соседний <TD>'s в таблице), но я решил, что все будет просто.

Удачи.

...