Na www stránkách se často objevují krátké formuláře pro přihlášení k účtu, zalogování a podobně. Tyt0o stránky mají většinou stylový design, kde tato dvě políčka pro jméno a heslo hrají jednu z hlavních rolí. Proč taky ne? Vezměme si například webové portály. Většina z nich provozuje i e-mailové schránky, a je tedy žádoucí, aby někde na úvodní straně byl přihlašovací formulář, pomocí kterého se uživatelé snadno a rychle dostanou ke svým účtům. Každý počítá s tím, že po vstoupení na tyto www stránky uvidí tento formulář a bude moct přistoupit ke své poště. Co když se ale takové formuláře objevují na stránkách, jejichž hlavním smyslem je úplně něco jiného než přihlašování uživatelů? Někdy je to ok, jindy to spíš kazí design a bylo by lepší, kdyby tento formulář byl někde jinde.
Před časem jsem se setkal se situací, kdy jsem potřeboval mít takový formulář snadno a rychle přístupný a přitom nesměl být nikde na úvodní stránce. Jedním z řešení by bylo umístit na stránku odkaz na tento formulář, jiné, mnohem pohodlnější pro uživatele je vytvořit si vysunovací formulář. Na stránce bude jednoduše odkaz a po kliknutí na něj se vysune tento formulář. Něco na styl pop-up menu.
Možná by někdo z vás mohl přesně takový formulář potřebovat, tak vám tu přináším návod, jak si jej vyrobit.
Nejdřív je nutné vytvořit si design takového formuláře a pak napsat pár řádek v JavaScriptu. Design si vyrobí každý podle svého uvážení. Já jsem zvolil trochu temnější styl. Základem jsou dvě tabulky. V jedné je odkaz, který vysune formulář a v druhé formulářová políčka. Každé z těchto dvou tabulek přiřadíme ID. Pro tabulku s odkazem bude ID="onoff" a pro formulář "table". Obě tabulky budou muset mít absolutní pozici, aby se s nimi dalo hýbat po obrazovce, a tedy, aby se mohly vysunout. První tabulce dáme v definici stylu souřadnice left: 0 a top: 0, to aby se nám objevila v levém horním rohu okna prohlížeče. Druhá tabulka bude mít levou souřadnici taky 0, ale posuneme ji o 100 pixelů nahoru, aby zatím nebyla vidět (top: -100).
Teď přejdu ke skriptu. Jak určitě tušíte, celé to bude v JavaScriptu a bude se to skládat z jedné funkce:
t = -100;
posun = 10;
i = 1;
function show(){
if (i == 1) {
table.style.top=t;
cas = window.setTimeout("show()", 5);
t=t+posun
if (t>0) {i = 0; window.clearTimeout(cas);}
}
else if (i == 0) {
table.style.top=t-posun;
cas = window.setTimeout("show()", 5);
t=t-posun
if (t<-100) {i = 1; window.clearTimeout(cas);}
}
}
|
Ze všeho nejdřív bude nutné nastavit si některé proměnné.
t = -100 (posun tabulky nad okraj)
posun = 10 (o kolik pixelů se bude tabulka povysouvat)
i = 1 (bude nám přepínat funkci show() na schovat a ukázat)
K funkci show(). Bude mít dvě části. První část se provede, pokud i = 1, vysune formulář a přepne i na hodnotu 0. Druhá část pracuje jen pokud i = 0 - zasune formulář a přepne i zpět na 1.
Vysunutí objektu table bude probíhat následovně: Nejdříve nastavíme horní pozici objektu na -100, potom nastavíme časovač. Časovač bude spouštět funkci show() každých 5 sekund. Každé proběhnutí funkce bude mít za následek, že se objekt table povysune o 10 pixelů dolů, protože proměnnou t zvýšíme o 10 px. Tak to bude probíhat, dokud nebude mít proměnná t hodnotu 0. Až se to stane, časovač vypneme a i nastavíme na 0. Tím zajistíme, že při příštím kliknutí na odkaz se provede zasunovací část skriptu.
Část 2. bude přesný opak první části. Bude o 10 pixelů posouvat objekt table nahoru.
To je celé. Skript si můžete stáhnout a prohlédnout ZDE. Doufám, že vám článek přišel zajímavý a že skript snad jednou využijete.
Čevelíček Marek
|
