私はjqueryのダイアログプラグインおよびデフォルトを使用していjQueryのUIのダイアログ

Question

に丸みを帯びた角のタイプを設定すると、丸みのタイトルバーのすべての4つのコーナーを持つことです。あなたは、ダイアログでは、私はui-corner-topにそれを変更したいui-corner-allというクラスがあるui-dialog-titlebar divの上で見ることができるの例では、ここで

http://jqueryui.com/demos/dialog/#theming

を生成すること、マークアップを見ることができます。ダイアログを開始するときに丸みを帯びたコーナークラスのタイプを設定する方法はありますか？

はそこに常にそのクラスを持っているのJavaScriptファイルjqueryのUIダイアログを編集するハックオプションがありますが、それは柔軟性に欠けるようです。

ありがとうございます。

Answer 1

jquery UIライブラリを変更しないでください。アップグレードするたびにライブラリを変更する必要があるとします。

jQuery UIウィジェットはウィジェットファクトリを実装しています。ウィジェットが初期化されると、イベント "create"が発生します。 、あなたが作成する必要があり、単純に完全にボーダー半径を削除することをあなたのそれらのために

$("#dialog").dialog({ 
    create: function(e, ui) { 
     // 'this' is #dialog 
     // get the whole widget (.ui-dialog) with .dialog('widget') 
     $(this).dialog('widget') 
      // find the title bar element 
      .find('.ui-dialog-titlebar') 
      // alter the css classes 
      .removeClass('ui-corner-all') 
      .addClass('ui-corner-top'); 
    } 
}); 

DEMO

Answer 2

（または任意の他のjQueryのUIスタイル）：生成されるマークアップを変更するために、このイベントを使用しますダイアログオプションの "dialogClass"。

$("#dialog").dialog({ 
modal: true, 
draggable: true, 
resizable: false, 
dialogClass: "MyClass", 
}); 

これを実行したら、独自のCSSスタイルシート内のデフォルトのクラスとスタイルを変更できます。

.MyClass .ui-corner-all { 
    border-radius: 0; 
}