替換警報/提示/確認對話框

我想用我自己的替換默認警報/提示/確認和不想使用插件。我做了樣式，但能夠找出單擊按鈕時的動作（確定/取消/等等）。這裏我的代碼到目前爲止。替換警報/提示/確認對話框

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/

謝謝提前。我一定會選擇你的答案是正確的。

來源

2013-02-01 Kivylius

在無關緊要的等待，它被用於按鈕$（..）創建的左撇子。單擊（...，並在那裏被這裏的一切都處理。這也是示例代碼。 – Kivylius

@Teemu你爲什麼認爲OP希望它是同步的？目前的代碼似乎預計它是異步的。 – bfavaretto

謝謝@bfavaretto我正要說。 – Kivylius

可以使這項工作，只有少數修改：

傳遞一個對象作爲參數callback（我想它重命名爲callbacks），其中鍵代表的按鈕，使用相同的格式你爲選項定義（"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處理程序;如果是，請附上btn。

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

來源

2013-02-01 23:03:29 bfavaretto

你是一個巫師還是什麼？非常感謝你。 – Kivylius

這裏沒有魔法！你的代碼幾乎在那裏。 – bfavaretto

你可以做的是...

給你的按鈕實際點擊處理程序調用回調
在回調您檢查哪個按鈕被實際點擊

類似...

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-01 23:07:24 tobibeer

替換警報/提示/確認對話框

回答

相關問題