go to content | go to menu | przejdź do menu języków

Przełączanie widoczne / niewidoczne - javascript + css

Data:
30 grudzień 2008
Kategoria:
CSS, HTML i XHTML, Programowanie, Skrypty
Author:
Cezary Tomczyk

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 <a href="#opcje" class="toggle">Opcje</a> 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.

Następny lub poprzedni wpis

Twój komentarz

(required)
(required)

Szukaj