アプリ内のどこでも使える確認用のjQueryダイアログを作成するにはどうすればいいですか？

Question

I次き：

<ol id="listItems> 
    <li id="listItem-1"> 
     <span class="title">Item 1</span> 
     <span class="delete">delete</span> 
    </li> 
    <li id="listItem-2"> 
     <span class="title">Item 2</span> 
     <span class="delete">delete</span> 
    </li> 
    <li id="listItem-3"> 
     <span class="title">Item 3</span> 
     <span class="delete">delete</span> 
    </li> 
    <li id="listItem-4"> 
     <span class="title">Item 4</span> 
     <span class="delete">delete</span> 
    </li> 
</ol> 

私はここでやりたいことは.deleteをクリックすると、いつでもある、私は確認のためのjQuery UI-ダイアログを表示する、[はい]または[いいえ....ユーザーが言っている場合は、はい、今日削除された場所をクリックして削除を続行します。

jQuery UIダイアログを静的に作成して、任意の数のリスト項目に対して機能させるにはどうすればよいですか？私のアプリでは何もしなくても良いので、リストに限定されているだけではありません。

アイデア？おかげ

Answer 1

jQueryのUIのダイアログを使用して実施例 -

デモ - ライブでhttp://jsfiddle.net/CdwB9/3/

function yesnodialog(button1, button2, element){ 
    var btns = {}; 
    btns[button1] = function(){ 
     element.parents('li').hide(); 
     $(this).dialog("close"); 
    }; 
    btns[button2] = function(){ 
     // Do nothing 
     $(this).dialog("close"); 
    }; 
    $("<div></div>").dialog({ 
    autoOpen: true, 
    title: 'Condition', 
    modal:true, 
    buttons:btns 
    }); 
} 
$('.delete').click(function(){ 
    yesnodialog('Yes', 'No', $(this)); 
}) 

-

デモ - http://jsfiddle.net/CdwB9/4/

$('.delete').live('click', function(){ 
    yesnodialog('Yes', 'No', $(this)); 
}) 

Answer 2

あなたはこのライブラリを使用できます。http://labs.abeautifulsite.net/projects/js/jquery/alerts/demo/

は、次に、あなたのような何かを行うことができた：

$(function(){ 
    $(".delete").livequery('click', function(){ 
     jConfirm('Message', 'Title', function(confirmed){ 
      if(confirmed){ 
       alert('Delete confirmed'); 
      } 
     }); 
    }); 
}); 

それは、ページが読み込まれた後に追加DOM要素で動作するので、私はlivequeryプラグインを使用するようにしたいです。しかし、あなたがそれを心配していない場合はlivequeryをbindに変更してください。

Answer 3

あなたがコントローラであなたのダイアログロジックをラップすることができますオブジェクト。

コントローラオブジェクトをインスタンス化するときに、ダイアログが動作する要素にコントローラオブジェクトを渡すことができ、ajaxサブミッションデータも渡すことができます。

ユーザーがダイアログで[はい]をクリックすると、コントローラにそのデータが含まれ、送信するだけで済みます。このような

何か：あなたは、その後のような何かを行うことができます

MyApp = {} 
MyApp.MyDialog = function(context, ajaxData) { 
    this.context = context; 
    this.ajaxData = ajaxData; 
    this.initializeDialog(); 
} 

MyApp.MyDialog.prototype.initializeDialog = function(){ 
    $(this.context).dialog({ 
     //Your other dialog options here, 
     buttons: { 
      "yes": function(){ 
        //Do ajax post with this.ajaxData 
       }, 
       "No": function(){ 
        this.context.dialog("close"); 
       } 
      } 
    }); 
} 

：

var dialog = new MyApp.MyDialog("#myElement", {foo: "bar"}); 

Answer 4

を私は似たようなやりました。非常に高いレベルでは、クリックの伝搬を停止し、ダイアログを表示してから、レスポンスに基づいて再度クリックをトリガーする必要があります。

var confirmed = false; 

$('span.delete').click(function(e) { 
    if (!confirmed) { 
     var that = $(this); 

     $("#dialog-confirm").dialog({ 
      buttons: { 
       "Delete": function() { 
        confirmed = true; 
        that.trigger('click'); 
        $(this).dialog("close"); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

     e.stopPropagation(); 
    } else { 
     confirmed = false; 
    } 
});