如何构建一个确认(是/否)的jQuery对话框，它可以在应用程序的任何地方工作？

Question

我有以下几点：

<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

我也做过类似的事情。在非常高的级别上，您必须停止点击的传播，显示对话框，然后根据响应再次触发点击。

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

Answer 3

您可以使用这个库：http://labs.abeautifulsite.net/projects/js/jquery/alerts/demo/

然后你可以这样做：

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

我喜欢使用livequery插件，因为它可以处理页面加载后添加的DOM元素。但是，如果您不担心这一点，可以用bind更改livequery。