1

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

フィードバックをいただければ幸いです。

ティア。

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

ダイアログセレクターを組み合わせて、両方とも同じパラメーターを持っているため、異なるオープニングイベントを持たないのはなぜですか?

$("#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 に答える
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 に答える