Flash 消息在 octobercms 中不起作用

Question

我正在尝试使用以下标记显示一条简单的即显消息，如 here 所示：

<p data-control="flash-message" data-interval="5" class="success">
    This message is created from a static element. It will go away in 5 seconds.
</p>

我希望在加载页面后出现一条闪现消息，但我只看到显示该消息的静态文本。所以似乎有些 javascript 或 css 没有正确加载。我检查了 firebug 并确认 jquery.js、bootstrap.js、app.js、framework.js 和 framework.extras.js 文件已加载。我还需要做什么才能显示闪现消息吗？

Answer 1

These docs refer to the backend UI (which is not made totally obvious on that page, I admit, and others have been 由此）。您似乎正试图在前端页面中使用它。

虽然 framework.js 和 framework-extras.js 似乎在后端和前端中同样使用（如果 {% framework %} 或 {%framework extras %} 指令适当地放置在模板中，因为前端），在两个世界中暴露相同的AJAX API，后端UI有很多CSS和JS你没有前端正常访问，大容量包含在十月安装根目录下的modules/system/assets/ui/storm-min.js和modules/system/assets/ui/storm.css文件中。

我认为相关 CSS 的重要一点是（来自 modules/system/assets/ui/storm.css）：

#layout-canvas .flash-message{display:none}
.flash-message{position:fixed;width:500px;left:50%;top:13px;margin-left:-250px;color:#ffffff;font-size:14px;padding:10px 30px 10px 15px;z-index:10300;word-wrap:break-word;text-shadow:0 -1px 0px rgba(0,0,0,0.15);text-align:center;-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);box-shadow:0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.flash-message.fade{opacity:0;filter:alpha(opacity=0);-webkit-transition:all 0.5s,width 0s;transition:all 0.5s,width 0s;-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}
.flash-message.fade.in{opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
.flash-message.success{background:#8da85e}
.flash-message.error{background:#cc3300}
.flash-message.warning{background:#f0ad4e}
.flash-message.info{background:#5fb6f5}
.flash-message button{float:none;position:absolute;right:10px;top:8px;color:white;outline:none}
.flash-message button:hover{color:white}
.flash-message.static{position:static !important;width:auto !important;display:block !important;margin-left:0 !important;-webkit-box-shadow:none;box-shadow:none}

页面加载时执行的 flash 消息逻辑必须在 modules/system/assets/ui/storm-min.js 中的某处，幸运的是，它也作为非缩小版本存在 modules/system/assets/ui/storm.js 在哪里可以找到行

=require js/flashmessage.js

然后在参考的 modules/system/assets/ui/js/flashmessage.js 中进一步查看，您会在末尾找到这些行：

// FLASH MESSAGE DATA-API
// ===============

$(document).render(function(){
    $('[data-control=flash-message]').each(function(){
        $.oc.flashMsg($(this).data(), this)
    })
})

瞧！

所以你可以在你的前端页面中包含整个 storm.css 和 storm.js（我试过了，它有效 - 尽管消息在 "flashed" 之前首先在加载时可见并适当地设计样式，因此您需要进行一些调整），或者从那里您可能能够计算出您可能需要提取和调整代码的哪些部分以使其在前端可用。但我认为自己为前端使用编写一些东西而不是包含旨在集成到后端的大块代码会更明智 UI.

（似乎整个 $.oc.[...] JQuery 东西都适用于后端使用，但对此并不完全确定。）

Flash 消息在 octobercms 中不起作用

Flash message not working in octobercms

flash-message

octobercms