Drupal世界中的jQuery
本文適用Drupal6、Drupal7，範例均通過測試。測試版本為6.20、7.0。
關於Drupal與jQuery的關係
Drupal核心內建jQuery，因此要在Drupal上使用jQuery並不需要額外安裝模組或下載jQuery函式庫。其檔案路徑在Drupal網站根目錄下的/misc/jquery.js。
圖(一)drupal中jquery.js在misc資料夾底下
關於在Drupal中使用jQuery
最簡單的方式就是使用drupal_add_js()這個方法來叫用Drupal內建的jQuery。實際範例如下:
Step1: 建立一個新的page。(www.yoursite.com?q=node/add/page)
Step2: 將輸入格式(filter)設定為PHP code。
圖(二)輸入格式必須改成PHP code
Step3: 在內容(body)中輸入以下程式碼。
Drupal 6版本
<?php
drupal_add_js(
//網頁載入時呼叫一個方法
'$(document).ready(function(){
//將所有網頁中<p>標籤的內容隱藏
$("p").hide();
//將所有網頁中<p>標籤的內容淡入(慢慢浮現)
$("p").fadeIn("slow");
});',
'inline');
?><p id="one">第一段</p>
<p>第二段</p>
<p>第三段</p>
Drupal 7版本
<?php
drupal_add_js(
//網頁載入時呼叫一個方法
'jQuery(document).ready(function(){
//將所有網頁中<p>標籤的內容隱藏
jQuery ("p").hide();
//將所有網頁中<p>標籤的內容淡入(慢慢浮現)
jQuery ("p").fadeIn("slow");
});',
'inline');
?><p id="one">第一段</p>
<p>第二段</p>
<p>第三段</p>
Step4: 儲存後將可看到所有<p></p>夾住的內容在網頁載入後慢慢浮現。
進一步解說範例程式
眼尖的讀者應該已經發現範例所使用的drupal_add_js()有兩個參數，第一個參數為欲執行之jQuery語法；第二個參數為Drupal輸出javascript的格式。兩個參數都使用單引號夾住。
drupal_add_js(
'$(document).ready(function(){$("p").hide();$("p").fadeIn("slow");});' , 'inline')
第一個參數是jQuery語法，本文不再多做說明，有興趣的讀者可以參考這個教學網站
http://webdesign.kerthis.com/jquery/。
第二個參數是Drupal輸出javascript的型式，這個範例用的是’inline’，使用這個指令Drupal會將javascript用<script></script>夾住並放在網頁的<head></head>標籤中。有照著範例實作的讀者不妨在瀏覽器中檢視原始碼，看看Drupal輸出javascript的效果。
圖(三)inline的drupal輸出效果的網頁原始碼
結論與其他議題
drupal_add_js()並不是只用來使用jQuery，亦用於叫用自己寫好的.js檔、其他javascript函式庫、或是直接載入遠端的.js檔。官方文件上的使用範例如下
drupal_add_js('misc/collapse.js');
drupal_add_js('misc/collapse.js', 'file');
drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });', 'inline');
drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });',
array('type' => 'inline', 'scope' => 'footer', 'weight' => 5)
);
drupal_add_js('http://example.com/example.js', 'external');
drupal_add_js(array('myModule' => array('key' => 'value')), 'setting');
若要對drupal_add_js()有更深入的瞭解，請參考官方文件:
http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_add_js/7
