j Query Support in XOOPS Cube 2.2 XOOPS Cube Project Creative Commons Attribution 2.1 
jQuery in XOOPS Cube Legacy 2.2 <ul><li>XCL 2.2 supports  jQuery  and  jQuery UI  libraries. </li></ul><ul><ul><li>Load jQ...
Preference Setting(1) <ul><li>Open LegacyRender – Preference in admin page. </li></ul><ul><li>レガシーレンダーモジュールの「一般設定」ページを開きます...
Preference Setting(2) <ul><li>You can load jQuery core & jQuery UI Library in two ways, from Google Libraries API and from...
How to add your script <ul><li>It is very easy to add your javascript code by preload file. Maybe it seems a complex one, ...
Sample Code <?php if (!defined('XOOPS_ROOT_PATH')) exit(); class  jQuery_ExternalLink  extends XCube_ActionFilter { public...
Advanced Option for addScript() <ul><li>As default, Added scripts are processed after html is rendered. You can change NOT...
For Developers <ul><li>Developers can add script/css files/library files without preload in their modules like below. </li...
Upcoming SlideShare
Loading in …5
×

XOOPS Cube Legacy 2.2 jQuery Support

2,909 views

Published on

XOOPS Cube Legacy 2.2 jQuery Support

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,909
On SlideShare
0
From Embeds
0
Number of Embeds
385
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

XOOPS Cube Legacy 2.2 jQuery Support

  1. 1. j Query Support in XOOPS Cube 2.2 XOOPS Cube Project Creative Commons Attribution 2.1 
  2. 2. jQuery in XOOPS Cube Legacy 2.2 <ul><li>XCL 2.2 supports jQuery and jQuery UI libraries. </li></ul><ul><ul><li>Load jQuery core and jQuery UI as default. </li></ul></ul><ul><ul><li>You can easily add script, javascript library, CSS by preload file. </li></ul></ul><ul><ul><li>Prevent to load the same file twice. </li></ul></ul><ul><li>XCL 2.2 は jQuery および jQuery UI をサポートしています。 </li></ul><ul><ul><li>標準で jQuery 本体および jQuery UI を読み込みます。 </li></ul></ul><ul><ul><li>プリロード機構を使ってスクリプト、ライブラリ、 CSS を簡単に追加することができます。 </li></ul></ul><ul><ul><li>同じファイルを 2 度読み込むことが無いよう調整します。 </li></ul></ul>
  3. 3. Preference Setting(1) <ul><li>Open LegacyRender – Preference in admin page. </li></ul><ul><li>レガシーレンダーモジュールの「一般設定」ページを開きます。 </li></ul>Let’s set the preference before you use. 使い始める前にまずは環境の設定をします。
  4. 4. Preference Setting(2) <ul><li>You can load jQuery core & jQuery UI Library in two ways, from Google Libraries API and from your local files. </li></ul><ul><li>If you use Google Libraries API (recommended), set the version. </li></ul><ul><li>If you use local jQuery/UI files , upload them and set the url. If your server can’t access to Google, you must use this way. </li></ul><ul><li>jQuery 本体と jQuery UI ライブラリを読み込む方法が 2 種類用意されています。 Google Libraries API を使う方法と、サーバに置いたファイルを読み込む方法です。 </li></ul><ul><li>Google Libraries API を使う場合(推奨)、そのバージョンを記入します。 </li></ul><ul><li>自分で用意したファイル を使う場合は、ファイルをアップロードした後、その URL を記入します。サーバから Google のサイトにアクセス出来ない場合はこの方法を使います。 </li></ul>
  5. 5. How to add your script <ul><li>It is very easy to add your javascript code by preload file. Maybe it seems a complex one, most of the code is fixed. See the next page’s sample code, especially red text. </li></ul><ul><ul><li>Decide the class name (The same name of the preload file) </li></ul></ul><ul><ul><li>Change library files/css files’s url </li></ul></ul><ul><ul><li>Replace javascript code. </li></ul></ul><ul><ul><li>Put this file on (html)/preload directory Over. </li></ul></ul><ul><li>Preload ファイルを使って Javascript のコードを追加するのはとても簡単です。複雑に見えるかもしれませんが、ほとんどのコードは固定のものです。次のページのサンプルコードを見てください(赤字の部分に注目)。 </li></ul><ul><ul><li>クラスの名前を適当に決める(ファイル名と同じにします) </li></ul></ul><ul><ul><li>ライブラリファイルや CSS ファイルの URL をあなたのものに変える </li></ul></ul><ul><ul><li>スクリプトのコードを置き換える。 </li></ul></ul><ul><ul><li>このファイルを (html)/preload ディレクトリに置く 以上です。 </li></ul></ul>
  6. 6. Sample Code <?php if (!defined('XOOPS_ROOT_PATH')) exit(); class jQuery_ExternalLink extends XCube_ActionFilter { public function preBlockFilter() { $this->mRoot->mDelegateManager->add('Site.JQuery.AddFunction', array(&$this, 'addScript')); } public function addScript(&$jQuery) { $jQuery->addLibrary(‘ http://example.com/common/js/samplelib.js ’); $jQuery->addStylesheet(‘ http://example.com/common/js/samplelib.css ’); $jQuery->addScript( '$(&quot;a[rel='external']&quot;).click(function(){window.open($(this).attr(&quot;href&quot;)); return false;});‘ ); } } ?>
  7. 7. Advanced Option for addScript() <ul><li>As default, Added scripts are processed after html is rendered. You can change NOT to be processed by using flag like below. </li></ul><ul><li>標準では、追加したスクリプトは html が表示されたあと実行されます。フラグを使って、実行しないよう変更することができます。 </li></ul>$jQuery->addScript( '$(&quot;a[rel='external']&quot;).click(function(){window.open($(this).attr(&quot;href&quot;)); return false;});‘ , false );
  8. 8. For Developers <ul><li>Developers can add script/css files/library files without preload in their modules like below. </li></ul><ul><li>モジュール開発者は別の方法でスクリプト、 CSS ファイル、ライブラリファイルを追加することができます。 </li></ul>$headerScript = XCube_Root::getSingleton()->mContext->getAttribute( 'headerScript'); $headerScript->addLibrary( XOOPS_MODULE_PATH. ‘/mymod/myscript.js’ ); $headerScript->addStylesheet( XOOPS_MODULE_PATH. ‘/mymod/style.css’ ); $headerScript->addScript( '$(&quot;.datepicker&quot;).each(function(){$(this) .datepicker({dateFormat: &quot;'._JSDATEPICKSTRING.'&quot;});});' );

×