は、ダイアログを作成するためにjqueryの-UIを使用して

Question

は非常に簡単です指定しました作業。道場では：

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

は、UIをjQueryのことができ、これを行う、HTMLセクションに指定された何もせずにトリックを行うだけでしょうか？ おかげで、

デビッド

Answer 1

私はあなたがいないコンテンツとの対話を開くする理由はわからないが、あなたはすぐに新しいものを作成してjqueryダイアログを呼び出すことができます：

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

Answer 2

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

Answer 3

基本的なコード

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"); 

を（私はここでjqueryの-UIを使用する必要があります）、あなたはおそらくこれは、拡張メソッドでラップを置くことができます。

更新（私の完全なコードリスト）

(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 4

Juan Ayalasの解決策はモーダルダイアログに有効です。 モーダルでないダイアログでは、関数内のIDを追跡する方が良いでしょう。 次のコードは完全ではありませんが、 というIDが一意であることを保証するために役立ちます。このコードはJuan Ayalasの例とほぼ同じですが、重複したIDを避けるためにカウンタを使用しています。 （さらに、デフォルトでOKボタンを削除しました）。

(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