Делаем элемент пользовательского интерфейса Jquery более пригодным для повторного использования

Question

Делаем элемент пользовательского интерфейса Jquery более пригодным для повторного использования

0

Новое для ООП. В настоящее время я использую JQuery UI Dialog для форм регистрации и регистрации. Однако я нарушаю DRY, назначая свойства каждый раз, когда я использую диалог. Я пытаюсь понять, какой лучший подход заключается в повторном использовании этого элемента.

 signUpDialog = $('.js-sign-up-dialog').dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog || ui).hide(); }
  });

  // dialog for login
   loginDialog = $('.js-login-dialog').dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog || ui).hide(); }
  });

  // event hunder for click on sign-up button
  $(document).on('click','.js-join-button', function() {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    signUpDialog.dialog('open');
  });

  // event hunder for click on log-in button
  $(document).on('click','.js-login-button', function() {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    loginDialog.dialog('open');
  });
};

Ben Davidow 29 март 2014, в 21:09

Источник

Теги:

javascript

jquery

oop

1 ответ

Ещё вопросы

Sumner Evans · Accepted Answer · 2014-03-29T17-26-00.000Z

Создайте объект, содержащий все аргументы для функции .dialog и pas объекта.

var dialogParamObj = {
    autoOpen: false,
    height: 300,
    width: 350,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
    }
};

signUpDialog = $('.js-sign-up-dialog').dialog(dialogParamObj);

loginDialog = $('.js-login-dialog').dialog(dialogParamObj);

Примечание: вы должны, вероятно, поставить var перед signUpDialog и loginDialog следующим образом:

var signUpDialog = $('.js-sign-up-dialog').dialog(dialogParamObj);

var loginDialog = $('.js-login-dialog').dialog(dialogParamObj);