Wyskakujące pole logowania
Pytano mnie WIELE razy (no dobrze, co najmniej dwa), jak zrobiłem pole logowania
w formie Pop-Up (aktualnie do zobaczenia na
www.andy-stewart.com). To jest coś,
co pierwszy raz zobaczyłem na stronie
Jasona Murphy'ego i pomyślałem, że to doskonałe miejsce do umieszczenia pola
logowania. Schowane ono było gdzieś na stronie, a ja chciałbym żeby moje również
było niewiele bardziej oczywiste.
Wykonanie formularza logowania w stylu Pop-Up możemy podzielić na trzy etapy:
- Stworzyć skrypt języka Javascript, który będzie odpowiadał za okienko
Pop-Up.
- Stworzyć pole za pomocą znaczników <div>, w którym umieści się formularz
logowania
- Stworzyć link pokaż/ukryj okienko z formularzem logowania.
JavaScript
Ten skrypt musi zostać wstawiony pomiędzy elementy <head> .... </head> w pliku
index.php Twojej templatki;
<script language="JavaScript" type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0
hidden
{
if(document.layers) // NN4
{
document.layers[szDivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById) // gecko(NN6) + IE5+
{
var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? "visible" : "hidden";
}
else if(document.all) //IE 4
{
document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
}
}
// -->
</script> |
Pole <div>
Zdecydowałem, że bardziej niż powyższy kod pasowałaby mi własna procedura
logowania. Umieściłbym pozycję 'inset' Mambo wewnątrz ukrytego pola <div> i w
nim właśnie opublikowałbym moduł logowania. To pozwoliłoby mi nie martwić się o
ewentualne zmiany procesu logowania w przyszłych wersjach Mambo. Pozwoliłoby to
również na umieszczanie tam w miarę potrzeb innych modułów, poprzez
opublikowanie danego modułu wewnątrz pozycji 'inset'. Kod pola DIV umieszczony
jest wewnątrz sekcji <body> ... </body> Twojej templatki.
<div id="LoginBox">
<table>
<tr>
<td colspan="2">
<?php mosLoadModules( 'inset' ); ?>
</td>
</tr>
<tr>
<td width="50%">
<a href="administrator/index.php">
<img src="images/M_images/con_info.png" width="16" height="16"
border="0" />
<font size="1"><strong>Admin</strong></font>
</a>
</td>
<td width="50%" align="right">
<a href="#" onClick="toggleBox('LoginBox',0); return false;">
<img src="images/cancel_f2.png" width="20" height="20" border="0"
/>
</a>
</td>
</tr>
</table>
</div> |
Odnośnik do logowania
Teraz musimy gdzieś umieścić link, który wyświetli ukrytą warstwę <div>, co
spowoduje pokazanie pola logowania.
<a href="#" onClick="toggleBox('LoginBox',1); return
false;">
<img src="/templates/andy/images/password.png" width="75" height="75"
border="0" />
</a> |
Ważną częścią tutaj jest dyrektywa "OnClick=", która wykonuje wyświetlenie
pola logowania. Jeśli spojrzysz na dyrektywy dla pola logowania DIV, zauważysz
że umieściłem na dole obrazek z elementem "OnClick=", który chowa z powrotem
pole logowania.
Ustawienia stylów CSS
Ostatnią rzeczą, jaką musimy zrobić, jest zdefiniowanie umiejscowienia
i wyglądu pola DIV poprzez odpowiednie wpisy w arkuszu stylów CSS wewnątrz pliku
template_css.css Twojej templatki.
#LoginBox {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
visibility: hidden;
border: 1px solid;
background-color: #ffffff;
} |
Testowałem te rozwiązanie w przeglądarkach IE, FireFox i Opera pod Windows,
plus Mozilla i Opera pod systemem Linux i wszystko działało bez problemów - nie
zrobiłem jeszcze testów pod MacOS, więc niestety nie mogę zweryfikować czy
wszystko działa jak należy.
To wszystko zaimplementowane zostało z niewielkimi różnicami w stosunku do
strony Jasona Murphy'ego i nie wiem jakie są wady/korzyści płynące z tych
różnic. Zostawiam to większym umysłom niż mój. Mam nadzieję, że będzie to dla
kogoś przydatne i proszę o kontakt poprzez moją stronę, jeśli masz jakieś
pytania lub coś do dodania ;-)
Kilka uwag od tłumaczącego to na "nasze" :)
W stosunku do oryginału Andy'ego dopisałem znaczniki kodu Javascript - nie każdy
przecież musi wiedzieć, że są (sam się na tym potknąłem). Następna sprawa to
pamiętajcie o zmianie ścieżek do grafiki - tu jest tylko przykład odnoszący się
do templatki Andy'ego. Podobnie kod CSS - akurat ten pasuje do jego templatki -
do Waszej nie musi i może zajść konieczność zmiany np. kolorów linków. To chyba
tyle, pamiętajcie tylko o wklejaniu fragmentów kodu dokładnie w te miejsca, o
których mówi tutorial.
Oryginał tego dokumentu zaczerpnięto za zgodą autora ze strony
Troozers Learns to Mambo
Polska adaptacja: Dylek, MamboPL.com Team
|
Artykuły 
