Помогни ни да направим Uroci.net по - богат! Добави урок

Стилизиране на чекбоксове

acidmartin   трудност:    видян: 11503


óðîöè - Checkbox4_0.gif

демо на скрипта: 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: progid:DXImageTransform.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/ където имам още няколко скрипта, които може би ще ви се сторят интересни.



Коментари (4)

lyubo на 09.03 2007 в 10:32ч.
Не знам колко хора ще оценят полезността на този урок (или по скоро техника), но аз лично съм очарован от него.

Просто великолепно.
Мислил ли си за радио бутони?

Освен това, с visibillity: hidden няма ли да отпадне необходимостта да от position: absolute; left -9999px.

Този фрагмент малко ме притеснява в интерес на истината. тройката IE, Firefox, Opera ще се справят с това, но за останалите не съм много сигурен.

Поздравления отново - прекрасен урок! Дано повече хора схванат колко е полезен.
acidmartin на 09.03 2007 в 11:05ч.
Радвам се, че урокът ти е харесал.

Всъщност, направил съм и радиобутони, можеш да ги видиш ва сайта ми: http://acidmartin.wemakesites.net/?pageId=SkinnableRadiobutton. Ползвам ги и за voting poll-a си.

Принципът там е същият, но пазя в една променлива последния избран, за да може при натискане на друг да се unselect-не предишния избран.

Отказах се от visibility: hidden / disaply: none, защото така се губи onclick хендлъра на label-a за съответния инпут, а също и защото IE хвърля JavaScript грешка, "cannot set focus, because the control is either hidden, or disabled", а тази грешка не може да се хендълне с try{} / catch(err), или с window.onerror.

Скриптът е тестван с IE6/7, Mozilla 1x/2x, Opera 8x/9x и Safari за Mac, и работи без проблем
acidmartin на 14.03 2007 в 08:36ч.
дравейте,

На http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=46 вече има по-нова версия на скрипта с леко сменена логика, и надявам се по-стабилен.

Скрипта вече включва и 4 готови скинчета - Mac, Vista, XP и Classic, които можете да сменяте на демо страницата. За даунлоуд, ползвайте http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=47.
acidmartin на 08.05 2007 в 18:34ч.
Здравейте, скрипта претърпя много сериозни промени, като например това, че вече работи с AJAX. За повече информация, моля, вижте този линк:

http://uroci.net/forum/index.php?showtopic=2588

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com