1

我一直在加快 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。

4

3 回答 3

2

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");
});
于 2012-05-03T16:59:15.803 回答
1

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

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

于 2012-05-03T17:00:36.850 回答
1

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

$("#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");
});
于 2012-05-03T17:10:42.083 回答