jQuery UIモーダルダイアログ：ボタンアイコンが表示されない

Question

ボタンアイコンオプションが効果を持たないことを除いて、モーダルダイアログが完全に機能します（すべてのオプションを調整できます）。 - 例えば、私は、私が見つけることができるすべての関連するスタックオーバーフローの質問を見てきました

$('#alert_div') 
    .attr("title", "Delete all instances?") 
    .text("Are you sure you want to delete all instances of this event between the specificed dates? This cannot be undone.") 
    .dialog({ 
     modal: true, 
     draggable: false, 
     position: { my: "top", at: "center", of: window }, 
     buttons: [ 
      { 
       text: "No", 
       icons: { primary: "ui-icon-check" }, 
       click: function() { 
        $(this).dialog('close'); 
        console.log('Clicked no.'); 
       } 
      }, 
      { 
       text: "Yes", 
       click: function() { 
        $(this).dialog('close'); 
        console.log('Clicked yes'); 
       } 
      } 
     ] 
    }); 

：ここで私は、ダイアログを生成するために使用しているコードですthis one。オープン時にボタンに要素を付けること以外に、私はこれを解決する方法を知らない。ドキュメント内の他の場所に要素を作成し、適切なクラスを与えると、アイコンが正しく表示されます。

<div class="ui-dialog-buttonset"><button type="button" icons="[object Object]" class="ui-button ui-corner-all ui-widget">OK</button></div> 

私は「以外の何かがあるはずと仮定している[オブジェクトのオブジェクト] アイコンで属性：

はここでダイアログを開いたときにjQueryのボタン用に生成するHTMLです。なぜこうなった？私はjQuery UI v。1.12.0とjQuery v。3.0.0を使用していますが、私はブートストラップを使用していません。

Answer 1

のjQuery UI 1.12 new syntax for button icons導入、私は修正にこの問題を確認している（this jsFiddleを参照してください）。現在、廃止予定のオプションは受け付けていません。それを修正するPR has been submitted。詳細は、my bug reportを参照してください。次のコードは、jQueryのUI 1.12とjQuery 3.1.0で動作します：

$("#alert_div") 
.attr("title", "Error") 
.text("Please choose a calendar and enter both start and end dates.") 
.dialog({ 
    modal: true, 
    draggable: false, 
    resizable: false, 
    position: { my: "top", at: "top", of: window }, 
    buttons: [{ 
     text: "OK", 
     icon: "ui-icon-check", 
     click: function() { 
      $(this).dialog("close"); 
     } 
    }] 
}); 

Answer 2

明らかに、問題はjquery-ui 1.12.0のバグです。あなたのフィドルで1.12.0の代わりに1.11.4を使うと、問題はなくなります。

私自身のテスト環境であなたのコード（上で公開したコード、あなたのフィドルのコードではありません）を実行しましたが、すべて正常に動作しました。 （私は最新の安定版であった5月に1.11.4をダウンロードしました）dialog()が呼ばれたときにbutton()メソッドが呼び出されていないようです。正確に推測すると、要素にはobject Objectはありません。私のボタンコードは次のようになります。

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icons" role="button"> 
    <span class="ui-button-icon-primary ui-icon ui-icon-check"></span> 
    <span class="ui-button-text">No</span> 
    <span class="ui-button-icon-secondary ui-icon ui-icon-circle-check"></span> 
</button> 

これはjQuery-UI 1.12.0の「本当の本当のバグ」のように見えます。 :)

編集：これは実際にjQuery-UI 1.12.0の「本物の本物の機能」であり、いくつかの変更点で以前のバージョンとの互換性が失われているようです。 Harpoの「新しい構文」のリンクを参照してください。メニューを使っている人（特にメニュー、古い人はもはや動かない）、ラジオボタン/チェックボックス、または他のいくつかのものは、それを読んでほしいでしょう。

ボタン上に2つのアイコンを表示することは、新しい構文では可能ですが、dialog()メソッドのbuttonsパラメータを使用して行うことはできません。代わりに、標準的な方法でボタンのアイコンにスパンを追加する必要があります。 （アップグレード・ドキュメントによれば、マークアップに2番目のアイコンスパンを置き、プライマリ・アイコンであったものに対してはiconパラメータを使用することができますが、このコンテキストでは動作させることはできませんでした）その後、

<div id="alert_div"> 
    <button id="okButton"> 
     <span class="ui-icon ui-icon-check"></span> 
     Ok 
     <span class="ui-icon ui-icon-circle-check"></span> 
    </button> 
</div> 

そして：マークアップのために

$('#alert_div').dialog({ 
    open: function(e, ui) { 
     $('#okButton') 
     .button() 
     .on('click', function() { 
      $(this).dialog('close'); 
     }); 
    } 
}); 

Answer 3

これは、例えば、我々はそれにすべてのことを行うことができますされて見てください..

それに変更を加えるために使用スタイル...

おかげで... :)