Przełączanie widoczne / niewidoczne – javascript + css
| kategoria: CSS, HTML i XHTML, Programowanie, Skrypty | Komentarze (0)
Czasem chcemy, aby dany element pojawiał się lub znikał po klinięciu w inny element, np. opcje w ten sposób można pokazywać. Jednym ze sposobów może być stworzenie linka Opcje i podpięcie do niego opcji pokaż / ukryj.
Zastosowanie tutaj linka ma drobną zaletę: kliknięcie od razu kieruje nas do podanego w linku zasobu. Niemniej jednak można kod podany przez nas przerobić tak, aby działał dla każdego elementu. Kolejną sprawą jest to, że wystarczy nadać elementowi a klasę toggle i potem za pomocą JavaScript-u odpowiednio je odnaleźć i podpiąć funkcję. Zatem zaczynamy po kolei.
Najpierw musimy zebrać wszystkie linki, które zawierają klasę toggle i podpiąć pod nią odpowiednią funkcję o nazwie toggle_element (inne funkcje zostaną wyjaśnione w dalszej części):
function toggle_init() {
var i, ids, targetURL;
var anch = getElementsByClassName("toggle");
if (anch.length < 1) {
return false;
} // check, if exits any element with "toggle" class
for (i = 0; i < anch.length; i++) {
if (anch[i].href !== null) {
ids = anch[i].href.split("#");
targetURL = document.getElementById(ids[1]);
if (!hasClass(targetURL, "hide")) {
addClass(targetURL, "hide");
}
anch[i].onclick = toggle_element;
}
}
}Teraz czas na funkcję toggle_element:
function toggle_element() {
var elem = this;
if (elem && (elem.href !== null)) {
elem.blur();
var getid = elem.href.split('#');
var id = document.getElementById(getid[1]);
if (hasClass(id, "hide")) {
replaceClass(id, "hide", "view");
} else {
replaceClass(id, "view", "hide");
}
}
return false;
}Otóż co się dzieje w funkcji toggle_element? Na wszelki wypadek sprawdzamy czy element istnieje i czy href nie jest puste (if (elem && (elem.href !== null))). Kasujemy focus, pobieramy zawartość po # z całego URL-a oraz referencję do elementu z nazwy po #. Potem sprawdzamy czy element ma nadaną klasę hide i jeśli ma, to kasujemy ją i wstawiamy view. I odwrotnie.
Prostota tego polega na tym, że dla danego ukrywanego / pokazywanego elementu nadajemy klasy na przemian hide / view. Dzięki temu praktycznie nadając tylko klasę toggle elementowi a nie musimy nic dodatkowo przerabiać.
W arkuszu stylów definiujemy podstawowe dane dla powyższych klas:
.show{
display:block;
}
.hide{
display:none;
}To wszystko, jeśli chodzi o podstawowy kod. Potrzebne jednak są dodatkowe funkcje jak getElementsByClassName, hasClass, addClass, replaceClass.
Z klasy getElementsByClassName możesz skorzystać zaglądając na stronę Robert-a Nyman-a, natomiast pozostałe to:
function hasClass(e, name) {
return (!e || !e.className) ? false : new RegExp('\b' + name + '\b')
.test(e.className);
}
// Usuwanie nazwy klasy z obiektu
function delClass(e, name) {
return e && (e.className = e.className.replace(new RegExp('^' + name + '\b\s*|\s*\b' + name + '\b', 'g'), ''));
}
// Dodawnie nazwy klasy do obiektu
function addClass(e, name) {
delClass(e, name);
return e && (e.className += (e.className ? ' ' : '') + name);
}
// Zamiana jednej klasy na drugą w obiekcie
function replaceClass(e, class1, class2) {
if (typeof e == 'string') {
e = document.getElementById(e);
}
if (hasClass(e, class1)) {
delClass(e, class1);
addClass(e, class2);
return true;
} else {
return false;
}
}Przy okazji dodaliśmy funkcję delClass do usuwania nazwy danej klasy CSS-owej w obiekcie. Warto dodać też, że najlepiej uruchomić funckję toggle_init po załadowaniu strony. W gotowym przykładzie tak właśnie zrobiliśmy. Źródło kodu JavaScript jest dostępne do podglądu jako zwykły plik tekstowy.
Warto zajrzeć jeszcze
(Nie ma jeszcze głosów, ale możesz być pierwszy)Komentarze
Możesz zostawić komentarz lub wysłać sygnał trackback ze swojej strony.
Zanim dodasz komentarz, to zapoznaj się z zasadami dotyczącymi komentarzy.