我有一堆可折叠的集合,每个集合中都有一个用于发布数据的翻转开关。结果(有效)是
-itemA YES
-itemB NO
-itemC YES
...
-itemZ NO
我想有一个视觉线索,表明一个集合被选中(开关隐藏在集合中,所以当关闭时,我不知道它是否被选中)
我发现我可以使用一个主题来更改外观,但我如何更改仅作为开关父级的可折叠集的主题。
您可以更改可折叠小部件的主题特定类以"突出显示"它,下面是一个示例:
//setup the classes and theme letters to use for on/off states
var classes = {
on : 'ui-btn-up-e ui-body-e',
off : 'ui-btn-up-c ui-body-c'
},
themes = {
on : 'e',
off : 'c'
};
//delegate the event handler binding for all toggle switches
$(document).on('change', '.ui-slider-switch', function () {
//if the switch is "off"
if ($(this).val() == 'off') {
//find the parent collapsible widget of this switch, change its theme,
//find the descendant header link and change it's theme attribute as well as class,
//then go back to the collapsible selection and find the content wrapper
//and change it's class to the "off" state class
$(this).closest('.ui-collapsible').attr('data-theme', themes.off).find('a').attr('data-theme', themes.off).removeClass(classes.on).addClass(classes.off)
.end().find('.ui-collapsible-content').removeClass(classes.on).addClass(classes.off);
} else {
//this does the same but backwards to make the "on" or active state
$(this).closest('.ui-collapsible').attr('data-theme', themes.on).find('a').attr('data-theme', themes.on).removeClass(classes.off).addClass(classes.on)
.end().find('.ui-collapsible-content').removeClass(classes.off).addClass(classes.on);
}
});
还有一个演示:http://jsfiddle.net/ZtJyL/
一些文档:
- http://jquerymobile.com/demos/1.1.0-rc.1/docs/content/content-collapsible.html
- http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/switch/events.html
注意,我创建的classes
对象为on
存储两个类,为off
存储两个类别,当使用classes
对象时,这两个类别都将从元素中添加/删除。我在JSFiddle中没有看到这样做有任何冲突,但要意识到这是一条没有必要的捷径。