jQueryのUIダイアログ - 私は、次が含まれているすべてのそれらのいくつかのjQuery UIのダイアログのハンドラを、持っているデフォルトの設定

Question

を設定します。

open: function(event, ui) { 
     $(".ui-dialog-titlebar").removeClass("ui-corner-all"); 
     $(".ui-dialog").removeClass("ui-corner-all"); 
}, 

ダイアログが直角の角ではなく、丸いものを持っているように、これはあります。私はそれがデフォルトとしてこのセットを持つことが可能かどうか疑問に思っていたので、ページ上のすべてのダイアログ設定にこのコードを挿入する必要はありません。

私はCSSを編集できるとは知っていますが、必要でない場合は実際にクラスを削除する方が意味があります。

Answer 1

私はそれが完璧ではないことを知っていますが、自分のデフォルトを含む独自のdefaultsオブジェクトを定義することができます。あなたが上書きしたり、それらのデフォルトに追加する必要がある場合次に、あなたは$.extendを使用することができます。

var dialogDefaults = { 
    open: function (event, ui) { 
     $(".ui-dialog-titlebar").removeClass("ui-corner-all"); 
     $(".ui-dialog").removeClass("ui-corner-all"); 
    } 
}; 
// then later on: 
$("#foo").dialog($.extend({ }, dialogDefaults, { 
    autoOpen: false, 
    width: 500, 
    /* etc... */ 
})); 

またイベントのために、あなたはon（またはその兄弟delegateを使用してオプションオブジェクトの外にそれらに結合することができることを覚えて、 bind,live）。次の例のように、あなたのダイアログのすべてに同じクラスを適用することによって、複数のダイアログにそのイベントハンドラを適用することができます。

$("div.my-dialog-class").on("dialogopen", function (event, ui) { 
    $(".ui-dialog-titlebar").removeClass("ui-corner-all"); 
    $(".ui-dialog").removeClass("ui-corner-all"); 
}); 

ただ、このイベントハンドラは、新しいダイアログのためにオフに解雇しないことに注意してください。あなたは（これは私が行くルートです）bodyにイベントバブルアップDOMを聞かせて、そこにイベントハンドラをアタッチできます

$(document.body).on("dialogopen", "div.my-dialog-class", function (event, ui) { 
    $(".ui-dialog-titlebar").removeClass("ui-corner-all"); 
    $(".ui-dialog").removeClass("ui-corner-all"); 
}); 

イベント委譲のこの方法では、あなたがすべてにあなたopen機能を適用していますダイアログボックスはdocument.bodyに追加されます。