Náhrada ovládacího prvku posuvník pomocí JavaScriptu

29. ledna 2001

•

Jeden z pěkných ovládacích prvků mnoha Windows dialogů je takzvaný potenciometr neboli posuvník. V tomto článku si ukážeme, jak můžeme pomocí JavaScriptu vyrobit alespoň částečnou náhradu tohoto prvku na našich HTML stránkách.

Na rozdíl od standardního posuvníku nemůžeme jeho náhradu v HTML stránce ovládat tažením, ale pouze kliknutím na nové hodnotě – i přes toto omezení se prvek dá ovládat vcelku „intuitivně“. Vyzkoušejte si to:

Kromě samotné HTML stránky si musíme připravit dva obrázky, první (pojmenovaný zde „jezdec.gif“) zobrazuje jezdce, tedy onu šipku směřující dolů, druhý („linka.gif“) je stejných rozměrů jako první obrázek a zobrazuje prázdnou čáru.

Celý příklad jsme v tomto případě umístili do nadřazené tabulky a do formuláře, pojmenovaného „dest“. V něm jsme vytvořili textové pole se jménem „field1“, do nějž při pohybu posuvníku zapisujeme aktuální pozici-hodnotu prvku posuvník. Toto není nezbytně nutné, je však dobré zachovat alternativní způsob zadání hodnoty pro návštěvníky bez JavaScriptu.

Zde je HTML kód zmíněné tabulky:

<form name="dest">
<table bgcolor="#C6C6C6" cellpadding="0" cellspacing="0" border="0" >
<tr><td height="43">  </td> </tr>
<tr><td><script> createSlider(10,3) </script> </td></tr>
<tr><td>   Hodnota:<input type="text" name="field1" size="3" value="3">   </td></tr>
</table>
</form>

V druhém řádku tabulky, v místě vyhrazeném pro posuvník, voláme funkci createSlider(length,pos). Ta zabezpečuje vykreslení posuvníku o délce length a výchozí pozici jezdce. Zde je její kód – umístěn může být nejlépe v hlavičce stránky:

function createSlider(length,pos) {
    document.write("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">")
    document.write("<tr>")
    for(i=1; i<=length; i++ ) {
        document.write("<td>")
        document.write("<a href=\"javascript:void(0)\" onclick=\"sliderOnclick(" + i + ")\" >");
        document.write( "<img border= \"0\" name=\"slider" + i +
                "\" src=\"" + (i==pos?"jezdec.gif":"linka.gif") + "\" >")
        document.write("</a></td>")
    }
    document.write("</tr></table>")
    iCurrPos = pos
}

Funkce vytvoří jednořádkovou tabulku o length sloupcích, kdy každý sloupec obsahuje obrázek linky nebo jezdce, zapouzdřený do odkazu. U odkazu definujeme handler události onclick, který zabezpečí vlastní funkčnost posuvníku. V Internet Exploreru bychom se obešli i bez odkazu (handlert onclick lze definovat i pro obrázek), Netscape však uznává onclick pouze pro odkaz, pro obrázek nikoliv.

V závěru funkce nastavujeme proměnnou iCurrPos. To je pomocná proměnná, udávající aktuální pozici jezdce. Samozřejmě ji musíme v kódu definovat:

var iCurrPos

Poslední částí příkladu je samotný handler události onclick, zde pojmenovaný sliderOnclick(index). Parametr index na vstupu funkce určuje číslo odkazu – a tím i pozici posuvníku – na které došlo ke klepnutí myší (pro obsluhu více posuvníků v rámci jedné stránky bychom museli přidat další parametr a kód trochu rozšířit). Zde je funkce sliderOnclick():

function sliderOnclick(index) {
    var myimage= eval("document.slider" + iCurrPos)
    myimage.src = "linka.gif"
    iCurrPos = index
    document.dest.field1.value = iCurrPos
    myimage= eval("document.slider" + index)
    myimage.src = "jezdec.gif"
}

V první části funkce nahradíme obrázek jezdce na původní pozici posuvníku obrázkem linky. Poté změníme hodnotu pomocné proměnné iCurrPos, udávající aktuální pozici jezdce. Provedeme nějaký další kód, který chceme při posuvu dělat – v tomto případě pouze přepisujeme aktuální pozici jezdce do formulářového políčka, ale můžeme například zvětšovat/zmenšovat závislý obrázek apod. Nakonec zobrazíme obrázek jezdce na jeho nové pozici.

A to je pro tentokrát vše. Přeji příjemnou zábavu s touto drobnou hříčkou.