Объединить флажок с jquery мобильный просмотр списка

Question

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

http://tinyurl.com/ctvko27

Всякий раз, когда я использую чекбокс jqm с меткой, из фреймворка получается большой стиль, который мне не нужен. Я не хочу использовать функцию fieldset, так как они всегда вставляются, и мне нужно, чтобы список был на 100% шириной. Я хочу иметь возможность использовать флажок, полностью стилизованный, как часть моей ячейки списка. Я надеюсь, что мой вопрос ясен и что кто-то может дать некоторые рекомендации.

С уважением, Иво

Answer 1

Решение

Вот решение для вас, у меня было свободное время, так что вот оно: http://jsfiddle.net/Gajotres/ek2QT/

Javascript код:

Сначала на странице перед выставкой установите / снимите флажки наших пользовательских.

$('#index').live('pagebeforeshow',function(e,data){
    $('input[type="checkbox"]').each(function(){
        ($(this).is(':checked')) ? $(this).parent().parent().addClass('checked') : $(this).parent().parent().addClass('not-checked');   
    });
});

Эта часть будет обрабатывать состояния смены флажков.

$('.checkBoxLeft').bind('click', function(e) {
    if($(this).find('input[type="checkbox"]').is(':checked')){
        $(this).removeClass('checked').addClass('not-checked');
        $(this).find('input[type="checkbox"]').attr('checked' , false);
    } else {
        $(this).removeClass('not-checked').addClass('checked');             
        $(this).find('input[type="checkbox"]').attr('checked' , true);
    }
});

Rest off css находится в примере, img для пользовательских состояний можно найти здесь:

Финальные заметки

Если вы хотите узнать больше о том, как настроить страницу и виджеты jQuery Mobile, ознакомьтесь с этой статьей. Он содержит множество рабочих примеров, в том числе почему важно для jQuery Mobile.

Answer 2

Просто пытался использовать решение Gajotre с последними версиями jquery (1.9.1) + jquerymobile (1.3.2), но, к сожалению, это не сработало.

Вы должны изменить

$(this).find('input[type="checkbox"]').attr('checked' , false);
$(this).find('input[type="checkbox"]').attr('checked' , true);

в

$(this).find('input[type="checkbox"]').prop('checked' , false);
$(this).find('input[type="checkbox"]').prop('checked' , true);

в противном случае вы сможете изменить флажок "проверено" только один раз.

Answer 3

Есть несколько подходов, которые могут работать. Вы можете попробовать установить заголовок флажка гиперссылки <a /> тег. Вы также можете отключить автоматическое улучшение на свой флажок. По сути, у вас будут проблемы с сенсорными событиями и любым совпадением двух элементов управления.

<input type="checkbox" data-role="none" />