გავხადოთ checkbox-ი უფრო ლამაზი
მაშ ასე, დღეს უკვე საუბარი ზედმეტია იმაზე რომ ვებ გვერდის დამზადება-შეფასებისას ყურადღება არამარტო ფუნქციონალობას ექცევა არამედ მის დიზაინსაც. ასე თუ ისე არსებულ DOM ელემენტებს შეგვიძლია მივცეთ სასურველი განსხვავებული დიზაინი. მაგრამ არის ელემენტები რომლებიც უკმეხად არიან სტილირებასთან და მისი ვიზუალური მხარის დატოვება გვიწევს ისევე როგორიც Default არის.
დღეს მე შევეცადე გამელამაზებინა ე.წ. checkbox-ი.
ამისთვის მე ავიღე ორი ლამაზი გრადაციით გაკეთებული იკონი და შევეცადე ფორმაში არსებული checkbox-ებით ჩამენაცვლებინა სასურველი იკონებით.
ამისთვის შემიძლია გადმოვცე შემდეგი კოდი
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | /* Start Setting Config */ var onImg = 'img/on.png'; var offImg = 'img/off.png'; /* End Setting Config */ function checkThisBox(obj){ if (obj.type=='checkbox') { img = document.getElementById(obj.name + '_img'); img.src = (obj.checked == false) ? offImg : onImg; } else { var checkObj = obj.id.replace('_img',''); var checkStatus = document.getElementById(checkObj).checked; obj.src = (checkStatus==true) ? offImg : onImg; checkStatus = (checkStatus==true) ? false : true; document.getElementById(checkObj).checked=checkStatus; } } function changeCheckboxs(form,debug){ debug = (debug) ? true : false; var params = new Array(); var form = document.forms[form]; for (var i = 0; i<form.elements.length; i++) { if (form.elements[i].name) { if (form.elements[i].type == 'checkbox') { form.elements[i].onclick = function() { checkThisBox(this) } var img = document.createElement('img'); img.style.cursor = "pointer"; img.id = form.elements[i].id+"_img"; img.src = (form.elements[i].checked) ? onImg : offImg; img.setAttribute('align', 'absmiddle'); img.onclick = function() { checkThisBox(this) } form.elements[i].parentNode.insertBefore(img, form.elements[i].nextSibling); form.elements[i].style.display = (debug==false) ? 'none' : 'inline'; } } } } |
ამ სკრიპტს ვწერთ გვერდის ჰედერში ან რაიმე js ფაილში და ვაინქლუდებთ მას.
შემდეგ მაქვს ფორმა და მასში არსებული checkbox-ები და ამ ფორმის შემდეგ ვიძახებ changeCheckboxs() ფუნციას, რომელსაც აუცილებლად გადავცემ პარამეტრად ფორმის სახელს რომლის checkbox-ებიც მინდა რომ შევცვალო მაგალითად
1 | changeCheckboxs('myform_2'); |
და აგრეთვე შეგვიძლია ეს ფუნქცია გავუშვათ დებაგით სადაც ვიზუალურად ვნახავთ თუ როგორ მოქმედებს მასზე ცვლილება
1 | changeCheckboxs('myform_2','debug'); |
ამ საქმიანობის მუშა მაგალითი შეგიძლიათ ნახოთ ამ მისამართზე.
და აგრეთვე გადმოწეროთ ამ მისამართიდან.
P.S. ვიცი სრული არ არის ეს სკრიპტი მაგრამ საწყისისთვის გამოდგება, დავამატებ – ელემენტების ჩამონათვალის მხარდაჭერას და კიდევ რამოდენიმე ნიუანს. 🙂