Keskustelu: Nettisivujen teko: Collapse / Expand (JavaScript)

Hoover [23.07.2007 16:34:53]

Mitenkä esim. tablen <tr> -elementit voisi muuntaa sellaisiksi, että kun rivillä vaikka painetaan jotain plus-nappia, niin rivin kaikki tiedot näytettäisiin? Miinuksella sitten saisi muunnettua rivin takaisin tiivistelmänäkymäksi.

Hieman tutkiskelin jo tätä asiaa googlella, mutta en oikein keksinyt että mitenkä tämä toimii. Ilmeisesti tämän toiminta tuottaa myös ongelmia eri selaimille?

esim. table

<table>
<tr>
    <th>#</th>
    <th>Etunimi</th>
    <th>Sukunimi</th>
</tr>
<tr>
    <td>1</td>
    <td>Jarski</td>
    <td>Söhveröinen</td>
</tr>
</table>

Tuollaisessa taulussa voisi olla vaikka tuossa ensimmäisessä solussa aina joku + -merkki, jota painamalla tulisi sitten jotain lisätietoa näkyviin käyttäjästä. Kun tämä lisätieto on esillä, niin sitten tulisi näkyviin - -merkki.

ajv [23.07.2007 18:38:28]

Löytyiskö täältä apua?

Olga [24.07.2007 08:13:58]

Ohessa pikaisesti kyhätty, suhtkoht toimiva esimerkki huonolla HTML-merkkauksella. Vaatii Prototype-kirjaston ja esimerkkikoodi toiminnassa löytyy osoitteesta http://www.wonderboy.info/test/toggle/. Ja sen verran vielä tuosta koodista, että nythän se piilottaa tuon extratiedon JavaScriptillä, jolloin ne käyttäjät joilla JS-tukea ei (jostain kumman syystä) ole, näkevät myös lisätiedon. Toinen vaihtoehto on laittaa piilotettaville elementeille CSS:llä display: none, mutta se on aika ruma tapa, sillä CSS tulee laittaa inlinenä (tagin sisälle). Tällöin ei kuitenkaan tuota välkkymistä tapahtuisi kenttiä piilotettaessa.

html:

<html>
  <head>
    <script type='text/javascript' src='prototype.js'></script>
    <script type='text/javascript' src='omaJs.js'></script>
    <script type='text/javascript'>
      Event.observe(window, 'load', init);
    </script>
  </head>

  <body>

    <table class='toggle' border='1'>
      <tr>
        <th>&nbsp;</th>
        <th>#</th>
        <th>Etunimi</th>
        <th>Sukunimi</th>
      </tr>
      <tr>
        <td class='click'>+</td>
        <td>1</td>
        <td>Teppo</td>
        <td>Tulppu</td>
      </tr>
      <tr class='info'>
        <td colspan='4'>Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum.</td>
      </tr>
      <tr>
        <td class='click'>+</td>
        <td>1</td>
        <td>Masa</td>
        <td>Nygane</td>
      </tr>
      <tr class='info'>
        <td colspan='4'>Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
doming id quod mazim placerat facer possim assum.</td>
      </tr>
    </table>

  </body>

</html>

omaJs.js:

var init = function ()
{
  hideAll(); // hide the info fields
  addTableObservers(); // add observers
};

var hideAll = function ()
{
  $$('table.toggle tr.info').invoke('hide');
};

var addTableObservers = function ()
{
  $$('table.toggle td.click').each(function (item)
  {
    $(item).observe('click', function ()
    {
      this.up().next().toggle();
      this.firstChild.nodeValue = this.firstChild.nodeValue == '+' ? '-' : '+';
    });
  });
};

Hoover [27.07.2007 22:23:16]

Kiitti esimerkeistä. Varsinkin tuo Olgan vastaus on miettimisen arvoinen tähän ongelmaan.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen