0

ダイアログボックスで使用する2つのボタンを作成していますが、何をしているように見えません。アイコンをテキストとともに表示できません。私は他の場所でこれをうまく行うことができます。

これは機能します（これはほとんどドキュメントからコピーして貼り付けられています：

$("#signout_button").button({label:"Sign Out", icons: { primary: 'ui-icon-key'}});

これは動作しません：

              $("#dialog_link").dialog({draggable: true, title: "Are you sure?", show: "slide", modal: true, width:500,height:200,
                buttons: [{

                  label:'Yes, I am sure',
                  icons: { primary: 'ui-icon-alert' },
                  click: function(){
                    alert('well alrighty then');
                  }    
                },{
                  text:'No, please make it stop',
                  icons: { primary: 'ui-icon-alert' },
                  click: function(){
                    alert('well alrighty then');
                  }
                }]
              });

divはすでに存在し、非常に単純です

<div id="dialog_link"></div>

ある種の奇妙な構文エラーだと思います。ダイアログボックスが正常に開き、クリックイベントが発生するため、JavaScriptがクラッシュしませんでした。

私がよく知っている最初のボタンは、アイコンもテキストもないボタンになります。2番目のボタンは、テキストのみのアイコンです。

私も試しました：

text:true,
label: 'test label',
icons: {primary: 'ui-icon-alert'},
click: function(){ alert('testing');}

レンダリングのサインアウトボタンは、アイコンとラベルの両方で表示されます。これはダイアログボックスの作成におけるJQueryのバグですか、それとも本当に愚かで単純なものが欠けていますか？

4

2 に答える 2

1

アイコン付きのボタンを作成するためのダイアログは組み込まれていないようです。

空のボタンに関する問題は単純です。「ラベル」を記述せず、代わりに「テキスト」を使用してください（2番目のボタンの場合のように）。

とにかくアイコンを使用するには、このソリューションのjQueryUIダイアログボタンアイコンを参照してください。最後の答えが一番いいと思います。

私はそれをすべてこのフィドルにまとめました、そしてそれは機能します：http: //jsfiddle.net/GzeMT/

于 2012-06-13T03:13:35.223 に答える
0

のjQueryUIコードを調べDialogたButtonsところ、どちらもボタンの作成に異なる方法を使用していることがわかりました。Dialogウィジェットは関数（ウィジェット）を呼び出しますButtonが、それが存在する場合に限ります。したがって、フォールバックとして、ボタン自体を作成し、textオプションを介して渡されたプロパティをボタンのラベルとして使用します（ウィジェットが使用するlabelようにではありません）。button

他のプロパティからclickは、定義されている場合にのみハンドラーに関心が示されます。

props = $.isFunction( props ) ? { click: props, text: name } : props;

その他のプロパティはdata属性として設定されます。

$.each( props, function( key, value ) {
    if ( key === "click" ) {
        return;
    }
    if ( key in attrFn ) {
        button[ key ]( value );
    } else {
        button.attr( key, value );//ANY PROPERTY LIKE ICONS SET AS DATA ATTR.
    }
});

buttonこの後、ウィジェットが存在するかどうか、およびウィジェットが存在するかどうかをチェックします。

if ($.fn.button) {
    button.button();
}

簡単な回避策を試しました。ウィジェットが存在する場合buttonは、ダイアログオプションのボタンに設定したすべてのプロパティを渡します。そして驚いたことに、それは意図したとおりに機能します:)

if ($.fn.button) {
button.button(props);//PASS OPTIONS FROM DIALOG BUTTON OBJECT HERE 
}
于 2012-06-13T03:49:19.167 に答える