jQuery Mobileカスタム選択メニューで閉じるボタンのレイアウトを制御する方法はありますか？

Question

私はカスタム選択メニュー（複数の）次のように定義されている：

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

すべては私が右にヘッダのボタンアイコン上を移動して閉じるテキストを表示することを除いて正常に動作します。 （私はいくつかのモバイルユーザーがXアイコンが何であるかを知っているか、それをクリックするのに問題があることを知っているので、右に「閉じる」という言葉を欲しいと思っています。そのオプションが選択バー自体に適用されるので、選択したときにそのオプションを実行するためのオプションです。

私はこのような何か（あなたはコメントアウトすることで見ることができるように私は、いくつかのバリエーションを試してみました）やって、ボタンのアンカーを見つけ、イベントを作成し、そこに傍受し、そのために作成ハンドラを追加しようとしている：

を

 $('#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'); 
        } 
       }); 
      } 
     }); 
    }); 

私は、ボタンのオプションをリセットし、リフレッシュ（動作しませんでした）を試み、CSSを変更しようとしました。どちらもうまくいきませんでしたし、改行のある閉じるアイコンで奇妙な書式設定の問題が発生しました。

これを行う正しい方法を知っている人はいますか？

Answer 1

私はこれをselectmenuプラグインのソースコードを見てもうまく動作するようにしました。実際にボタンを使用しているわけではありません。アンカータグは、Createイベントが発生する前にすでに作成されている（natch）buttonMarkupプラグインのソースです。

これは、マークアップが既に作成されていることを意味します。私の最初の試み（私の質問を参照）は、既存のマークアップを悪用しようとするとあまりにも面倒です。 buttonMarkupを削除して、それを自分の望むオプションで再作成すると、よりクリーンで信頼性が向上します。 '#search'セレクタはJQ page-divのidであり、 '#DanceStyles'は自分のネイティブselect要素のidです。私は後者がメニューのIDに使用されているのを見ることができました。なぜなら、最初にそれを選択してアンカーに上下にナビゲートする理由です。私はアンカーに到達する他の信頼できる方法を見ることができませんでした。 buttonMarkupは（子供スパンを作成するインナーHTMLがするように、自分自身を作成するときに

$('#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プラグインは、要素のテキストとクラス値を使用していますが、他のデータ - の属性は、前のbuttonMarkupに起因して除去されなければなりません、など）。 title属性は何らかの理由で再作成されなかったので、私はそれを自分で設定しました。

PS誰かがこれを達成するためのよりよい方法（buttonMarkup（ 'remove'）など）を知っている場合は、お知らせください。

Answer 2

jqueryモバイルコードを少し変更して、閉じるボタンが常にアイコンなしで、テキストなしで「閉じる」 私が同意する最良の方法ではないようにしました。しかし...

Answer 3

に動作します私は似たようなケースを持って、私はこのことについて、いくつかの汚いハックをした：私は適用するために忘れてしまうことを知っているので、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); 
});