jQuery Mobile的：在列表视图数据分割图标改变/开关主题 [英] jQuery Mobile: change/switch theme on listview data-split-icon

问题描述

我在jQuery Mobile的（JQM）分裂的ListView（可折叠套）。你可以看到它这里的jsfiddle。

我要的分割图标充当复选框。该图标默认数据主题=C所以它是灰色的，我想修改数据主题到 b 上点击，所以图标的颜色应更改为蓝色。

我尝试了不同的解决方案，以改变数据主题，发现几个（更少）的工作方案。最好是简单JQM code $（本）.buttonMarkup（{主题：'B'}）; ，但是，变化的数据主题这种方式不改变颜色图标，但只能改变它的背景颜色，您可以在尝试提到的jsfiddle。

Normaly 数据主题上分割列表视图，只会影响图标，但是当它被改变了这种方式，它会影响图标的背景。我想改变唯一的图标，而不是它的背景，我不能找到办法做到这一点。可能是错误的选择或者某种错误的。

你怎么想的？

解决方案

添加以下到您的code。

  

演示

$（本）.find（'span.ui-BTN'）。buttonMarkup（{
   主题：'B'
}）;


和

$（本）.find（'span.ui-BTN'）。buttonMarkup（{
   主题：'C'
}）;


由于 span.ui-BTN 持有的图标和风格。

I have split listview (with collapsible set) in jQuery Mobile (jQm). You can see it here on JSfiddle.

I want the split icon act as checkbox. The icon has default data-theme="c" so it is grey and I want to change the data-theme to b on click, so the icon color should change to blue.

I tried different solutions to change data-theme and found several more or less (more the less) working solution. The best is simple jQm code $(this).buttonMarkup({theme: 'b'});, but, changing data theme this way dont change color of icon, but only change color of its background, as you can try in mentioned JSfiddle.

Normaly data-theme on split listview, will only affect icon, but when it is changed this way, it affects icons background. I want to change only icon, not its background and I cannot find way to do that. Probably wrong selector or some kind of bug.

What do you think?

解决方案

Add the below to your code.

Demo

$(this).find('span.ui-btn').buttonMarkup({
   theme: 'b'
});

and

$(this).find('span.ui-btn').buttonMarkup({
   theme: 'c'
});

As span.ui-btn holds the icon and its' style.

这篇关于jQuery Mobile的：在列表视图数据分割图标改变/开关主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！