Top / テンプレート作成 / デザイン作成応用マニュアル / デザインファイルでjQueryを利用する時は

デザインファイルでjQueryを利用する時は

jQueryはWIKIPLUSでも使用されています。
衝突を避けるため、jQueryを読み込む際はテンプレートに以下のように記載します。

<script type="text/javascript" src="path/to/inst/jquery.min.js"></script>

path/to/inst/の所は、docrootに設置したjQueryのライブラリファイルを相対パスに置き換えてください。

また、状況によっては、下記を読み込んだjQueryの直下に記述する必要があります。

<script>$ = jQuery.noConflict(true);</script>

 

メカニズム

WIKIPLUSで利用しているjQueryは、WIKIPLUSの各種ツール群が動作するようにテストされた特殊なバージョン(以降「WIKIPLUS用のjQuery」)を使用していますが、デザイナーがデザインファイルで利用したいバージョンと一致しないことがあります。

そのため、WIKIPLUSは先にWIKIPLUS用のjQueryを読み込み、このインスタンスをwpjQに投入しています。
(注:WIKIPLUSは自動的に<head>タグの直下に関連スクリプト群を読み込む仕様です。»参照

このときの処理は、下記の通りになっています。(※WIKIPLUSシステムjsファイル「wpjQ.js」内)

wpjQ=jQuery.noConflict(true);

この時点でWIKIPLUS用のjQueryで使われている$が解放(正確には先に読み込んでいるjQueryが$になりますが、通常の利用方法ではデザイナーが設置したjQueryは先に読み込まれないため、事実上解放されます)され、WIKIPLUS用のjQueryはwpjQインスタンスに保存されます。

その後、デザイナーがデザインしたテンプレートファイル内(多くは*.design.*.tplファイル)で、好きなバージョンのjQueryを読みこみむことで$は、そのjQueryになります。

<script type="text/javascript" src="path/to/inst/jquery.min.js"></script>

しかしながら、何らかの理由で$の上書きが成功しないことがあります。そこで$=jQuery.noConflict(true)を実行することで、強制的に$に再アサインすることができます。

<script>$ = jQuery.noConflict(true);</script>