Vylepšený posuvník pro vaše HTML stránky

Před třemi týdny vyšel na Interval.cz zajímavý článek týkající se vytvoření a vložení potenciometru z dialogových boxů Windows do HTML stránky. Rád bych tímto v mnohém autora doplnil, neboť takto zajímavý nápad si jistě zaslouží hlubší propracování a měl by dostát svého jména – „posuvník“. Hlavní věcí, kterou bych rád upřesnil je autorův názor, že nelze JS posuvník, narozdíl od svého originálního protějšku, ovládat manuálním tažením myší. Jak brzy uvidíte, možné to je.

Základem všeho je obrázek, který tvoří pozadí posuvníku, stejně jako v předchozím článku. Narozdíl od první verze však vytvoříme skutečný objekt „posunovátka“, kterým budeme manipulovat. Ten vytvoříme prostřednictvím tagu <div> s nastavením přesné pozice na stránce v pixelech. Samotné těleso představující „posunovátko“ netvoří pouhý GIF obrázek, nýbrž tabulka, která má tento GIF vložený pozadí. Proč? Pokud by byl objekt přímo obrázek, došlo by k situaci, kdy se při změně pozice tažením myší obejde funkce mající na starosti přesun objektu a přímo se zavolá interní drag&dop systému Windows. To ale v HTML stránkách není povoleno, což dá operační systém jednoznačně najevo.

Abyste věděli, co vlastně budeme dělat, klikněte zde na ukázku.

Stanovení hranic a volání funkcí

Nyní přistoupíme k vysvětlení principu některých konstrukcí a proměnných zajištující provoz objektu. Nejprve si vytvoříme pole, které bude obsahovat jednotlivé hodnoty hraničních bodů posuvníku v pixelech (první zarážka je na pixelu 65, druhá na 87 pixelu atd.). Tyto hodnoty vychází ze základního obrázku tvořícího pozadí a jsou samozřejmě individuální a závislé na jeho velikosti, umístění na stránce, počtu zarážek apod. Druhým krokem je stanovení tzv. Event actions, neboli přiřazení některým událostem určité akce (funkce). Mnozí z Vás asi z následujícího kódu došli k tomu, že po stisknutí tlačítka myši se provede funkce fun1, při změně pozice myši funkce fun2 a při uvolnění tlačítka myši funkce fun3.

Přejděme tedy k jednotlivým funkcím, jež se provádějí po nějaké události. Rád bych zde ještě poznamenal, že každá funkce volaná událostí využívá x,y souřadnic myši v době volání funkce. K takovýmto atributům se přistupuje pomocí konstrukce event.x. resp. event.y.

Přesun posuvníku stisknutím tlačítka myši

Funkce fun1 se aktivuje po každém stisknutí tlačítka myši. Funkce nejdříve zjistí zda se kursor nachází v prostru mezi zarážkami, pokud ano, přemístí posuvník na místo kliknutí. To se děje přiřazením hodnoty nové pozice objektu do proměnné style.left, proměnná down je zde proto, abychom zprávu o stisknutém tlačítku dali k dispozici i ostatním funkcím.

Přesun posuvníku tažením

Druhá funkce je volána po každém pohnutí myší. Zajišťuje klasické posouvání objektu myší (drag&drop). Opět je využito podobného principu jako u funkce první s tím rozdílem, že pozice objektu se mění při každém pohybu myši, čili s kurzorem. To ovšem vždy nechceme, proto jsou zde stanoveny podmínky, které posunutí umožní, pokud je hodnota proměnné down jedna (držíme-li stisknuté tlačítko) a nacházíme se v prostoru posuvníku.

Aktualizace informace o výběru a korekce pozice

Třetí funkce je aktivována po uvolnění tlačítka myši. Její hlavní náplní je korektně umístit posuvník tak, aby splnil představy uživatele. Je totiž téměř pravidlem, že uživatel neumístí posuvník přímo na hranici zarážky. Druhou činností je aktualizace informace o právě vybrané položce ve formulářovém poli. Obojí využívá funkci Vyber();

Funkce pracuje následovně – parametr value je proměnná aktuální pozice posuvníku. Parametr mod je proměnná, která udává ve kterém módu má funkce pracovat, respektive jakou hodnotu má vrátit. Nejprve zjistíme, mezi kterými hodnotami se posuvník nachází. Toho lze dosáhnout cyklem, který prochází pole mezních hodnot do té doby ,než je hodnota value větší než hodnota pole[x]. Známe tedy předchozí zarážku (pole[x-1]) a následující zarážku (pole[x]), mezi nimiž se „posouvátko“ nachází. Teď už zbývá pouze vyhodnotit, ke které jsme blíže, což lze provést porovnáním rozdílů zarážek a aktuální pozice. Pokud funkci voláme v  módu 0, vrátí číslo zarážky, v módu 1 vrátí přímo hodnotu v pixelech kam se posuvník poté přesune.

Výše popsané funkce a konstrukce fungují bez problémů v Internet Exploreru 5.0+ a v Opeře 5. Jak to však často bývá – bohužel, nikoliv v Netscape. Funkce lze samozřejmě napsat i úspornějším způsobem, také stanovení Event actions lze nastavit tak, abychom funkci fun2() nevolali úplně při každém pohybu myši. Určitě by také šla zobecnit pozice celého objektu tak, abychom jej nemuseli umísťovat na stránku přesně dle pixelů. Tím by však utrpěla srozumitelnost a povaha celého článku, která je spíše na ilustrační úrovni s cílem vysvětlit jednotlivé pricipy. To jak si posuvník upravíte a zoptimalizujete závisí pouze a jen na vás. Zdrojový kód příkladu včetně obrázků si můžete stáhnout zde.