a-blog cms 組み込みJSの動作後にJavaScriptのを実行する

以前のブログはこちら

広告

こんにちは。ましじめの田村です。

私が執筆した著書、『現場のプロから学ぶ CSSコーディングバイブル』は、Web制作の現場で役立つテクニックやノウハウをまとめています。
興味を持っていただけた方は、ぜひご覧ください。
https://amzn.to/3A8kNHC

このリンクは Amazon のアフィリエイトプログラムを通じて設定されています。

こんにちは。ましじめの田村です。
a-blog cmsで組み込みjsの動作後にJavaScriptを実行したいと言う場合がありました。
この場合、組み込みjsのイベントハンドラが用意されていますので用途に合わせて使うと実現出来そうです。

公式マニュアルを見てみると次の方法で変更が可能です。
組み込みJSのイベントハンドラ

今回はダイレクト編集でタイトル編集のダイアログが出ている時のカスタムフィールドで実行したいという状況でしたのでacmsDialogOpenedを使用することにしました。

次のコードを管理画面で読み込まれるjsに追加します。

ACMS.addListener("acmsDialogOpened", function() {
  //タイトルをコピーする
  //--------------------------
  $('#js-clone_title').on('click', function () {
    $('#input-clone_title').val($('#entry-title').val());
  });
});



また、普段使っている物を抜粋してみたいと思います。

組み込みJSの実行が出来る段階

ACMS.Ready(function() {
  ACMS.Config.postIncludeEffect = 'fade';
});

組み込みJSが実行された後

ACMS.addListener("acmsDispatch", function() {
    $("[href*=bxslider]").remove();
});

ユニットが追加された時

ACMS.addListener("acmsAddUnit", function(e) {
   console.log(e.target); // ユニットの dom が入っています。
});

カスタムフィールドグループが追加された時

ACMS.addListener("acmsAddCustomFieldGroup",function(e) {
    console.log(e.target); // カスタムフィールドグループの dom が入っています。
});

編集用ダイアログが表示された時

ACMS.addListener("acmsDialogOpened", function() {

});




使用例として、ポストインクルード実行後に処理をしたい場合の例もありました。気になった方は目を通してみると良いかもです。
ポストインクルードで読み込んできたコンテンツにMasonryレイアウトを適応する

以上「a-blog cms 組み込みJSの動作後にJavaScriptのを実行する」でした。
組み込みjsの動作後にJavaScriptを実行したい場合参考にしてみてください。


関連するタグ

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、あなたのウェブサイトの制作を強力にサポートいたします。

お問い合わせはこちらから