如何从函数返回初始化的对话框对象？

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