Question

我应该如何动态地向具有基础的页面添加新警报框？看起来我必须为该框插入html标记，然后重新初始化整个页面的基础...这可能是对的，可以吗？

是否有一些动态添加警报框的简单方法？

我希望api如：$("#myElement").foundation('alert', "foo 123");

示例：

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

Answer 1

没有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();
});

Answer 2

我找到了一种更好的方法，类似于@Ben Polinsky所做的。唯一的区别是它只重新初始化“警报”模块而不是一切。

// 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
);

Answer 3

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
    );
}

动态警报框与基础

3 个答案: