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

投稿日時: 2019/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');

 

参考になれば幸いです。

 

(2019/12/23追記) 

Jqueryのライブラリは拡張モジュールを含めると、複数ありました。 

本体検索:

https://github.com/search?utf8=%E2%9C%93&q=repo%3Anetcommons%2FNetCommons2+extension%3Ajs+filename%3AJquery&type=Code&ref=advsearch&l=&l=

html/webapp/modules/comp/files/js/extension/jquery.mobile_addition.js
html/webapp/modules/comp/files/js/extension/jquery-1.6.4.min.js
html/webapp/modules/comp/files/js/extension/jquery.mobile-1.0.1.min.js

⇒共通としてJquery利用

Jqueryの利用
https://github.com/netcommons/NetCommons2/search?q=jquery&unscoped_q=jquery

html/webapp/modules/menu/files/js/menu.js
⇒メニューの一部テンプレートで利用
html/webapp/modules/comp/files/js/extension/jquery.mobile_addition.js
⇒スマホ表示のjqueryモバイルで利用
html/webapp/modules/common/files/js/jqcheck.js
⇒何かチェックしてる?
html/webapp/modules/comp/files/js/plugins/comp_textareamain.js
⇒ウィジウィグの入力にIE+jquery属性入ってるかのIF文。Jquery利用の観点からすると影響なし。

拡張モジュール検索:

https://github.com/search?utf8=%E2%9C%93&q=repo%3Anetcommons%2FNC2ExtensionModules+extension%3Ajs+filename%3Ajquery&type=Code&ref=advsearch&l=&l=

multimedia/files/images/jquery.jplayer.js
multimedia/files/images/jquery-1.7.1.min.js
multimedia/files/images/jquery-1.8.3.min.js

⇒動画モジュール再生のjplayerで利用

 参考まで。