我想在listview单元格中使用jqm样式的复选框.我制作了一张合成图片,以显示所需的最终结果：
每当我使用带有标签的jqm复选框时,它就会从框架中获得一个很大的样式,这是我不想要的.我不想使用fieldset功能,因为它们总是插入,我需要列表为100％宽度.我希望能够使用完全样式的复选框作为我的listview单元格的一部分.我希望我的问题很清楚,有人可以提供一些指导.
问候,
伊沃
解决方法
解
这是给你的解决方案,我有空闲时间,所以这里是：http://jsfiddle.net/Gajotres/ek2QT/
Javascript代码：
首先在pagebeforeshow上选择/取消选择我们的自定义复选框.
$('#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);
}
});
在示例中休息了css,用于自定义状态的img可以找到here：
最后的笔记
如果你想了解更多关于如何自定义jQuery Mobile页面和小部件的信息,那么请看一下这个article.它附带了很多工作示例,包括为什么对jQuery Mobile来说是必不可少的.
