ホーム » Movable Type » A-Form » A-Form ドキュメント » A-Form 4（MT7版）からのjQueryの取り扱い変更について

A-Form 4（MT7版）からのjQueryの取り扱い変更について

MT6までのA-Form

フロント側

• jQuery-1.6.4を使用
• AFormに同梱（mt-static/plugins/AForm/js/jquery.js）
• 他のjQueryとコンフリクトしないようにaform_jQueryとして使用
• フォームに自動的に読み込まれる

管理側

• jQuery-1.6.4を使用
• AFormに同梱（mt-static/plugins/AForm/js/jquery.js）
• 他のjQueryとコンフリクトしないようにaform_jQueryとして使用

MT7対応のA-Form

フロント側

• jQuery-3.3.1を使用
• AFormに同梱（mt-static/plugins/AForm/js/jquery.js）
• 従来のaform_jQueryではなく、jQueryのまま扱うようにした
• フォームに自動で読み込まれるようにはしていない（コンフリクトの可能性があるため）
• ユーザーが自分で読み込むようにテンプレートに記述が必要
• AFormのjquery.jsおよびそのライブラリを読み込む場合は、以下をテンプレートに記述

 <mt:include module="aform_js">

• AFormのjquery.jsは読み込まずにライブラリのみ読み込む場合は、以下をテンプレートに記述

 <mt:include module="aform_js" exclude_jquery_js="1"> 

これは、jQueryのコンフリクトを避けるための方法で、既にページ内にほかのjquery.jsが読み込まれている場合に使用します。
この場合、ユーザーが自分で読み込んでいるjQueryによってAFormが動作することになります。
そのjQueryのバージョンが古かったりすると正しく動作しない可能性はあります。

A-Form4からは、テンプレートで読み込んでいるjsとcssを切り離してヘッダーのテンプレートにユーザーに書いてもらう運用にすることになりました。
ユーザーが独自のCSSを用意、または、下記の記述をテンプレートのhead内に書くことでA-Formのデフォルトスタイルを使うことができます。

<link rel="stylesheet" type="text/css" href="<$mt:StaticWebPath$>plugins/AForm/style.css" />
<link rel="stylesheet" type="text/css" href="<$mt:StaticWebPath$>plugins/AForm/jquery-ui.min.css" />

管理画面

• MT7本体のjQueryを使用するように変更