如何构建一个可以在应用程序的任何地方使用的jQuery确认对话框（是/否）？

Question

如何构建一个可以在应用程序的任何地方使用的jQuery确认对话框（是/否）？

javascriptjqueryjquery-uijquery-ui-dialog

3

我有以下内容：

<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-dialog以进行确认，是或否...如果用户选择是，则继续进行删除操作，就像今天一样被删除。如何构建一个jQuery UI Dialog，它是静态的，并且适用于任意数量的列表项？更好的是，它适用于我的应用程序中的任何内容，因此它不仅仅是针对列表的。有什么好的想法吗？谢谢。

- AnApprentice

4个回答

1

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

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

- rkw

0

你可以使用这个库：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元素。但是如果你不担心这个问题，可以将livequery替换为bind。

- Sergio Campamá

谢谢，但考虑到我们已经在使用jQuery对话框，我不想再添加另一个对话框。我更愿意使用对我们有好处的jQUery对话框。 - AnApprentice

0

你可以将对话框逻辑封装在一个控制器对象中。

然后，当你实例化控制器对象时，你可以将它传递给对话框将要操作的元素以及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"});

- Keith.Abramo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jayendra · Accepted Answer

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