动态警报框与基础

我应该如何动态地向具有基础的页面添加新警报框？ 看起来我必须为框插入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 = '
 Sorry, the request failed. ×
'; $("#errorArea").append(alertBox).foundation(); }); 

Answer 2

我发现了一个稍微好一点的方法，类似于@Ben Polinsky所做的。 唯一的区别是它只重新初始化“警报”模块而不是一切。

 // Create the HTML var $message = $('
×
'); // 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 = $('
×
'); alertMarkup.addClass(type); alertMarkup.children("span").text(message); $("#foundation-alerts").prepend(alertMarkup).foundation( "alert", undefined ); }