Projektowanie stron internetowych

Jak zrobić okrągłe ramki? Rzecz wydaje się prosta i taka jest. Sposobów w sieci znalazłem wiele.

• ramki css 3.0 – nie w każdej przeglądarce zadziała,
• ramki tworzone za pomocą java script bez dodatkowych obrazów(ciekawe, ale skomplikowanych się nie dało zrobić),
• ramki tworzone za pomocą java script i obrazów(to wydało mi się ciekawe).

Znalazłem gotowe, działające rozwiązanie, które za pomocą kodu java script obwijało w ramkę żądany element html. Ramka była podzielonym na składowe obrazem. Nie trzeba było dodawać dodatkowego kodu html żeby ją otrzymać bo to było dodawane przez js. Rozwiązanie wydało mi się ciekawe. Ale po tym jak obejrzałem kod java script, nie za bardzo mi się spodobał – był za długi i niechlujnie zrobiony, pewnie by coś przestało działać. Postanowiłem zrobić sam.

Założenie: zrobić jak najprościej.
1. Pierwszy etap to przygotowanie w Photo Shopie  ramki, narożników, cienia itd. Obrazy można pociąć tak że każdy narożnik i krawędź będzie oddzielnie(najprościej) lub łączyć je w celu ograniczenia liczby obrazów i żądań do serwera.
2. Ramkę do dowolnego elementu dodajemy, otaczając go w dodatkowe kontenery, które są wyposażone w tło(background) zawierające odpowiednią krawędź bądź narożnik. To w sumie wystarczy bo już mamy gotową ramkę. Ale jeśli ramek jest kilka, to robi nam się śmietnik w kodzie i jest kupa niepotrzebnych kontenerów(4 dla narożników i 4 dla krawędzi). Można by to było uporządkować.
3. Z pomocą w porządkowaniu przychodzi nam jQuery, a dokładnie metoda: wrap().

Kod do tworzenia ramek:

$(document).ready(function(){
        $('.roundMe').each(function(){
                $(this).wrap(
                '<div class="rounded"><div class="leftBorder"><div class="rightBorder"><div class="bottomBorder"><div class="leftUpperCorner"><div class="rightUpperCorner"><div class="leftLowerCorner"></div></div></div></div></div></div></div>'
                );
        });
});

Powyższy kod do każdego elementu posiadającego klasę roundMe doda ramkę. Poszczególne divy i obrazki w nich zawarte można grupować upraszczając to rozwiązanie.

Prosta sprawa, trzeba ułatwić trochę użytkownikowi pracę. Powiedzmy chce usunąć wszystkie produkty ze swojego sklepu. Nie każmy go zaznaczaniem każdego kwadracika. Lepiej niech zaznaczy wszystkie od razu. Do tego celu wystarczy dodać do formularza następujący element <input type=”button” value=”zaznacz wszystkie” onclick=”checkAll(event)” /> i dołączyć do strony poniższe 2 funkcje.

function checkAll(evt){
	var btn = evt.currentTarget;
	var form = btn.form;
	for (i = 0; i < form.elements.length; i++){
		if(form.elements[i].type == 'checkbox'){
			form.elements[i].checked = true ;
		}
	}
	btn.value = 'odznacz wszystkie';
	btn.onclick = uncheckAll;
}

function uncheckAll(evt){
	var btn = evt.currentTarget;
	var form = btn.form;
	for (i = 0; i < form.elements.length; i++){
		if(form.elements[i].type == 'checkbox'){
			form.elements[i].checked = false ;
		}
	}
	btn.value = 'zaznacz wszystkie';
	btn.onclick = checkAll;
}