1

折りたたみ可能なセットがたくさんあり、それぞれの中にデータを投稿するために使用するフリップスイッチがあります。結果（これは機能します）は

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

セットが選択されていることを視覚的に確認したい（スイッチはセット内に隠されているため、閉じたときに選択されているかどうかはわかりません）

テーマを使用して外観を変更できることがわかりましたが、スイッチの親のみである折りたたみ可能なセットのテーマを変更するにはどうすればよいですか。

4

1 に答える 1

3

折りたたみ可能なウィジェットのテーマ固有のクラスを変更して、それを「強調表示」できます。以下に例を示します。

//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/

いくつかのドキュメント:

私が作成したオブジェクトには、 forとclassesfor の 2 つのクラスが格納されていることに注意してください。これらのクラスは両方とも、オブジェクトを使用するときに要素に追加/要素から削除されます。JSFiddle でこれを実行しても競合は見られませんでしたが、これは不要なショートカットであることに注意してください。onoffclasses

于 2012-04-04T17:08:14.597 に答える