1

モバイル デバイスで Web アプリを使用する場合のボタンの応答性について、よく議論されている問題に関する別のトピック。

touchendラジオボタンが押されることをトリガーするイベントをリッスンしています。これにより、ボタンの応答性が向上するという問題は解決されますが、別の問題が生じます。

jQuery モバイルは、取り残されるイベントが発生したときに 、 、 などのクラスを適用しui-icon-radio-onますui-radio-on。これにより、イベントが終了してもボタンがまだ押されているように見えます。これらすべてのクラスの削除と追加を両立させて、すべてが正しく見えるようにするのは、最終的にはかなりの労力になります。ui-btn-hvr-aui-btn-dwn-a

私の質問は、必要なクラスと属性を追加および削除するエレガントな方法を持っている人はいますか?

また

イベントトリガーに基づいて手動でスタイリングを処理するという点で、「ホイールを再作成する」ことを伴わない、これに関するより良い方法はありますか? Google の高速ボタンの方が優れたソリューションでしょうか? （統合する方法がわからない）。もっと簡単な方法はありますか？

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function (event) {
if($(this).hasClass('AdminSurv') && event.type=='pageinit') {
    $(this).on( 'touchend', '.ui-radio', function(event) {
        event.preventDefault();

        /*uncheck all radios in control group to avoid multiple checks*/
        var _control_group = $(this).parent();
        _control_group.find("input:radio:checked").attr('checked',false);

        /*check the radio*/
        $(this).find('input').attr('checked', true);

        /*much juggling of classes/attributes going on here
          still looks like the buttons are being held down
          this is a very sloppy example of my initial attempt*/
        _control_group.find('label').removeClass('ui-radio-on');
        _control_group.find('label').removeAttr('data-icon');
        _control_group.find('label span span').removeClass('ui-icon-radio-on');

        $(this).find('label').removeClass('ui-radio-off');
        $(this).find('label').addClass('ui-radio-on');
        $(this).find('label').attr('data-icon','radio-on');

        $(this).find('label span span').removeClass('ui-icon-radio-off');
        $(this).find('label span span').addClass('ui-icon-radio-on');
    });
  }
});
4

1 に答える 1

2

多くの jQuery Mobile ウィジェットはrefreshメソッドを受け入れます。このメソッドは、DOM に既に存在する要素のマークアップを強化するために使用されるか、動的に挿入されます。

チェックボックスとラジオ ボタンの場合、.checkboxradio('refresh')と組み合わせて.prop()、チェックされた要素とチェックされていない要素に対して、クラスを追加/削除することでマークアップを強化/変更するために使用されます。

小切手

$('.selector').prop('checked', true).checkboxradio('refresh');

チェックを外す 

$('.selector').prop('checked', false).checkboxradio('refresh');

デモ

参考：Checkboxradioウィジェット

于 2013-05-24T20:20:20.410 に答える