| ||
|
Стилизиране на чекбоксоведемо на скрипта: http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=46 даунлоуд: http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=47 страница на по-старата версия на скрипта: http://acidmartin.wemakesites.net/?pageId=SkinnableCheckbox Форм контролите, и особено чекбосковете и радиобутоните в уеб са много трудно податливи на стилизиране, и почти всичко, което може да се направи с CSS е сетване на бекграунд цвят, някакъв бордър и размери. В този урок ще се опитам да покажа как с помощта на JavaScript и CSS може да се намери решение на този проблем, като запазим самите инпути. Всичко, което ни трябва е обгъщащ <div>, <fieldset>, <legend>, <ul>, <li>, <input type="checkbox" id="Checkbox1" name="Checkbox1"/> и <label>: <div class="radcheckbox nofieldset nolegend verticallist mac" id="SkinnedRadioBtnList_01"> <fieldset> <legend>Select Your Favorite Music Styles</legend> <ul> <li> <input type="checkbox" id="Checkbox_01" name="Checkbox_01" /> <label for="Checkbox_01" class="checkboxunchecked" id="Checkbox_01_Label" onclick="toggleCheckBoxes(this.id);" title="Oldies-Goldies">Oldies-Goldies</label> </li> <li> <input type="checkbox" id="Checkbox_02" name="Checkbox_02" checked="checked" /> <label for="Checkbox_02" class="checkboxchecked" id="Checkbox_02_Label" onclick="toggleCheckBoxes(this.id);" title="Blues and Jazz">Blues and Jazz</label> </li> <li> <input type="checkbox" id="Checkbox_03" name="Checkbox_03" disabled="disabled" /> <label for="Checkbox_03" class="checkboxunchecked checkboxdisabled" id="Checkbox_03_Label" onclick="toggleCheckBoxes(this.id);" title="Gangsta Rap">Gangsta Rap</label> </li> <li> <input type="checkbox" id="Checkbox_04" name="Checkbox_04" checked="checked" /> <label for="Checkbox_04" class="checkboxchecked" id="Checkbox_04_Label" onclick="toggleCheckBoxes(this.id);" title="Hard'n'Heavy">Hard'n'Heavy</label> </li> <li> <input type="checkbox" id="Checkbox_05" name="Checkbox_05" /><label for="Checkbox_05" class="checkboxunchecked" id="Checkbox_05_Label" onclick="toggleCheckBoxes(this.id);" title="Thrash Metal">Thrash Metal</label> </li> <li> <input type="checkbox" id="Checkbox_06" name="Checkbox_06" /> <label for="Checkbox_06" class="checkboxunchecked" id="Checkbox_06_Label" onclick="toggleCheckBoxes(this.id);" title="Death Metal and Grindcore">Death Metal and Grindcore</label> </li> <li> <input type="checkbox" id="Checkbox_07" name="Checkbox_07" disabled="disabled" /> <label for="Checkbox_07" class="checkboxunchecked checkboxdisabled" id="Checkbox_07_Label" onclick="toggleCheckBoxes(this.id);" title="Popfolk">Popfolk</label> </li> <li> <input type="checkbox" id="Checkbox_08" name="Checkbox_08" disabled="disabled" checked="checked" /> <label for="Checkbox_08" class="checkboxchecked checkboxdisabled" id="Checkbox_08_Label" onclick="toggleCheckBoxes(this.id);" title="Cybergrind">Cybergrind and Porngrind ((:What the heck?!)</label> </li> </ul> </fieldset> </div> 1. В папката Checkbox/Scripts ще откриете два файла - Checkbox.js и Checkbox.css. Обърнете внимание, че CSS файла не е "скин" файла, а съдържа основните CSS дефиниции, които нямат отношение към дизайна: 1.1. С position: aboslute; left: -9999px; приложени на инпуте ги скриваме, като ги пращаме далеч наляво и така те стават невидими за попребителите. Първоначалната ми идея беше да ги скрия с display: none, или с opacity:, -moz-opacity: и filter:, но тогава се изгубва евент хедлъра на <label>-ите към всеки инпут. 1.2. За да създадем "disabled" ефект, създаваме клас checkbox disabled: .radcheckbox .checkboxdisabled { filter: progidXImageTransform.Microsoft.Alpha(opacity=40); -moz-opacity: .4; opacity: .4; display: inline-block; /* IE opacity fix */ cursor: no-drop;} Файла Checkbox/Checkbox.js съдържа една проста JavaScript функция, която проверява дали съответния инпут не е disabled и я прилага, ако е false: toggleCheckBoxes = function(checkBoxLabelId) { var getCheckboxId = document.getElementById(checkBoxLabelId).htmlFor; if(!document.getElementById(getCheckboxId).disabled) { if(!document.getElementById(getCheckboxId).checked) { document.getElementById(getCheckboxId).checked = false; document.getElementById(checkBoxLabelId).className = 'checkboxchecked'; } else { document.getElementById(checkBoxLabelId).className = 'checkboxunchecked'; document.getElementById(getCheckboxId).checked = true; } } } 1.4. Останалите дефиниции в Checkbox.css са лесно обясними, затова няма да се спирам на тях. 2. CheckboxSkins[SkinName]Styles.css съдържа дефинициите, които имат отношение към скининга и с тях се работи мого лесно, като в повечето случаи скининга ще се състои само в подмяна на двете картинки в директорията Img/ - Checked.gif и UnChecked.gif. Пожелавам ви успех. За коментари и предложения, ще се радвам да ми пишете на acid_martin@yahoo.com, или да посетите сайта ми на http://acidmartin.wemakesites.net/ където имам още няколко скрипта, които може би ще ви се сторят интересни.
|
|