Código de cuadro de diálogo de consolidación

Me he estado poniendo al día con jQuery, pero creo que todavía me faltan algunos fundamentos. Tengo un conjunto complejo de ventanas emergentes de diálogo (detalladas a continuación) y no sé cómo consolidarlas en una 'clase'.

HTML:

 <div id="FirstDialogFrame" 
      title="First" 
      data-button="Alert First"
      data-alert="FirstAlert">
 </div>

 <div id="SecondDialogFrame" 
      title="Second" 
      data-button="Alert First"
      data-alert="SecondAlert" >
 </div>

 <button id="PopFirst">First</button>
 <button id="SecondFirst">Second</button>

JavaScript:

$("#FirstDialogFrame").dialog({
    autoOpen: false,
    resizable: true,
    height: 340,
    width: 340,
    modal: true,
    buttons: {
        "Alert": function() {
            alert($(this).attr("data-alert"));
            $(this).dialog("close");
        },
        Close: function() {
            $(this).dialog("close");
        }
    }
});

$("#SecondDialogFrame").dialog({
    autoOpen: false,
    resizable: true,
    height: 340,
    width: 340,
    modal: true,
    buttons: {
        "Alert": function() {
            alert($(this).attr("data-alert"));
            $(this).dialog("close");
        },
        Close: function() {
            $(this).dialog("close");
        }
    }
});

$("#PopFirst").click(function() {
    $("#FirstDialogFrame").dialog("open");
});

$("#SecondFirst").click(function() {
    $("#SecondDialogFrame").dialog("open");
});

Violín:

http://jsfiddle.net/tzerb/BYKqM/

Cualquier comentario apreciado.

TIA.

preguntado el 03 de mayo de 12 a las 17:05

3 Respuestas

HTML

 <div id="FirstDialogFrame" class="popup"
      title="First" 
      data-button="Alert First"
      data-alert="FirstAlert">
 </div>

 <div id="SecondDialogFrame" class="popup"
      title="Second" 
      data-button="Alert First"
      data-alert="SecondAlert" >
 </div>

 <button id="PopFirst">First</button>
 <button id="SecondFirst">Second</button>

Javascript

 $(".popup").dialog({
    autoOpen: false,
    resizable: true,
    height: 340,
    width: 340,
    modal: true,
    buttons: {
        "Alert": function() {
            alert($(this).attr("data-alert"));
            $(this).dialog("close");
        },
        Close: function() {
            $(this).dialog("close");
        }
    }
});

$("#PopFirst").click(function() {
    $("#FirstDialogFrame").dialog("open");
});

$("#SecondFirst").click(function() {
    $("#SecondDialogFrame").dialog("open");
});

contestado el 03 de mayo de 12 a las 17:05

Perfecto, primero. ¡Muchas gracias! - tzerb

¿Por qué no combinar los selectores de diálogo y tener diferentes eventos de apertura ya que ambos tienen los mismos parámetros?

$("#FirstDialogFrame, #SecondDialogFrame").dialog({
    autoOpen: false,
    resizable: true,
    height: 340,
    width: 340,
    modal: true,
    buttons: {
        "Alert": function() {
            alert($(this).attr("data-alert"));
            $(this).dialog("close");
        },
        Close: function() {
            $(this).dialog("close");
        }
    }
});

$("#PopFirst").click(function() {
    $("#FirstDialogFrame").dialog("open");
});

$("#SecondFirst").click(function() {
    $("#SecondDialogFrame").dialog("open");
});

contestado el 03 de mayo de 12 a las 18:05

Puede mover el javascript al evento de clic. Por lo tanto, su página se carga más rápido y el cuadro de diálogo se crea cuando es necesario.

<button class="popup" 
  data-button="Alert First" 
  title="First" 
  data-alert="FirstAlert">Open first dialog</button>

<button class="popup" title="Second" 
  data-button="Alert First"
  data-alert="SecondAlert">Open second dialog</button>

Y su código se vería así:

$("button.popup").click(function(){
  $("<div/>")
     .appendTo(document.body)
     .attr('title', this.title)
     .data('button', $(this).data('button'))
     .data('alert', $(this).data('alert'))
     .dialog({
         resizable: true,
         height: 340,
         width: 340,
         modal: true,
         close: function(event, ui) {
           $(this).remove();
         },
         buttons: {
             "Alert": function() {
                 alert($(this).data('alert'));
                 $(this).dialog("close");
             },
             Close: function() {
                 $(this).dialog("close");
             }
         }
     });

});

Ver el violín: http://jsfiddle.net/e6t76/

contestado el 03 de mayo de 12 a las 18:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.