Každý autor stránek asi někdy řešil problém, jak upozornit na důležitou událost, anketu nebo čím nahradit zdlouhavě se otevírající nové okno s vyskakovací reklamou. Jedno z možných řešení vám nabízím v následujícím článku.
Trik spočívá v zobrazení tabulky, která se chová stejně jako klasické okno ve Windows. Lze ji přesouvat, zavřít a znovu zobrazit. Vše si můžete vyzkoušet na příkladu.
Tělo dokumentu bude vypadat vcelku jednoduše:
<body onload="priradfunkce()">
<a href="#" id="ukaz">Zobraz</a>
<table id="tabulka">
<tr>
<td id="hlavicka"><b>Okno</b></td>
<td id="kriz">X</td>
</tr>
<tr>
<td colspan="2"><b>text k zobrazení</b></td>
</tr>
</table>
</body> |
|
Element A slouží k zobrazení tabulky, která tvoří zbytek těla. Skládá se ze dvou řádků. V prvním je hlavička, která tvoří úchopovou lištu a křížek pro zavření okna, ve druhém řádku se zobrazí potřebná informace. Aby se tabulka podobala oknu ve Windows, musíte nadefinovat její styl:
<style type="text/css">
#tabulka {display:block; visibility:visible; position:absolute; left:100; top:100; background-color:ivory; border-width:3; border-color:black; border-style:solid; width:300; }
#hlavicka{width:280; background-color:darkblue; color:white;}
#kriz{ background-color:gray; color:white; text-align:center; cursor: hand }
</style> |
|
Teď máte základ hotový a můžete přejít ke skriptu. Proměnná jestisknuto se změní ve true ve chvíli, kdy se uživatel pokusí přemístit tabulku (tzn. když na hlavičce stiskne tlačítko myši):
<SCRIPT LANGUAGE="JavaScript">
<!–
jestisknuto=false;
function Hlavicka_onMouseDown(){
jestisknuto=true;
} |
|
Při pohybu myši musí tabulka kopírovat její pohyb, funkce bude vypadat jinak pro Internet Explorer a jinak pro Netscape:
function PohymMysi(e){
if (jestisknuto) {
if (navigator.appName=="Microsoft Internet Explorer") {
document.getElementById("tabulka").style.left=window.event.x-100;
document.getElementById("tabulka").style.top=window.event.y-15;
}
if (navigator.appName=="Netscape") {
document.getElementById("tabulka").style.left=e.pageX-100;
document.getElementById("tabulka").style.top=e.pageY-15;
}
}
} |
|
Podmínka if(jestisknuto) zaručí, že tabulka se bude hýbat jen ve chvíli, kdy proběhla funkce Hlavicka_onMouseDown(). Samotný pohyb tabulky je pro oba prohlížeče téměř stejný, liší se jen způsob zjištění pozice myši. U Exploreru je to window.event.x (nebo y), u Netcsape e.pageX a e.pageY. Levý horní bod tabulky je oproti kurzoru posunutý o 100 pixelů doleva a o 15 nahoru. Způsobí to drobné trhnutí tabulkou v počátku přesouvání, ale není to na závadu a ušetří se tak pěkných pár řádků skriptu.
Pohyb se ukončí při uvolnění tlačítka myši. Do proměnné jestisknuto se uloží hodnota false, takže další volání funkce PohybMysi() už nezpůsobí žádnou změnu. Musíte samozřejmě ještě zabránit uživateli, aby s tabulkou vyjel mimo viditelnou oblast okna:
function UkonceniPresunu(){
jestisknuto=false;
if(document.getElementById("tabulka").style.left < 0)
document.getElementById("tabulka").style.left = 100;
if(document.getElementById("tabulka").style.top < 0)
document.getElementById("tabulka").style.top = 110;
} |
|
Událost spuštěná stisknutím křížku změní vlastnost tabulky visibility na hidden a přesný opak provede element a, který je zobrazen vlevo nahoře:
function SkryjTabulku(){
document.getElementById(‚tabulka‘).style.visibility=’hidden‘;
}
function ZobrazTabulku(){
document.getElementById(‚tabulka‘).style.visibility=’visible‘;
return false;
} |
|
Nakonec ještě přiřaďte všechny funkce k událostem a můžete se podívat na výsledek:
function priradfunkce(){
document.onmouseup = UkonceniPresunu;
document.onmousemove = PohybMysi;
document.getElementById("ukaz").onclick = ZobrazTabulku;
document.getElementById("hlavicka").onmousedown = Hlavicka_onMouseDown;
document.getElementById("kriz").onclick = SkryjTabulku;
} |
|
Na závěr bych jen doplnil, že drobnou úpravou lze nastavit vlastnost okna již při zobrazení stránky na hidden. Okno nebude viditelné do doby, dokud jej někdo neaktivuje kliknutím na odkaz, což se hodí pro různé nápovědy a podobně. Skript pracuje ve většině prohlížečů, v prohlížeči Opera je nutné si zvolit identifikaci jako MSIE. Na závěr si můžete stáhnout soubor s příkladem.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
