Drupal學習(19) 使用jQuery

時間 2019-11-25

標籤 drupal 學習使用 jquery 欄目 JQuery 简体版

原文原文鏈接

本節學習若是在Drupal裏交互使用jQuery.php

jQuery在Drupal是內置支持的。存在根目錄的misc目錄中。api

當調用drupal_add_js方法，會自動加載jQuery。緩存

在Drupal頁面裏嵌入JS代碼ide

1. 開啓 PHP filter 模塊。目的是能夠在頁面裏嵌入PHP代碼。函數

2. 新建一個頁面。學習

注意在下面的文本格式中選擇 "PHP Code",this

Body 裏填上如下內容。spa

<?php 
   drupal_add_js('jQuery(document).ready(function () { 
         jQuery("p").hide(); 
         jQuery("p").fadeIn("slow"); 
     });', 'inline'); 
?>  
 
<p id="one">Paragraph one</p> 
<p>Paragraph two</p> 
<p>Paragraph three</p>

最終如圖。調試

drupal_add_js 是Drupal的內置函數，接收兩個參數code

第一個參數：執行的JS代碼

第二個參數：inline 表示把JS代碼放到本頁面的<script></script>標籤中，在文檔的<head>元素內。

須要注意的是，當爲inline，爲避免衝突。要把JS代碼放到(function ($) {....執行的JS代碼.... })(jQuery); 語句中，或者使用 jQuery()，不要使用$()。

另外一個須要注意的是，JS代碼中帶有引號的話，須要轉義:

<?php 
   drupal_add_js('jQuery(document).ready(function () { 
         jQuery("#one").wrap("<div class=\'error\'></div>"); 
     });', 'inline'); 
?>

在Drupal裏引入JS代碼文件

使用內置嵌入JS的方法優勢是比較靈活，執行效率高，缺點是不方便調試。不利於在生產站點裏使用。若是一不當心關閉了PHP filter模塊，則影響較大。

方法一. 經過修改主題 .info文件添加JS

1. 在你的主題文件夾內建立一個scripts.js 文件

2. 編輯你主題的info文件，添加下面這行

scripts[] = scripts.js

3. 清除緩存，或者切換爲其餘主題再切換回來。

每一個頁面加會加載此JS文件。

方法2、爲某個模塊使用JS文件

新建一個模塊，名叫blockaway，

blockaway.module的代碼

<?php
/**
 * @file
 * Use this module to learn about jQuery.
 */
/**
 * Implements hook_init().
 */
function blockaway_init() {
  drupal_add_js(drupal_get_path('module', 'blockaway') .'/blockaway.js');
}

代碼很是簡單，用到了drupal_get_path和drupal_add_js兩個方法。

源碼下載