Než budeme pokračovat v detailnějším popisu vytváření a používání dynamických efektů s využitím JavaScriptu, ukažme několik praktických příkladů. Ty demonstrují malou část možností, které vývojář má. Pro větší názornost jsou příklady opatřeny komentáři přímo v kódu. Všechny příklady jsou vyzkoušeny v prohlížečích MSIE 5.5 SP 2 a Netscape 7.0 Preview Release 1.

První jednoduchý příklad podbarví červeně všechna povinná textová pole formuláře. Příklad předpokládá, že id povinného pole bude vždy začínat trojicí písmen „req“.

<script language=“JavaScript“>
// kolekce prvků prvního formuláře na stránce
var el=document.forms[0].elements
// cyklus přes všechny prvky kolekce
for (i=0; i<el.length;i++) {
  if (el[i].tagName==“INPUT“) {
    if ((el[i].type==“text“) && (el[i].id.substring(0,3)==“req“)) {
      el[i].style.backgroundColor=“#ffdddd“
    }
  }
}
</script>

Druhý příklad na stisknutí tlačítka přidá do existující tabulky dva řádky. Pro názornost je pro každý řádek použit jiný způsob vložení. V prvním případě jsou použity metody insertRow a insertCell, jejichž argumentem je index, jenž udává pořadí, kam bude řádek (resp. buňka) přidán.

Poslední řádek je přidáván obecným způsobem, kterým mohou být do dokumentu přidávány jakékoli prvky (Nodes). V tomto případě je zapotřebí přesně dodržovat nadřízenost a podřízenost prvků. Pokud bychom se metodou appendChild pokusili vložit řádek (tr) přímo do tabulky (table) a nikoli jejího těla (tbody), bude výsledek záviset na použitém internetovém prohlížeči a ne vždy bude odpovídat očekávání. Příklad si můžete předem vyzkoušet.

<html>
<head>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>
<script language=“JavaScript“>
function Pridej() {
/* Přidání prvního řádku */
  // proměnná tab odkazuje na tabulku
  var tab=document.getElementById(‚tabulka‘);
  // vložení řádku
  var radek=tab.insertRow(tab.rows.length);
  // vložení buňky
  var bunka=radek.insertCell(0);
  // text buňky
  bunka.innerHTML=“Položka 2″;

/* Přidání druhého řádku */
  // proměnná tb odkazuje na tělo tabulky
  var tb=tab.tBodies[0];
  var newRow = document.createElement(‚TR‘);
  // vložení řádku
  tb.appendChild(newRow);
  var newCell = document.createElement(‚TD‘);
  // vložení buňky
  newRow.appendChild(newCell);
  var newText = document.createTextNode(‚Položka 3‘)
  // text buňky
  newCell.appendChild(newText);
}
</script>
</head>

<body>
<table border=“1″ id=“tabulka“>
  <tr>
    <td>Položka</td>
  </tr>
</table>
<input type=“button“ value=“Přidat“ onClick=“Pridej()“>
</body>
</html>

Třetí příklad předvádí DHTML formu ovládacího prvku TabStrip (karta se záložkami), který známe z desktopových aplikací. Příklad si můžete předem vyzkoušet.

<html>
<head>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>
<STYLE TYPE=“text/css“>
/*styl tabulky*/
.tab_div {
padding : 10px;
background-color : #cccccc;
border-left : #888888 2px solid;
border-bottom : #888888 2px solid;
border-right : #888888 2px solid;
font-family : Arial;
font-size : 12px;
}
/*styl stlačené záložky */
.on {
padding : 1px;
border-left : 0px;
border-top : #aaaaaa 2px solid;
border-right : 0px;
cursor : hand;
font-weight : bold;
text-align : center;
font-family : Arial;
font-size : 12px;
}
/*styl nestlačené záložky */
.off {
font-weight : normal;
padding : 1px;
border-left : #ffffff 1px solid;
border-top : #ffffff 1px solid;
border-bottom : #888888 2px solid;
border-right : #888888 1px solid;
cursor : hand;
text-align : center;
font-family : Arial;
font-size : 12px;
}
</style>
<script language=“JavaScript“>
function Table (tab) {
  // pořadové číslo záhlaví
  var cislo=tab.substring(3,4)
  // DIV tagy dokumentu
  var deti=document.getElementsByTagName(„DIV“)
  // kolekce buněk prvního řádku tabulky
  var zahlavi=document.getElementById(‚tabulka‘).rows[0].cells
  // cyklus přes všechny tagy DIV
  for (i=0; i<deti.length; i++) {
    // zneviditelnit všechny DIV tagy
    strTemp=deti[i].id
    document.getElementById(strTemp).style.display=“none“;
    // všechna tlačítka nastavit na neaktivní
    zahlavi[i].className=“off“
  }
  // zviditelnit příslušný DIV
  document.getElementById(tab).style.display=“block“;
  // příslušné tlačítko nastavit jako aktivní
  document.getElementById(‚tabulka‘).rows[0].cells[cislo].className=“on“
}
</script>
</head>
<body>

<TABLE WIDTH=270 CELLSPACING=0 CELLPADDING=0 ID=’tabulka‘ class=’tab_div‘ BORDER=0>
  <tr>
    <td onClick=“Table (‚Tab0‘)“ class=“on“>První</td>
    <td onClick=“Table (‚Tab1‘)“ class=“off“>Druhý</td>
    <td onClick=“Table (‚Tab2‘)“ class=“off“>Třetí</td>
    <td onClick=“Table (‚Tab3‘)“ class=“off“>Čtvrtý</td>
  </tr>
  <TR><TD colspan=4>
    <div id=“Tab0″>
      První záložka
    </div>
    <div id=“Tab1″ style=“display:none“>
      Druhá záložka
    </div>
    <div id=“Tab2″ style=“display:none“>
      Třetí záložka
    </div>
    <div id=“Tab3″ style=“display:none“>
      Čtvrtá záložka
    </div>
    <span>
      Obecný neměnný text
    </span>
  </TD></TR>
</TABLE>
</body>
</html>

Žádný příspěvek v diskuzi

Odpovědět