Question

我一直在加快jQuery的速度，但我想我仍然缺少一些基础知识。我有一组复杂的对话弹出窗口（如下所示），我迷失了如何将它们合并为一个'类'。

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

小提琴：

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

任何反馈意见。

TIA。

Answer 1

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

Answer 2

您可以将javascript移动到click事件中。因此，您的页面加载速度更快，并在需要时构建对话框。

<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>

你的代码看起来像这样：

$("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");
             }
         }
     });

});

请参阅小提琴：http://jsfiddle.net/e6t76/

Answer 3

为什么不组合对话选择器并具有不同的开场事件，因为它们都具有相同的参数？

$("#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");
});

合并对话框代码

3 个答案: