Дифференциация флажков, кнопок и радио в jQuery UI CSS

Question

Я пишу свой собственный CSS для пользовательского интерфейса jQuery.

В принципе, мне нужно иметь разные стили для переключателей, флажков и обычных кнопок.

Проблема заключается в том, что классы jQuery, добавляемые к поддельному виджету, не указывают, какая именно кнопка.

Например, предположим, что у нас есть этот код:

<input type="checkbox" name="location[]" id="location1" value="Somewhere" /> 
<label for="location1">Somewhere</label> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     jQuery('input').button(); 
    }); 
</script> 

JQuery трансформирует эти два элемента в:

<input type="checkbox" name="location[]" id="location1" value="Somewhere" 
    class="ui-helper-hidden-accessible"> 

<label for="location1" aria-pressed="false" role="button" aria-disabled="false" 
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"> 
    <span class="ui-button-text">Somewhere</span> 
</label> 

Как вы можете видеть, измененная метка и генерироваться продолжительность не имеет какого-либо class говорит мне, что это флажок (или радио/кнопка).

Идеальное решение будет основано на надежде, что какой-то класс я не заметил. Вторым лучшим решением будет интерфейс jQuery для патча обезьяны, чтобы добавить лучший класс для этих входов. Последним возможным решением было бы взломать файлы jQuery ... хотя я действительно хочу этого избежать.

---

Имейте в виду, что любой вид fanboyism, неконструктивные комментарии и подобные ответы не будут допускаться. Проблема заключается в jQuery UI, я не хочу слышать о mootools, extjs или любой модной библиотеке l33t, которая вам подходит.

Answer 1

вы можете добавить $('input:checkbox').addClass('ui-checkbox') добавить ui-checkbox класс к входу и что-то вроде этого:

$('input:checkbox').each(function() { 
    $('label[for="'+this.id.+'"]').addClass('ui-checkbox-label'); 
}) 

добавить ui-checkbox-label класс для все наклейки флажка

Answer 2

Вот что я пришел с:

http://jsfiddle.net/fWPK6/

Мы используем jQuery ui create метод при создании кнопки, чтобы найти атрибут типа ввода, а затем добавить его к метке. Я должен указать одну очень важную вещь, каждое поле ввода должно иметь id, и соответствующая метка должна иметь правильный для атрибута.

Если вам нужна дополнительная настройка с классом, просто возитесь с addClass (type).