1

我想用我自己的替换默认的警报/提示/确认并且不想使用插件。我做了样式，但能够弄清楚单击按钮时的操作（确定/取消/等..）。到目前为止，这是我的代码。

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/

先感谢您。我一定会选择你的答案是正确的。

4

2 回答 2

1

您只需进行一些修改即可使其工作：

  1. 传递一个对象作为callback参数（我将其重命名为callbacks），其中的键代表按钮，使用您为选项（等）定义的相同"Yes"格式"No"。你的电话应该是这样的：

    jPromt("test THE title","testing the contents","_confirm", {
    'No' : function(){
        alert("testing NO");
    },
    'Yes' : function(){
        alert("testing YES");
    }
});

  2. 在你btn的循环中创建一个 jQuery 对象obj，这样你就可以附加一个处理程序

  3. 检查callbacks参数是否有当前的处理程序prop；如果是，请附加到btn.

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

于 2013-02-01T23:03:29.660 回答
1

你能做的是...

  1. 为您的按钮提供调用回调的实际点击处理程序
  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/ ...

于 2013-02-01T23:07:24.627 回答