合併對話框代碼

我已經來加快速度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。

來源

2012-05-03 tzerb

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-03 16:59:15 Nadh

完美，第一。非常感謝！ – tzerb

您可能會移動到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-03 17:00:36 jantimon

爲什麼不結合對話框選擇，有不同的開放活動，因爲它們都具有相同的PARAMS？

$("#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-03 17:10:42

合併對話框代碼

回答

相關問題