2013-03-13 2 views
0

У меня есть код ниже, чтобы отобразить диалоговое окно предупреждения с помощью кнопки «ОК» и диалога подтверждения с кнопкой «Отмена» и «ОК (отправить)».Комбинировать код диалогового окна jQuery для предупреждения и подтверждения (DRY)?

Как вы можете видеть, существует много повторяющегося кода, и мне было интересно, существует ли способ написать это так, чтобы как можно меньше кода повторялось (написано более одного раза)?

Я быстро изучаю jQuery, но застрял в том, как лучше писать? Любая помощь или примеры были бы действительно оценены? Большое спасибо

Внешние JS:

function alert() { 
    var id = $('#dialog-alert'); 
    id.dialog({ 
     autoOpen: false, 
     dialogClass: 'ui-alert', 
     resizable: false, 
     modal: true, 
     width: 450, 
     buttons: [{ 
      'text': 'OK', 
      'class': 'btn btn-green', 
      'click': function() { $(this).dialog('close'); } 
     }] 
    }).dialog('open'); 
    $('.ui-dialog :button').blur(); 
}; 

function confirm() { 
    var id = $('#dialog-confirm'); 
    id.dialog({ 
     autoOpen: false, 
     dialogClass: 'ui-alert', 
     resizable: false, 
     modal: true, 
     width: 450, 
     buttons: [{ 
      'text': 'Cancel', 
      'class': 'btn btn-red', 
      'click': function() { $(this).dialog('close'); } 
     }, 
     { 
      'text': 'OK', 
      'class': 'btn btn-green', 
      'click': function() { $('#completeform').submit(); } 
     }] 
    }).dialog('open'); 
    $('.ui-dialog :button').blur(); 
}; 
+0

"Есть ли лучший способ" не хороший StackOverflow вопрос. Я предлагаю прочитать faq. –

+0

, что вам нужно, это «рефакторинг». Напишите функцию, которая делает выше, но принимает параметры для бит, которые отличаются. Тогда ваши другие две функции просто становятся вызовами этой функции. – Alnitak

+0

Спасибо @Alnitak! Вы положили меня на правильный путь, чтобы найти ответ. – AndyD

ответ

0

я получил то, что, где я хотел, благодаря некоторой помощи от @Alnitak. Я хотел иметь одну функцию, которую я мог бы вызвать для диалогов и был ли это оповещение или подтверждение, показать одну или две кнопки. Мое решение ниже для тех, кто ищет что-то подобное. Сочетание параметров и условное утверждение.

function dialog(id, btns) { 
    var buttons = [{ 
     'text': 'OK', 
     'class': 'btn btn-green', 
     'click': function() { $(this).dialog('close'); } 
    }] 

    if (btns === confirm) { 
     buttons = [{ 
      'text': 'Cancel', 
      'class': 'btn btn-red', 
      'click': function() { $(this).dialog('close'); } 
     }, { 
      'text': 'OK', 
      'class': 'btn btn-green', 
      'click': function() { $('#completeform').submit(); } 
     }] 
    }; 
    $('#dialog-' + id).dialog({ 
     autoOpen: false, 
     dialogClass: 'ui-alert', 
     resizable: false, 
     modal: true, 
     width: 450, 
     buttons: buttons 
    }).dialog('open'); 
    $('.ui-dialog :button').blur(); 
}; 

В HTML страницы:

$(function() { dialog('alert', alert); }); 
// or 
$(function() { dialog('confirm', confirm); }); 
Смежные вопросы