将复选框与 jquery 移动列表视图结合起来 [英] combine checkbox with jquery mobile listview

问题描述

我想在我的列表视图单元格中使用 jqm 样式的复选框.我制作了一张合成图片以显示所需的最终结果:

I'd like to use a jqm styled checkbox in my listview cells. I've made a composite picture to show the desired end result:

http://tinyurl.com/ctvko27

每当我使用带有标签的 jqm 复选框时，它都会从框架中获得一个很大的样式，这是我不想要的.我不想使用字段集功能，因为这些总是插入的，我需要列表的宽度为 100%.我希望能够使用完全样式化的复选框作为我的列表视图单元格的一部分.我希望我的问题很清楚，并且有人可以提供一些指导.

Whenever I use the jqm checkbox with a label it gets a big styling from the framework, which I do not want. I don't want to use the fieldset feature since these are always inset and I need the list to be 100% width. I want to be able to use the checkbox, fully styled, on its own as part of my listview cell. I hope my question is clear and that someone can provide some guidance.

问候，伊沃

推荐答案

解决方案

这是一个给你的解决方案，我有空闲时间所以这里是:http://jsfiddle.净/Gajotres/ek2QT/

Javascript 代码:

Javascript code:

首先在显示前选择/取消选择我们的自定义复选框.

First on pagebeforeshow select/unselect our custom checkboxes.

$('#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');   
    });
});

这部分将处理复选框更改状态.

This part will handle checkbox changing states.

$('.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);
    }
});

示例中使用了 css，用于自定义状态的 img 可以在 here:

Rest off the css is in the example, img used for custom states can be found here:

如果您想了解有关如何自定义 jQuery Mobile 页面和小部件的更多信息，请查看此 文章.它附带了许多工作示例，包括为什么 !important 对于 jQuery Mobile 是必需的.

If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.

这篇关于将复选框与 jquery 移动列表视图结合起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！