Различение флажков, кнопок и радио в CSS jQuery UI - PullRequest
Новая
       30

Различение флажков, кнопок и радио в CSS jQuery UI

0 голосов
/ 23 января 2012

Я пишу свой собственный CSS для jQuery UI.

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

Проблема здесь в том, что классы 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>

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

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

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

Ответы [ 2 ]

2 голосов
/ 23 января 2012

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

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

чтобы добавить класс ui-checkbox-label ко всем ярлыкам вашего флажка

0 голосов
/ 23 января 2012

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

http://jsfiddle.net/fWPK6/

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

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

...