動態警示框與基金會

我應該如何去動態添加一個新的警示框到基礎頁面？它看起來像我將不得不插入框的HTML標記，然後重新初始化整個頁面的基礎......這是不對的，可以嗎？動態警示框與基金會

是否有一些簡單的方法來動態添加警告框？

我希望一個API，例如：$("#myElement").foundation('alert', "foo 123");

例子：

$.post("/some/url", {some:'data'}) 
    .fail(function(){ 
     $("#myElement").foundation('alert', 'Process failed!'); 
    });

來源

2014-02-10 Joe Flateau

哪個事件會觸發您的警報框出現？你能舉一個更現實的例子/場景嗎？ –

我已經編輯了這個問題，以包含我期望它如何工作的具體示例 –

沒有API，但你可以做這樣的事情：

$.post("/some/url", {some:'data'}) 
.fail(function(){ 
    var alertBox = '<div data-alert class="alert-box"> Sorry, the request failed. <a href="#" class="close">&times;</a></div>'; 
    $("#errorArea").append(alertBox).foundation(); 
});

來源

2014-03-06 04:20:11 phillyslick

我找到了一個稍微好一點的辦法這樣做，類似於@Ben Polinsky所做的。唯一的區別是它只重新初始化「alert」模塊而不是所有的東西。

// Create the HTML 
var $message = $('<div data-alert class="alert-box"><span></span><a href="#" class="close">&times;</a></div>'); 
// Fill it 
$message.addClass(severity).children("span").text(message); 
// Add the div and re-initialize foundation-alert for its parent 
$("#errorArea").prepend($message).foundation(
    "alert", // libraries -- if it's undefined or "reflow" it will loop on all libs 
    undefined, // method -- if it's undefined it will call init 
    {speed: "slow", animation: "slideUp", callback: function() {}} // options -- optional, to customize the alert box 
);

來源

2014-07-23 09:23:09 jadkik94

jadkik94給出了一個很好的例子。基於它，我有一個更完整/可以理解的解決方案：

var message = "You are doomed"; 
var type = "alert" 

showMessage(message, type); 

function showMessage(message, type) { 
    var alertMarkup = $('<div data-alert class="alert-box"><span></span><a href="#" class="close">&times;</a></div>'); 
    alertMarkup.addClass(type); 
    alertMarkup.children("span").text(message); 
    $("#foundation-alerts").prepend(alertMarkup).foundation(
     "alert", 
     undefined 
    ); 
}

來源

2015-06-12 13:18:49 Karl

動態警示框與基金會

回答

相關問題