Как создать диалог, используя jquery-ui без указания html div

Question

Использовать jquery-ui для создания диалога довольно просто:

<script>
$(function() {
    $( "#dialog" ).dialog();
});
</script>

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be   moved, resized and closed with the 'x' icon.</p>
</div>

... но для работы все еще нужен div в HTML. В Додзё:

var dlg = new dijit.Dialog({
    title:"dialog",
    style: "width:30%;height:300px;"
});
dlg.show();

просто сделал бы уловку без указания в разделе html, может ли jquery-ui сделать это? (Я должен использовать jquery-UI здесь) Спасибо,

David

Answer 1

Хотя я не уверен, почему вы захотите открыть диалоговое окно без содержимого, вы можете легко создать новое на лету и вызвать для него диалог jquery:

$("<div>hello!</div>").dialog();

Answer 2

базовый код

var d = $("#someId");
if (d.length < 1)
    d = $("<div/>").attr("id", "someId")
                   .appendTo("body");
else
    d.dialog('destroy');
d.html('some message')
 .dialog({ some_options })
 .dialog("open");

и вы, вероятно, можете добавить это в метод расширения.

Обновление (мой полный список кодов)

(function($) {
    $.extend({
        showPageDialog: function (title, content, buttons, options) {
            /// <summary>Utility to show a dialog on the page. buttons and options are optional.</summary>
            /// <param name="buttons" type="Object">Dialog buttons. Optional, defaults to single OK button.</param>
            /// <param name="options" type="Object">Additional jQuery dialog options. Optional.</param>
            if (!buttons)
                buttons = { "Ok": function () { $(this).dialog("close"); } };
            var defOptions = {
                autoOpen: false,
                modal: true,
                //show: "blind",
                //hide: "explode",
                title: title,
                buttons: buttons
            };
            if (options)
                defOptions = $.extend(defOptions, options);
            var pd = $("#pageDialog");
            if (pd.length < 1)
                pd = $("<div/>").attr("id", "pageDialog")
                                .appendTo("body");
            else
                pd.dialog('destroy');
            pd.html(content)
              .dialog(defOptions)
              .dialog("open");
        }
    }//end of function show...
  )//end of extend Argument
})(jQuery)

Пример использования

$.showPageDialog(title, message, {
                "Yes": function () {
                    $(this).dialog("close");
                    // do something for 'yes'
                },
                "No": function () {
                    // do something for no
                }
        }

Answer 3

var div = document.createElement('div');
div.innerHTML = "Hello World";
$(div).dialog();

Answer 4

Решение Хуана Айяла должно работать для модальных диалогов. Для немодального диалога было бы лучше отследить идентификатор внутри функции. Я использую следующий код, который не является совершенным, но должен работать, чтобы идентификатор уникален. Код почти равен примеру Хуана Айяла, но использует счетчик, чтобы избежать дублирования идентификатора. (Кроме того, я удалил кнопку ОК по умолчанию).

  (function($) 
  {
    var dCounter=0; //local but "static" var 
    $.extend({
    showPageDialog: function (title, content, buttons, options) {
        /// <summary>Utility to show a dialog on the page. buttons and options are optional.</summary>
        /// <param name="buttons" type="Object">Dialog buttons. Optional, defaults to nothing (single OK button).</param>
        /// <param name="options" type="Object">Additional jQuery dialog options. Optional.</param>
        if (!buttons)
            buttons = {}; //{ "Ok": function () { $(this).dialog("close"); } };
        var defOptions = {
            autoOpen: false,
            width: "auto",  
            modal: false,   
            //show: "blind",
            //hide: "explode",
            title: title,
            buttons: buttons
        };
        if (options)
            defOptions = $.extend(defOptions, options);
        dCounter++;
        //console.log("dCounter is " + dCounter);
        var pdId = "#pageDialog"+dCounter;          
        var pd = $(pdId);
        if (pd.length < 1)
            pd = $("<div/>").attr("id", pdId)        
                            .appendTo("body");
        else
            pd.dialog('destroy');

        pd.html(content)
          .dialog(defOptions)
          .dialog("open");   
    }//end of function showPageDialog
  }//end of extend options
  )//end of extend argument
  }//end of function definition