このサイトは株式会社オープンソース・ワークショップの旧サイトです。
新サイトを参照していただけますようお願いいたします。
https://opensource-workshop.jp/
NetCommons開発TIPS
NetCommons2 の任意のモジュールでjqueryを利用する
こんにちは。
オープンソース・ワークショップの牟田口です。
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のライブラリは拡張モジュールを含めると、複数ありました。
本体検索:
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利用の観点からすると影響なし。
拡張モジュール検索:
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で利用
参考まで。