ダイアログボックスの統合コード

Question

私はjQueryのスピードを上げようとしていますが、私はまだいくつかの基本を見逃していると思います。私は複雑なダイアログポップアップ（下に蒸留されています）を持っています。そしてそれらを1つの「クラス」に統合する方法が分かりません。

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を移動することがあります。 ページが読み込まれ、必要なときにダイアログが作成されます。

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

}); 

はフィドルを参照してください：ダイアログのセレクタを組み合わせて、両者が同じのparamsを持っているので、別のオープニングイベントがありません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"); 
});