本节学习如果在Drupal里交互使用jQuery.

jQuery在Drupal是内置支持的。存在根目录的misc目录中。

当调用drupal_add_js方法，会自动加载jQuery。

在Drupal页面里嵌入JS代码

1. 开启 PHP filter 模块。目的是可以在页面里嵌入PHP代码。

2. 新建一个页面。

注意在下面的文本格式中选择 "PHP Code",

Body 里填上以下内容。

<?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的内置函数，接收两个参数

第一个参数：执行的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文件。

方法二、 为某个模块使用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两个方法。

源码下载

Drupal学习(19) 使用jQuery的更多相关文章

  1. jQuery 学习笔记：jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  2. 【学习笔记】jQuery的基础学习

    [学习笔记]jQuery的基础学习 新建 模板 小书匠  什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...

  3. jQuery学习笔记之jQuery的Ajax（3）

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  4. [转载]JavaEE学习篇之——JQuery技术详解

    原文链接:http://blog.csdn.net/jiangwei0910410003/article/details/32102187 1.简介2.工具3.jQuery对象 1.DOM对象转化成j ...

  5. J2EE学习篇之--JQuery技术具体解释

    前面我们解说了的J2EE的技术都是服务端的技术,以下我们来看一下前端的一些开发技术,这一篇我们来看一下jQuery技术 简单介绍: jQuery由美国人John Resig创建,至今已吸引了来自世界各 ...

  6. J2EE学习篇之--JQuery技术详解

    前面我们讲解了的J2EE的技术都是服务端的技术,下面我们来看一下前端的一些开发技术,这一篇我们来看一下jQuery技术 简介: jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...

  7. jQuery源代码学习之九—jQuery事件模块

    jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...

  8. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  9. jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器

    1.  什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQ ...

随机推荐

  1. AI-Info-Micron：用内存解决方案演化神经网络智能

    ylbtech-AI-Info-Micron:用内存解决方案演化神经网络智能 1.返回顶部 1. 用内存解决方案演化神经网络智能 我们的大脑每天会进行数千次极其复杂的操作.无论是提醒我们小心被炉子烫到 ...

  2. easyUi的一些常用方法

    目录: 1.获取表格的pageNumber和pageSize 2.获取/设置下拉列表的选中值 3.下拉列表的输入框的禁用 1.获取表格的pageNumber和pageSize var pageNumb ...

  3. Linux下一种简单易行的cpu benchmark方法

    用Linux自带的bc计算器计算pi值的一种benchmark手段   其实很简单,就是一行命令. time echo “scale=5000; 4*a(1)” | bc -l -q time是计时程 ...

  4. awk 简单使用 egrep 正则表达式

    [root@python ~]# cat testcount.txt a 1.1.1.1b 2.2.2.2c 3.3.3.3a 1.1.1.1d 4.4.4.4e 5.5.5.5f 6.6.6.6 1 ...

  5. spring,springMVC,mybatis项目添加maven后报500错

    <resources> <resource> <directory>src/main/java</directory> <includes> ...

  6. 并发编程（三）------并发类容器Copy-On-Write容器

    Copy-On-Write简称COW,是一种用于程序设计中的优化策略.JDK里的COW容器有两种: CopyOnWriteArrayList CopyOnWriteArraySet CopyOnWri ...

  7. Oracle插入（insert into）

    Oracle插入(insert into) 转载:http://www.oraclejsq.com/article/010100199.html Oracle对表数据的插入是使用insert命令来执行 ...

  8. angular setInterval计时操作

    在angular中setInterval方法是单向绑定,只绑定一次,无法实现计时效果, 可以使用$interval实现.附上代码:

  9. LVM的创建与管理

    LVM的创建与管理1.创建物理分区  fdisk 或者 parted 工具分区. LVM分区的类型ID为8e2.创建物理卷  pvcreate 磁盘分区或整个磁盘3.创建卷组  vgcreate 卷组 ...

  10. 关于FusionCharts需要第一次点击切换才出现问题

    最近博住接到个任务 FusionCharts生成数据发现一个问题 只有点击才切换显示 而且加载不出现全部,改成这样 然后在生成部分添加如下代码 就ok了 每天记录一点感谢大家.