閃存消息octobercms不工作

我試圖顯示爲證明here與下面的標記一個簡單的Flash消息：閃存消息octobercms不工作

<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尚未正確加載。我檢查了螢火蟲，並確認jquery.js,bootstrap.js,app.js,framework.js和framework.extras.js文件已被加載。我還需要做些什麼才能使閃光信息出現？

來源

2016-11-14 Meysam

These docs指後端 UI（未取得完全顯而易見的頁面，我承認上，和其他人已經被這個similarly confused）。看來你正試圖在前端頁面中使用它。

雖然framework.js和framework-extras.js似乎在後端和前端（如果{% framework %}或{%framework extras %}指令被適當地放置在模板中，爲前端）同等地使用，露出相同AJAX API在兩個世界，有一個很多後端用戶界面的CSS和JS通常不會在前端訪問，批量包含在10月安裝根目錄下的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}

是在頁面加載執行的閃光燈消息的邏輯必須是某處在modules/system/assets/ui/storm-min.js，其中，幸運的是也存在作爲非縮小的版本modules/system/assets/ui/storm.js在這裏你可以找到行

=require 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（我試過了，它的工作原理 - 儘管消息在被「閃過」和正確設置之前首先在加載時可見，所以你需要使一些調整），或者從那裏你可能能夠計算出你可能需要提取和調整哪些代碼部分，以使其在前端可用。但是我認爲，爲你的前端使用而不是包含大量旨在集成在後端UI中的代碼，這是你自己寫的東西。

（看起來整個$.oc.[...] JQuery的東西的範圍爲後端使用，但不完全確定這一點。）

來源

2016-11-15 00:43:18 trollkotze

閃存消息octobercms不工作

回答

相關問題