Javascript jQuery自定义确认_Javascript_Jquery_Confirmation

Javascript jQuery自定义确认

javascript jquery

Javascript jQuery自定义确认,javascript,jquery,confirmation,Javascript,Jquery,Confirmation,我想有一个非常简单的自定义对话框。单击“删除”时，我希望打开一个简单的面板，其中包含确认或取消选项。如果得到确认，将运行更多的程序因为我想在不同的文件中使用此确认，所以我的方法是：在我所有页面上运行的index.js中： var confirmation = -1 $(document).ready(function(){ $('html').on({ click: function() { confirmation = 1;

我想有一个非常简单的自定义对话框。单击“删除”时，我希望打开一个简单的面板，其中包含确认或取消选项。如果得到确认，将运行更多的程序

因为我想在不同的文件中使用此确认，所以我的方法是：

在我所有页面上运行的index.js中：

var confirmation = -1
$(document).ready(function(){
    $('html').on({
        click: function() {
            confirmation = 1;
        }
    },'#confirmation_yes');

    $('html').on({
        click: function() {
            confirmation = 0;
        }
    },'#confirmation_no');
});

function confirmAction(callback)
{
    if( confirmation == 1 ) {
        $('#popup_panel').slideUp('slow', function(){
            $('#popup_fader').fadeOut('fast');
        });
        confirmation = -1;
            callback(true);
    }
    if( confirmation == 0 ) {
        $('#popup_panel').slideUp('slow', function(){
            $('#popup_fader').fadeOut('fast');
        });
        confirmation = -1;
        callback(true);     
    }
    setTimeout(confirmAction, 50)
}

所以我的想法是，在其他JS文件中

$('#element').click(function(){
    confirmAction(function(result){
        // do my stuff
    });
})

所以当我这样做时，系统返回错误并说“回调”不是函数。这个代码有什么问题

谢谢

我做了另一种方法。它基于jQueryMobile，但经过一些小的修改后，也可以与普通jQuery一起使用。基本方法很简单：调用一个打开弹出窗口的函数，并添加两个按钮，通过调用opener函数对提供的函数作出反应。以下是我的例子：

function jqConfirm(data) {
    var container = $('#genericConfirm');
    container.find('h1').html(data.title); // title of the confirm dialog
    container.find('p').html(data.message); // message to show
    // .off('click') removes all click-events. click() attaches new events
    container.find('.yes').off("click").click(data.yes); // data.yes/no are functions that you provide
    container.find('.no').off("click").click(data.no);
    container.popup({ positionTo: "window" }).popup("open"); // .popup("open") opens the popup
}
var confirmData = {
    title: "Send this message?",
    message: "Are you sure you want to send this message?",
    yes: function() {
        sendMessage();
        $('#genericConfirm').popup("close");
    },
    no: function() {
        $('#genericConfirm').popup("close");
    }
};
jqConfirm(confirmData); // you open the popup with this function (indirectly)

HTML部分（特定于jQueryMobile，必须稍加修改以匹配普通jQuery）


标题
消息

将另一个处理程序附加到处理逻辑的按钮上。完成对话框后，只需删除对话框即可摆脱处理程序。如果以后创建其他对话框，可能使用相同或其他布局，则可以为该对话框定义不同的处理程序。当事件“冒泡”时，按钮本身上的处理程序（只有在单击按钮时才会触发）上的处理程序都将被触发

以下仅仅是伪代码，但它应该让您了解如何使用它：

//This will create the html for your dialog
createMyFancyDialog();
showDialog();

//This is where you'll do the logic for this dialog
$('#confirmation_yes').on( 'click', function() {
    doWhatEveryIWantToDo();

    //After this dialog is done, destroy the dialog.
    //This will get rid of the handlers we don't need in a future dialog.
    //The handler attached to html will persist.
    destroyDialog();
} );
$('#confirmation_no').on( 'click', function() {
    doSomethingMean();

    //After this dialog is done, destroy the dialog.
    //This will get rid of the handlers we don't need in a future dialog.
    //The handler attached to html will persist.
    destroyDialog();
} );

我试图重写并修复您的代码，但有太多的事情需要调整

因此，我强烈建议您以更简单的方式重写代码，如下所示：

<button id="element">Element</button>
<div id="popup_panel" style="display: none;">
  <p>Your msg?</p>
  <button id="confirmation_yes" >Yes</button>
  <button id="confirmation_no">No</button>
</div>

<script>
$(document).ready(function () {
  $('#confirmation_yes').click(actionConfirmed);
  $('#confirmation_no').click(actionNotConfirmed);
  $('#element').click(showPopupPanel);
});

function actionConfirmed() {
  $('#popup_panel').slideUp();

  // User confirmed. Now continue.
  // e.g. alert('Yes was clicked');
}

function actionNotConfirmed() {
  $('#popup_panel').slideUp();

  // User said no.
}

function showPopupPanel() {
  $('#popup_panel').slideDown();
}
</script>

元素
你的味精
对
不
$（文档）.ready（函数（）{
$（“#确认_是”）。单击（操作确认）；
$（“#确认号”）。单击（操作未确认）；
$（“#元素”）。单击（showPopupPanel）；
});
函数actionconfirm（）{
$（'弹出'面板'）.slideUp（）；
//用户确认。现在继续。
//例如，警报（“单击了是”）；
}
函数actionnotconfirm（）{
$（'弹出'面板'）.slideUp（）；
//用户说没有。
}
函数showPopupPanel（）{
$（'弹出'面板'）.slideDown（）；
}

您可以在此处看到此代码的作用：保持简单：

<!doctype html>
<html lang="en">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <input id='yes' type="button" value="Yes" data-result="Yes" />
    <input id='no' type="button" value="No" data-result="No" />

    <script type="text/javascript">
    var result;
    function confirmAction() {
        if (result)    alert(result);
        else           setTimeout(confirmAction, 100);
    }

    $(function() {
        $('#yes, #no').on('click', function(e) {
            result = $(this).attr('data-result');
        });

        confirmAction()
    });
    </script>
</body>
</html>


var结果；
函数确认（）{
如果（结果）警报（结果）；
else设置超时（确认，100）；
}
$（函数（）{
$（'yes，'no'）。在（'click'，函数（e）上{
结果=$（this.attr（'data-result'）；
});
确认（）
});

有纯简单的

confirm（'you sure'）

功能是的，但我不想使用它。这是一个简化的例子，但我需要打开自己的对话框。问题是我希望这个对话框是多用途的。因此，在一页中，确认结果与另一页完全不同。这就是为什么我希望它像confirmation（function（result）{//在这一页中做我想做的事情}）；然后在不同的页面上为处理程序定义不同的内容。使用命名函数（例如

showDialog（）

）在共享javascript文件（例如用于显示和隐藏对话框的动画）上放置的所有常用内容。对于所有不同的内容，您可以将单击处理程序放在不同的文件中。

<!doctype html>
<html lang="en">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <input id='yes' type="button" value="Yes" data-result="Yes" />
    <input id='no' type="button" value="No" data-result="No" />

    <script type="text/javascript">
    var result;
    function confirmAction() {
        if (result)    alert(result);
        else           setTimeout(confirmAction, 100);
    }

    $(function() {
        $('#yes, #no').on('click', function(e) {
            result = $(this).attr('data-result');
        });

        confirmAction()
    });
    </script>
</body>
</html>