Стилизиране на чекбоксове
Публикувана от smilev на January 12 2011 09:41:49
Разширена новина
демо на скрипта: 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>:
[b]<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>[/b]
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:
[b].radcheckbox .checkboxdisabled {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: .4;
opacity: .4;
display: inline-block; /* IE opacity fix */ cursor: no-drop;}[/b]
Файла Checkbox/Checkbox.js съдържа една проста JavaScript функция, която проверява дали съответния инпут не е disabled и я прилага, ако е false:
[b]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;
}
}
}[/b]
1.4. Останалите дефиниции в Checkbox.css са лесно обясними, затова няма да се спирам на тях.
2. CheckboxSkins[SkinName]Styles.css съдържа дефинициите, които имат отношение към скининга и с тях се работи мого лесно, като в повечето случаи скининга ще се състои само в подмяна на двете картинки в директорията Img/ - Checked.gif и UnChecked.gif. Пожелавам ви успех. За коментари и предложения, ще се радвам да ми пишете на acid_martin@yahoo.com, или да посетите сайта ми на [url=http://acidmartin.wemakesites.net/]http://acidmartin.wemakesites.net/[/url] където имам още няколко скрипта, които може би ще ви се сторят интересни.