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两个方法。

源码下载