組み込みJS

ポストインクルード機能で行っていた Ajax を利用したコンテンツの更新方法を、htmx というライブラリを利用し POST だけでなく、GET でも利用できるようにします。

リンクをクリック時に、ページのリロードなしでその場に表示する機能です。

フォームを送信時に、ページのリロードなしでその場に表示する機能です。

複数のエリアを同時に、ページのリロードなしでその場に表示する機能です。

ポストインクルード機能の基本設定を紹介します。

送信ボタンをクリックしてポストインクルードをトリガーする機能です。

送信ボタンを押さずにポストインクルードをトリガーする機能です。

ポストインクルード利用時に、キャッシュ機能が利用されている時にランダム表示させる方法です。

特定の箇所をクリックした際に、指定した要素の表示／非表示をフェード効果で切り替えるトグル機能です。

特定の箇所をクリックしたとき、指定した要素の表示／非表示をフェード効果で切り替えるトグル機能です。

特定の箇所をクリックした際に、指定した要素の表示／非表示をスライド効果で切り替えるトグル機能です。

コンテンツをタブ型のメニュー表示にする機能です。

コンテンツをタブ型のメニュー表示にする機能です。

コンテンツをアコーディオン型のメニュー表示にする機能です。

ユーザーに閲覧しているコンテンツが横スクロールできることを知らせる機能です。

サイドメニューをスクロールに追従させる機能です。

オフキャンバスメニューを実装します。面全体を右、もしくは左にスライドさせ画面外に隠れていたメニューを表示させる機能です。

ブログコンテンツ や マニュアル系コンテンツ などで便利な目次を生成する機能です。

指定したブロック要素の高さを揃える機能です。

サムネイル画像を拡大表示させるイメージビューワーです。

PDFをプレビュー表示する機能です。

YouTube や Vimeo の組み込みビデオをモーダルで再生します。

Google Maps の地図を表示させる機能です。

Google Maps のストリートビューを表示させる機能です。

OpenStreetMapの地図を表示させる機能です。

焦点座標によって画像をトリミングして表示する機能です。

日付をカレンダーから入力するインターフェースを提供します。

日付選択用のJavaScriptライブラリ 「flatpickr」です。

クリックした任意の入力欄のテキストを全選択状態にする機能です。

フォームのバリデーションをする機能です。

ユーザーがフォームの入力中に別ページに遷移しようとしたときに離脱防止のアラートを表示する機能です。

パスワードの強度を推定する機能です。

ページ内のリンクをクリックしたとき、スムーズにスクロールする機能です。

現在位置のリンクにclass属性を適用し装飾する機能です。

外部リンクに対して自動的に target="_blank" を付与する機能です。

1行ごとに交互に2つのクラスを付与し、スタイルを装飾できる機能です。

コードに色を付けて見やすく表示する機能です。

link要素で参照しているCSSを切り替える機能です。

背景色の情報を元にコントラストが高い文字色（黒系・白系）を設定できる機能です。

検索キーワードにマッチした文字列にスタイルを装飾します。

ホバー時に画像をロールオーバーする機能です。

マウスオーバーしている要素に任意のクラスを付与する機能です。

カスタムフィールドやユニットのテキストエリアを、ブロックエディター化して、リッチなUIで編集できる機能です。

テーブルの編集のユーザーインターフェースを提供します。

管理画面で使用されているアラート（.acms-alert）を閉じる機能です。

モジュールIDの編集画面をモーダル表示します。

エントリーの自動保存機能です。

カスタムフィールドやお問い合わせフォームで使用できるWYSIWYGエディタです。

入力欄の文字数をカウントする機能です。

任意のページをモーダルダイアログで表示します。

画像・iframe要素などを遅延読み込みし、ページのパフォーマンスを改善する機能です。

JavaScriptなどのコンテンツが表示領域に入った瞬間にコンテンツを読み込み、遅延ロードする機能です。

ログイン状態に応じて表示・非表示を制御する機能です。