如何從函數返回初始化的對話框對象？

Question

我目前正在努力學習OO Javascript，所以我可以寫一些更乾淨的代碼。在我下面的代碼中，我使用JQuery UI對話框對象和我自己的類，以便我可以輕鬆地初始化大量的對話框。

問題是函數沒有返回對話框對象，所以我無法訪問它的方法和屬性。

/* 
* Load AddTaskForm dialog 
*/ 
$('#AddTask').click(function() 
{ 
    /* Ajax request to load form into it */ 
    $.ajax({ 
     type: 'Get', 
     url: '/Planner/Planner/LoadAddTaskForm', 
     dataType: 'html', 
     success: function (AddTaskForm) 
     { 
      var d = new AddDialog(); 
      var result = d.Dialog(); 

       /* AddTaskDialog.html(AddTaskForm); 
      AddTaskDialog.dialog('open');*/ 
     } 
    }); 
}); 



function AddDialog() 
{ 
    this.Dialog = function() 
    { 
     $('<div></div>').dialog(
     { 
      width: 580, 
      height: 410, 
      resizable: false, 
      modal: true, 
      autoOpen: false, 
      title: 'Basic Dialog', 
      buttons: 
       { 
        Cancel: function() 
        { 
         $(this).dialog('close'); 
        }, 
        'Create Task': function() 
        { 

        } 
       }, 
       close: function() 
       { 
        $(this).dialog('destroy').remove(); 
       } 
     }); 
    } 
} 

**更新的代碼

/* 
* Load AddTaskForm dialog 
*/ 
$('#AddTask').click(function() 
{ 
    /* Ajax request to load form into it */ 
    $.ajax({ 
     type: 'Get', 
     url: '/Planner/Planner/LoadAddTaskForm', 
     dataType: 'html', 
     success: function (AddTaskForm) 
     { 
      var AddTaskDialog = $('<div></div>'); 
      AddTaskDialog.dialog(AddTaskDialogOptions); 
      AddTaskDialog.html(AddTaskForm); 
      AddTaskDialog.dialog('open'); 
     } 
    }); 
}); 


/* 
* Add task dialog default options 
*/ 
var AddTaskDialogOptions = { 
    width: 580, 
    height: 410, 
    resizable: false, 
    modal: true, 
    autoOpen: false, 
    title: 'Basic Dialog', 
    buttons: 
     { 
      Cancel: function() 
      { 
       $(this).dialog('close'); 
      }, 
      'Create Task': function() 
      { 

      } 
     }, 
    close: function() 
    { 
     $(this).dialog('destroy').remove(); 
    } 
} 

這工作

/* 
* Load AddTaskForm dialog 
*/ 
$('#AddTask').click(function() 
{ 
    var addTaskDialog = $('<div></div>'); 
    addTaskDialog.dialog(AddTaskDialogOptions); 
    addTaskDialog.html('wowowo'); 
    addTaskDialog.dialog('open'); 
}); 

，因爲你不 「回」 的任何提示這不起作用

/* Ajax request to load form into it */ 
    $.ajax({ 
     type: 'Get', 
     url: '/Planner/Planner/LoadAddTaskForm', 
     dataType: 'html', 
     success: function (AddTaskForm) 
     { 
      var addTaskDialog = $('<div></div>'); 
      addTaskDialog.dialog(AddTaskDialogOptions); 
      addTaskDialog.html(AddTaskForm); 
      addTaskDialog.dialog('open'); 
     } 
    }); 

Answer 1

That's，但功能...

順便說一下，這種編碼是一切，但不乾淨！ 該對話框已經是一個類，它已經是一個對象。和jQuery一樣。你不需要把它包裝到一個函數中，然後再包裝到另一個類中。

jQuery ui dialog是一個jQuery UI部件。這意味着，您可以使用$("something").dialog("widget")輕鬆訪問此對話框，並獲得對話框的實例。

如果你想匿名但可訪問你應該這樣做。

var myDialogMarkup = $("<div></div>").dialog(); 

，當你想回去，你做myDialogMarkup.dialog("widget")或myDialog.dialog("methodtodo")

，如果你想要做的總是相同的對話，只是這樣做

var myDialogDefaultVars = { 
      width: 580, 
      height: 410, 
      resizable: false, 
      modal: true, 
      autoOpen: false, 
      title: 'Basic Dialog', 
      buttons: 
       { 
        Cancel: function() 
        { 
         $(this).dialog('close'); 
        }, 
        'Create Task': function() 
        { 

        } 
       }, 
       close: function() 
       { 
        $(this).dialog('destroy').remove(); 
       } 
     } 

然後

$("<div></div>").dialog(myDialogDefaultVars); 

更新

如果你堅持做自己的風格

function AddDialog() 
{ 
    this.Dialog = function() 
    { 
     return $('<div></div>').dialog(
     { ... }); 
    } 
} 

僅僅是 「回報」 吧:)

，或者如果你想只返回組件

function AddDialog() 
{ 
    this.Dialog = function() 
    { 
     return $('<div></div>').dialog(
     { ... }).dialog("widget"); 
    } 
} 

對話框（ 「小部件」）會給你小部件組件。 那麼你可以做

var d = new AddDialog(); 
d.Dialog().close(); 

Answer 2

當我們使用jQuery我們遵循一些基本的規則。

var AddTaskDialog = $('<div></div>'); 
      AddTaskDialog.dialog(AddTaskDialogOptions); 
      AddTaskDialog.html(AddTaskForm); 
      AddTaskDialog.dialog('open'); 

你不這樣工作。相反，你這樣做。

var $dialog = $("<div></div>") 
      .append(AddTaskForm) 
      .dialog(AddTaskDialogOptions) 
      .dialog("open");