使用jQuery Mobile的ListView结合复选框 [英] 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:
每当我使用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.net / Gajotres / ek2QT /
Solution
Here's a solution for you, I had a spare time so here it is: http://jsfiddle.net/Gajotres/ek2QT/
的Javascript code:
Javascript code:
先上pagebeforeshow选择/取消选择我们的定制复选框。
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可以发现此处一>:
如果您想了解更多有关如何自定义jQuery Mobile的页面和窗口小部件再看看这个的文章 。它配备了大量的工作示例,包括为什么!重要的必要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 Mobile的ListView结合复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!