Popup okno ještě trochu jinak 2.
V předchozím článku jsme si ukázali, jak dát uživateli k dispozici možnost ovládat nové okno, které mu vnutíme. Tentokrát se zaměříme na opačný postup – uživatel si bude moci sám zvolit, zda chce, aby se mu okno automaticky otevíralo. To se hodí pro různé nápovědy nebo speciální služby.
Jako u předchozího článku, použijeme pro zvýšení komfortu uživatele uložení nastavení do cookie. V naší ukázce (zdrojový kód) je volba řešena pomocí zatrhávacího políčka. Pokud ho uživatel zatrhne, nastaví se cookie, která udává, že okno se má otevírat automaticky. Tuto cookie ve skriptu testujeme a pokud je nastavena, otevřeme okno:
<script type=“text/javascript“ src=“JavaScripts/Cookies.js“></script>
<form name=“checkauto“ id=“checkauto“>
<input type=“checkbox“ name=“autostart“ id=“autostart“ value=“1″ onclick=“javascript: if (this.checked) { MyCookie.Write(‚autostart‘,1,365); NewOpen() } else { MyCookie.Write(‚autostart‘,0,365)};“ /> otevírat automaticky
</form>
<script type=“text/javascript“>
<!–
function NewOpen()
{ // funkce, která se provede, má-li uživatel zatrženo políčko volby
window.open(‚http://www.interval.cz/autori.asp‘,’new‘);
}
if (MyCookie.Read(‚autostart‘)==1) // při zavádění stránky otestovat, zda je nastaveno cookie volby
document.forms.checkauto.autostart.checked=true; // pokud ano, zatrhnout políčko autostart ve formuláři checkauto
else // jinak zatržení políčka zrušit
document.forms.checkauto.autostart.checked=false;
if (document.forms.checkauto.autostart.checked)
NewOpen(); // pokud je políčko zatrhnuto, provést funkci
// –>
</script>
Jak vidíme, celá aplikace je poměrně jednoduchá, ovládá se zatrhávacím políčkem, kde je na událost onclick navázáno nastavení nebo vymazání cookie. Cookie je pojmenována autostart, při zatržení políčka se nastaví na hodnotu 1, platnost se nastaví na 365 dní, při odškrtnutí se nastaví na hodnotu 0, také s platností 365 dní. K ukládání dat pomocí JavaScriptu využijeme funkci pro práci s cookies, kterou jsem pro lepší manipulovatelnost vyňal do externího souboru Cookies.js, podobně jako v článku o funkci Autocomplete. Povšimněte si, že v obsluze události je přímo vepsán rozhodovací povel if, a také, že v případě zatržení políčka se zároveň aktivuje funkce, která automaticky otevírá nové okno (za středník je prostě přidáno její volání). Pro začátečníky může být zajímavé použití zástupky this, která zde zajišťuje přístup k objektu zatrhávacího políčka.
Při zavádění stránky se otestuje, zda má naše cookie hodnotu 1, pokud ano, nastavíme políčko na zatržené (vlastnost checked nastavíme na true), jinak zatržení zrušíme (false). Toto je důležité zejména proto, že si můžeme pouhým přidáním atributu checked="checked" do zatrhávacího políčka zvolit, zda výchozí nastavení políčka bude zatržené nebo prázdné. Pokud bychom tedy přidali atribut, kterým bude políčko rovnou zatržené, a uživatel políčko odškrtne, uloží se cookie s hodnotou 0 a při příští návštěvě stránky náš skript políčko díky hodnotě cookie sám odškrtne.
Následně se otestuje, jak je to se stavem políčka – pokud je zaškrtnuté, provede se funkce NewOpen. Vidíte, že do této funkce můžete vepsat prakticky cokoli, nemusí to být jen otevření okna, může to být třeba přesměrování, spuštění hudby na pozadí nebo povel k odeslání mailu.
Popsanou část kódu umístěte kamkoli do těla stránky, ke které přidejte i soubor Cookies.js. Dodávám jen, že funkce je podmíněna JavaScriptem na klientovi a že by bylo lepší část formuláře vypisovat pomocí skriptu metodou document.write (pak by se políčko v prohlížeči bez skriptu vůbec neobjevilo a nemátlo by tak uživatele). Pro tyto by bylo možné doplnit alternativní odkaz do elementu noscript.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
