0

次のように定義されたカスタム選択メニュー（複数）があります。

 <select name="DanceStyles" id="DanceStyles" multiple="multiple" data-native-menu="false">

ヘッダーのボタンアイコンを右に移動して[閉じる]テキストを表示することを除いて、すべて正常に機能します。（一部のモバイルユーザーは、Xアイコンの目的を理解できないか、クリックするのに問題があることがわかったので、右側に「閉じる」という単語を入れて大きくしすぎて見逃せないようにします。）そのオプションは選択バー自体に適用されるため、選択でそれを行うための任意のオプションになります。

私はcreateイベントをインターセプトして、そこでボタンアンカーを見つけ、そのためのcreateハンドラーを追加して、次のようにしました（コメントアウトでわかるように、いくつかのバリエーションを試しました）。

        $('#search').live('pagecreate', function (event) {
           $("#DanceStyles").selectmenu({
            create: function (event, ui) {
               $('ul#DanceStyles-menu').prev().find('a.ui-btn').button({
                    create: function (event, ui) {
                        var $btn = $(this);
                        $btn.attr('class', $btn.attr('class').replace('ui-btn-left', 'ui-btn-right'));
                        $btn.attr('class', $btn.attr('class').replace('ui-btn-icon-notext', 'ui-btn-icon-left'));
   //                             $(this).button({ iconpos: 'right' });
   //                            $btn.attr('class', $btn.attr('class').replace('ui-btn-icon-notext', 'ui-btn-icon-left'));
       //                            //                            $btn.attr('data-iconpos', 'left');
                        $(this).button('refresh');
                    }
                });
            }
        });
    });

そこで、ボタンオプションをリセットしてrefreshを呼び出し（機能しませんでした）、CSSを変更してみました。どちらも機能せず、閉じるアイコンに改行があるという奇妙なフォーマットの問題が発生しました。

誰かがこれを行う正しい方法を知っていますか？

4

3 に答える 3

0

selectmenuプラグインのソースコードを見た後、これがきれいに機能するようになりました。実際にはボタンを使用していません。アンカータグは、Createイベントが発生する前にすでに作成（ナッチ）されているbuttonMarkupプラグインのソースです。

これは、マークアップがすでに作成されていることを意味します。既存のマークアップを壊そうとする私の最初の試み（私の質問を参照）はあまりにも厄介です。buttonMarkupを削除して、希望のオプションで再作成する方が、よりクリーンで信頼性が高くなります。'#search'セレクターはJQpage-divのIDであり、'#DanceStyles'は私のネイティブselect要素のIDであることに注意してください。後者がメニューのIDに使用されているのがわかりました。そのため、最初にメニューを選択して、アンカーまで上下に移動します。アンカーにたどり着くための他の信頼できる方法を見つけることができませんでした。

$('#search').live('pagecreate', function (event) {
    $("#DanceStyles").selectmenu({
        create: function (event, ui) {
            $('ul#DanceStyles-menu').prev().find('a.ui-btn')
                .empty()
                .text('Done')
                .attr('class', 'ui-btn-right')
                .attr("data-" + $.mobile.ns + "iconpos", '')
                .attr("data-" + $.mobile.ns + "icon", '')
                .attr("title", 'Done')
                .buttonMarkup({ iconpos: 'left', icon: 'arrow-l' });
        }
    });
});

buttonMarkupプラグインは、それ自体を作成するときにA要素のテキストとクラス値を使用しますが、他のデータ属性は前のbuttonMarkupの結果であり、buttonMarkupが作成する内部html（子スパンなど）と同様に削除する必要があります。なんらかの理由でtitle属性が再作成されなかったので、自分で設定しました。

PSこれを達成するためのより良い方法（たとえば、buttonMarkup（'remove'）？）を誰かが知っている場合は、私たちに知らせてください。

于 2012-01-04T13:18:22.953 に答える
0

私が達成した方法は、jqueryモバイルコードを少し変更して、閉じるボタンがアイコンなしで常に右側に表示されるようにすることでした。「閉じる」というテキストは、私が同意する最善の方法ではありません。しかし、動作します。

于 2012-01-04T13:26:19.827 に答える
0

私は同様のケースを受け取りました、そして私はこれについていくつかの汚いハックをしました：P

$("#DanceStyles-button").click(function() {
  setTimeout(function(){
    $("#DanceStyles-dialog a[role=button]").removeClass("ui-icon-delete").addClass("ui-icon-check");
    $("#DanceStyles-dialog .ui-title").html("<span style='float:left;margin-left:25px' id='done'>Done</span>Dance Styles");
    $("#DanceStyles-dialog .ui-title #done").click(function() {
      $("#DanceStyles").selectmenu("close")
    });
  },1);
} );
于 2014-03-13T02:46:54.013 に答える