Skrócony formularz - robimy zakładki
Znalazłem ciekawe rozwiązanie problemu zbyt długich formularzy. Skrypt może pewnie zostać zastosowany również do innych celów.
Formularz zawarty jest na jednej stronie, jednak jego poszczególne działy są ukryte. Dostęp do nich jest możliwy poprzez nawigację po zakładkach.
Działanie
Skrypt skracający formularze stworzył onjin, tutaj znajduje się działający przykład. Na samym dole wrzuciłem screena z mojej strony, na której użyłem zakładek.
Funkcja
preparePanelsz pliku opanels.js odnajduje wszystkie elementy DIV przypisane do klasy CSS subpanel. Pobiera wartość ich atrybutu title jako nazwy zakładek. Następnie ukrywa wszystkie takie DIV’y oprócz pierwszego i wyświetla nad nim stworzone zakładki.Wywołanie funkcji
preparePanelspowinno się odbyć po załadowaniu kodu strony czyli np
<body onLoad="preparePanels();">
Kroki
Najpierw należy podzielić na sekcje formularz wkładając je w warstwy.
<div class="subpanel" title="zakładka 1"> <h2>sekcja 1</h2> </div> <div class="subpanel" title="zakładka 2"> <h2>sekcja 2</h2> </div>
Jak widać DIVy oznaczone są odpowiednią klasą, natomiast w title wpisujemy nazwę zakładki.
Teraz należy dodać do pliku css:
.panels_menu a {
color: #eee;
text-decoration: none;
background: #666;
padding: 0px 5px;
margin: 0px 2px;
border: solid 1px #333;
}
.panels_menu a:hover {
background: #ccc;
color: #f33;
border-bottom: solid 1px #ccc;
}
.panels_menu a.active {
background: #eee;
color: #333;
border-bottom: solid 1px #eee;
}
.subpanel {
border: solid 1px #333;
padding: 10px;
margin: 0 0 10px;
}
Przed znacznikiem </head> dodajemy
<script type="text/javascript" src="opanels.js"></script>
Do znacznika <body> dodajemy
onLoad=”preparePanels()”
I to na tyle 
Wystarczy pobrać jeszcze plik opanels.js.
Edit:
Zapomniałem pokazać jak to wygląda na jednej z moich stron
Jeśli spodobał Ci się ten wpis, rozważ jego skomentowanie lub skorzystanie z RSS-a i w konsekwencji otrzymywania informacji o nowych wpisach do Twojego czytnika.
Oceń wpis:
(dla Ciebie to tylko jeden klik - dla mnie duża satysfakcja)
Loading ...
Loading ...
Wczoraj Krzysiek Lis poczęstował mnie voucherem na 244 zł (290,36 zł włączając VAT) do wykorzystania na emisję moich reklam w nowym systemie reklamy kontekstowej 
Malwa w '
kruzyk w '
klb w '
Komentarze
Brak komentarzy.
Zostaw komentarz
Uwaga! Na tym blogu działa filtr antyspamowy a komentarze są moderowane. Twój komentarz będzie widoczny na stronie po mojej akceptacji. Nie wysyłaj komentarza kilka razy - komentarz czeka na moderację i dopiero jak spełni wymagania, zostanie dodany.