Închidere (ascundere) „buton”
|
1 |
<span class="btnInchid" onclick="this.parentElement.style.display='none'">×</span> |
Butoane pentru ascundere sau afişare elemente
Ascundere
|
1 2 3 4 5 6 7 8 9 10 |
<div id="caseta_1"> <a href="#" onclick="fc_inchid_div(caseta_1);">Închidere ⛒</a> Caseta va dispărea la apăsarea butonului </div> <script> function fc_inchid_div(id_elem) { id_elem.style.display = "none"; } </script> |
Desigur, dacă linkul conţinând butonul ar fi în afara acestui div, nu va fi ascuns.
Afisare
|
1 2 3 4 5 6 7 8 9 10 |
<a href="#" onclick="fc_deschid_div(caseta_2);">Deschidere ⚪</a> - la apăsare, va apărea un div <div id="caseta_2" style="display:none;" > Caseta e vizibilă pentru că a fost apăsat butonul </div> <script> function fc_deschid_div(id_elem) { id_elem.style.display = "block"; } </script> |
Faţă de prima acţiune (Ascundere), la cea de-a doua, după cum se poate remarca, avem nevoie ca div-ul să fie implicit ascuns.
Comutare
Varianta simpla
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="caseta_3"> Dispare sau apare, prin alternanţa apăsării butonului </div> <script> function fc_comut(id_elem) { if (id_elem.style.display === "none") { id_elem.style.display = "block"; } else { id_elem.style.display = "none"; } } </script> |
Varianta elegantă
Este mult spus „elegantă” fiind vorba doar şi de comutarea aspectului butonului.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<a href="#" onclick="fc_comut(caseta_3);"><span id="inchis" >⛒ Închidere</span><span id="deschis" style="display:none;">⚪ Deschidere</span></a> <div id="caseta_3"> Dispare sau apare, prin alternanţa apăsării butonului </div> <script> function fc_comut(id_elem) { if (id_elem.style.display === "none") { id_elem.style.display = "block"; document.getElementById("inchis").style.display = "block"; document.getElementById("deschis").style.display = "none"; } else { id_elem.style.display = "none"; document.getElementById("inchis").style.display = "none"; document.getElementById("deschis").style.display = "block"; } } </script> |
Redirect la altă pagină, după câteva secunde
În cazul de faţă, comutarea la index.php se va realiza după 2 secunde (2 x 1000=2000).
Varianta 1
|
1 2 3 |
<script> setTimeout("location.href = 'login.php'",2000); </script> |
Varianta 2
|
1 2 3 |
<script> setTimeout(function(){window.location.replace("login.php");}, 2000); </script> |
Avantajul variantei 2 faţă de prima este că inhibă posibilitatea de a reveni la pagina anterioară.
Varianta 3
|
1 2 3 |
<script> setTimeout(function() {window.location='index.php'}, 2000); </script> |
Varianta 4
Dacă se doreşte folosirea ca variabilă, se poate alege scriptul de mai jos.
|
1 2 3 |
<script> var timer = setTimeout(function() {window.location='index.php'}, 2000); </script> |
Desigur, dacă e necesară în pagini PHP, varianta mai simplă ar fi:
header('Refresh: 2; URL=http:pagina.php');
header('Refresh: 2; URL=http:pagina.php');
Folosirea comenzii PROMPT
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<button onclick="fcPrompt()">Try it</button> <p id="afisare"></p> <script> function fcPrompt() // window.onload = function () { var pagina; let text; let person = prompt("În ce an te-ai născut?", "1990"); if (person > 2000) { text="Access Denied"; pagina="login.php"; } else { text = "Access Granted"; pagina="index.php"; } document.getElementById("afisare").innerHTML = text; setTimeout(function(){window.location.replace(pagina);}, 2000); } </script> |
- Dacă se doreşte încărcarea apariţia întrebării la încărcarea paginii, se decomentează linia window.onload = function () comentând, în schimb function fcPrompt() pentru a eluda folosirea butonului.
- Ţinând cont că întrebarea conţine diacritice, este necesar ca între etichetele <head></head> să fie inclusă linia <meta charset="UTF-8">
- Desigur, dacă se doreşte să avem posibilitatea de a reveni la pagina anterioară, se poate alege setTimeout(function(){ window.location.href = pagina;}, 2000);