フラッシュメッセージ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が正しく読み込まれていないようです。私は火かき棒で点検し、jquery.js、bootstrap.js、app.js、framework.jsおよびframework.extras.jsファイルが読み込まれたことを認めます。フラッシュメッセージが表示されるために必要なことはありますか？

Answer 1

These docsはバックエンド UI（そのページ上で完全に明らかに作らされていない、私は認める、と他の人がこのことによりsimilarly confusedされている）を参照してください。 これをフロントエンドページで使用しようとしているようです。

（{% framework %}又は{%framework extras %}指令を適切なフロントエンドのために、テンプレート内に配置されている場合）framework.jsとframework-extras.jsが等しく、バックエンドとフロントエンドで使用されるように見えるが、両方の世界で同じAJAX APIを露出させる、ありますフロントエンドで通常アクセスしないバックエンドUI用のCSSとJSがたくさんあります。その大部分は、10月のインストールルートの下にあるmodules/system/assets/ui/storm-min.jsとmodules/system/assets/ui/storm.cssファイルに含まれています。

私はここでは関係CSSの重要なビットは、この（modules/system/assets/ui/storm.cssから）だと思う：ページのロード上で実行されるフラッシュメッセージロジックは、運良くもどこかmodules/system/assets/ui/storm-min.jsで、でなければなりません

#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} 

非縮小さとあなたが

=require js/flashmessage.js 

とそこから参照さでさらに見てラインを見つけることができますバージョンmodules/system/assets/ui/storm.jsが存在します最後に次の行があります。

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

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

Voila！

フロントエンドのページにstorm.cssとstorm.jsの部分だけを含めることができます（試してみましたが、メッセージは最初に読み込まれて「フラッシュされ」適切にスタイルされていますが、いくつかの調整）、そこから、フロントエンドで実行可能にするために、コードのどの部分を抽出して調整する必要があるかもしれないかを検討することができます。しかし、バックエンドのUIに統合されるように設計された大規模なコードを組み込むのではなく、フロントエンドの使い方のためにこれを自分で作成することが賢明だと思います。

（$.oc.[...]JQueryのものはバックエンド用にスコープされているようですが、これについては完全にはわかりません）