Как написать функцию?

Question

Я хотел бы добавить 2 аргумента в функцию диалогового окна. Первый аргумент должен быть для заголовка поля, а второй - для содержимого коробки. Я бы хотел вызвать эту функцию и установить заголовок и содержимое коробки на лету.

Вот что я хотел бы функцию, чтобы охватить:

var $dialog = $('<div></div>') 
.html('This dialog will show every time!') 
.dialog({ 
    height : 140, 
    modal : true, 
    autoOpen : false, 
    title : 'Basic Dialog' 
}); 

Это в настоящее время открывает диалоговое окно.

$dialog.dialog('open'); 

Answer 1

Вот ваша функция:

function createDialog(title, content) 
{ 
    return $('<div></div>') 
     .html(content || 'Defualt content.') 
     .dialog({ 
      height : 140, 
      modal : true, 
      autoOpen : false, 
      title : title || 'Defualt title' 
     }); 
} 

---

Вы можете вызвать функцию следующим образом:

$dialog = createDialog('Basic Dialog', 'This dialog will show every time!'); 

, а затем открыть его с $dialog.dialog('open'), как у вас есть, или вы можете открыть его сразу:

createDialog('Basic Dialog', 'This dialog will show every time!').dialog('open'); 

Как указано в @LordZardeck, вышеупомянутое решение приведет к слишком большому количеству нечетких узлов DOM. Вам лучше использовать один и тот же диалог (можно ли предположить, что вам понадобится только один диалог сразу? Надеюсь, что так!).

Если вы хотите сохранить ваш DOM немного разумнее, попробуйте следующее:

var createDialog = (function($) 
{ 
    var $dialog = $('<div></div>').dialog({ 
      height : 140, 
      modal : true, 
      autoOpen : false 
     }), 
     $content = $dialog.find('.dialog-content'); 

    return function (title, content) 
    { 
     $content.html(content || 'Default content.'); 

     return $dialog.dialog('option', { 
        title : title || 'Defualt title' 
       }); 
    } 
}) 
(jQuery); 

Использование такой же, как с выше.

Answer 2

У меня есть пользовательское предупреждение, которое я использую, что, я думаю, отлично работает. одна причина, это делает, является то, что она удаляет диалоговое окно из тела, когда закрыты, убедившись, что вы не пополните свой РОМ с кучей диалогов, которые не привыкают снова:

function showMessage(m, t) 
{ 
    t = (t)? t : 'Application Message'; 
    return $('<div>').css({'text-align': 'left', 'padding-top': '10px'}).html(m).dialog({ 
      modal: true, 
      width: '400px', 
      height: 140, 
      title: t, 
      autoOpen: false, 
      close: function(){$(this).dialog('destroy');}, 
      buttons: { Ok: function() { $(this).dialog("close"); } } 
    }); 
};