1. NetCommons2 の任意のモジュールでjqueryを利用する

投稿日時: 11/20 牟田口

こんにちは。

オープンソース・ワークショップの牟田口です。

 

NetCommons2 のJavaScriptライブラリはprototype.jsですが、jqueryを使いたい時があります。
jqueryを使う時に、jqueryを個別にダウンロードして読み込むと、ウィジウィグの画像添付、ファイル添付が動作しなくなったり、jqueryの多重読み込みで白画面になったりする不具合が出たりします。

そこでNetCommons2でもメニューの一部がjqueryを使っていますので、その仕組みを流用して他のモジュールでも使えるようにする方法を記載します。

 

 1.html/webapp/modules/モジュール名/モジュール名_script.html

<script class="nc_script" type="text/javascript">
if(!iepCls["<{$id}>"]) {
iepCls["<{$id}>"] = new clsIep("<{$id}>");
}

// use jquery
// 実装例: https://github.com/netcommons/NetCommons2/blob/develop/html/webapp/modules/menu/files/js/menu.js#L899
// jqcheckCls変数: https://github.com/netcommons/NetCommons2/blob/develop/html/webapp/modules/common/files/js/jqcheck.js
// jquery実体: https://github.com/netcommons/NetCommons2/blob/develop/html/webapp/modules/comp/files/js/extension/jquery-1.6.4.min.js
// これを書くことでjqueryを読み込んでる
jqcheckCls.jqload("jquery-1.6.4.min", "window.jQuery", function() {
});

</script>

 

・上記を書くことで、jqueryが読み込まれ、$の代わりにjQueryで書く事が出来ます。

 ・[補足] NetCommons2ではprototype.jsで$を先に使っているため、jqueryも使う$と衝突します。そのため$の代わりに別の変数jQueryを使って記述します。

・モジュール名_script.htmlは、各テンプレートから参照させるため、モジュールのどのテンプレートでもjQueryが使えるようになります。

 ・この方法でjqueryを何度も読み込んでも、jqueryの多重読み込みになりませんでした。

JQuery記述例

// 項目表示
jQuery('#discroption').show('slow');

// 項目非表示
jQuery('#discroption').hide('slow');

 

参考になれば幸いです。