jquery(移动): use flip switch to change theme of collapsible cotent

Question

我有一堆可折叠的集合，每个集合中都有一个翻转开关，我用它来发布数据。 结果(有效)是

-itemA YES
-itemB NO
-itemC YES
...
-itemZ NO

我想要一个视觉线索，表明选择了一个集合(开关隐藏在集合内，因此当关闭时，我不知道它是否被选择)

我发现我可以使用主题来更改外观，但是如何更改仅作为开关父级的可折叠集的主题。

Answer 1

您可以更改可折叠小部件的主题特定类以“突出显示”它，下面是一个示例:

//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 中执行此操作有任何冲突，但请注意这是不必要的快捷方式。