jquery - jQueryダイアログのタイトルアイコン回避策により、他のオプションが無視されます

Question

これが誰かの時間を無駄にしないことを願っています...私は何時間もさまざまな解決策を研究して試してきましたが、これを機能させることはできません。

jQueryUI1.10.1を使用しています。タイトルにアイコンを追加したい。次のコードはバージョン1.10.1では機能しません。

$("#dialog").dialog(
{
    title: '<span class="ui-icon ui-icon-home"></span> Example Dialog'
});

したがって、回避策として次のコードを使用しています。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
            {
                var eventDialog = $("#createEventForm").dialog();

                eventDialog.data("uiDialog")._title = function(title) 
                {
                    title.html(this.options.title);
                };

                eventDialog.dialog(
                {
                    title: "<span class=\"ui-icon ui-icon-pencil\" style=\"float: left; margin-right: 4px;\"></span> New Appointment",
                    modal: true,
                    autoOpen: false,
                    width: "auto",
                    buttons: [
                    {
                        text: "Save",
                        'click': function()
                        {
                            // do something with .ajax in here
                        },
                        icons: { primary: 'ui-icon-plus'}
                    },
                    {
                        text: "Cancel",
                        'click': function()
                        {
                            $(this).dialog("close");
                        },
                        icons: {primary: 'ui-icon-cancel'}
                    }]
                });
            });
</script>

これで、アイコンは私が望むようにタイトルバーに表示されますが、「モーダル」および「autoOpen」オプションは無視されます。「幅」および「ボタン」オプションは期待どおりに機能しています。

実際には、ページが読み込まれるときにのみ無視されます。ダイアログを閉じてから、HTMLでそれをトリガーするボタンをクリックすると、ダイアログが再び開いたときにすべてのオプションが期待どおりの効果を発揮します。