Question

我想用我自己的替换默认的alert / prompt / confirm和不想使用插件。我做了样式但是能够在点击按钮时找出动作（确定/取消/等等）。到目前为止我的代码。

function jPromt(title,content,type,callback){
    var alert = $('.resources').find('.alert').clone(); //basic barebone
        alert.find('h3').html(title);
        alert.find('.content').prepend(content);

    var options = {
        "_prompt" : {"OK" :""},
        "_confirm": {"No" :"recomended", "Yes":""},
        "_input"  : {"Cancel":"recomended", "OK" :""}
    }

    for (var prop in obj) { // Create buttons
        if (obj.hasOwnProperty(prop)) { 
            var btn = "<button class='button_"+prop+" "+obj[prop]+"'>"+prop+"</button>";
            alert.find('.buttons').append(btn);

        }
    }

    $('.resource_loader').append(alert)
    $('body').append(alert).center().fadeIn('fast');

    // This is here I'm not realy sure what to do whit callbaks for each button.

    //if (callback && typeof(callback) === "function") {  
    //  callback();  
    //} 
}

我想要它以便你可以调用jPromt（）并且每个按钮的回调将像这样执行：或类似于它：

     ....

'ok', function(){
    //do stuff if ok was clicked
},
'cancel', function(){
    // canel was clicked, do stuff
}

JSFiddle：http://jsfiddle.net/CezarisLT/u6AYe/5/

提前谢谢你。我一定会选择你的答案是正确的。

Answer 1

只需进行一些修改即可完成这项工作：

将对象作为callback参数传递（我将其重命名为callbacks），其中键代表按钮，使用您为选项定义的相同格式（{{ 1}}，"Yes"等）。你的电话应该是这样的：
```
"No"
```
在jPromt("test THE title","testing the contents","_confirm", { 'No' : function(){ alert("testing NO"); }, 'Yes' : function(){ alert("testing YES"); } });的循环中设置btn jQuery对象，以便附加处理程序
检查obj参数是否具有当前callbacks的处理程序;如果是，请附加到prop。

演示：http://jsfiddle.net/u6AYe/7/

Answer 2

你能做的是......

为您的按钮提供实际点击处理程序，以调用回调
在您的回调中，您检查实际点击了哪个按钮

像...一样的东西。

function jPromt(title,content,type,callback){
    var myAlert = $('.resources').find('.alert').clone(); //basic barebone
        myAlert.find('h3').html(title);
        myAlert.find('.content').prepend(content);

    var options = {
        "_prompt" : {"OK" :""},
        "_confirm": {"No" :"recomended", "Yes":""},
        "_input"  : {"Cancel":"recomended", "OK" :""}
    };

    if( options.hasOwnProperty(type) ){
        obj = options[type];
    }

    for (var prop in obj) { // Create buttons
        var $btn = $("<button class='button_"+prop+" "+obj[prop]+"'>"+prop+"</button>");
        $btn.attr('btn-type',prop.toUpperCase());
        myAlert.find('.buttons').append($btn);
        $btn.click(callback);
    }

    $('body').append(myAlert.show());
}

jPromt("test THE title","testing the contents","_confirm",
    function(){
        answer = $(this).attr('btn-type');
        if(answer == 'YES'){
            alert("Yes!");
        }else{
            alert("No!");
        }
    }
);

见http://jsfiddle.net/u6AYe/8/ ...

更换警报/提示/确认对话框

2 个答案: