Drupal 学习使用jQuery

本节学习如果在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文件

Drupal 学习使用jQuery

时间: 2024-10-13 07:13:24

Drupal 学习使用jQuery的相关文章

学习记录jQuery的animate函数

很久之前就对jQuery animate的实现非常感兴趣,不过前段时间很忙,直到前几天端午假期才有时间去研究. jQuery.animate的每种动画过渡效果都是通过easing函数实现的.jQuery1.4.2中就预置了两个这样的函数: easing: {linear: function( p, n, firstNum, diff ) {return firstNum + diff * p;},swing: function( p, n, firstNum, diff ) {return ((

JavaScript学习笔记——jquery中html()、text()、val()的区别

.html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. 这三个方法功能上的对比 .html(),.text(),.val()三种方法都是用来读取选定元素的内容:只不过.html()是用来读取元素的HTML内容(包括其Html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的"value"值.其中.和.text()方法不能使用在表单元素上,而.val()

jQuery学习笔记——jQuery基础核心

代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $(‘#box’);//进行执行的ID元素选择 $(‘#box’).css(‘color’, ‘red’);//执行功能函数由于$本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:jQ

jQuery学习笔记——jQuery常规选择器

一.简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了.#box {//使用 ID 选择器的 CSS 规则color:red;//将 ID 为 box 的元素字体颜色变红}在 jQuery 选择器里,我们使用如下的方式获取同样的结果:$('#box').css('color', 'red

学习使用 jQuery &amp; CSS3 制作照片堆栈效果

在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个动作类似现实世界的行为. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型

jQuery源代码学习之六——jQuery数据缓存Data

一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所有用户自定义数据都被保存在这个对象的cache属性下,cache在此姑且称之为自定义数据缓存: 自定义数据缓存和DOM元素/javascript对象通过id建立关联,id的查找通过DOM元素/javascript元素下挂载的expando属性获得 话不多说,直接上代码.相关思路在代码注释中都有讲解

jQuery学习(一)——jQuery入门

1.jQuery基础 Jquery它是一个库(框架),要想使用它,必须先引入! jquery-1.8.3.js:一般用于学习阶段. jquery-1.8.3.min.js:用于项目使用阶段 官网下载后,复制到当前WEB项目的js文件夹下,如下: 引入代码:<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script> 2.JS和JQ页面加载的区别 传统的JavaS

jQuery基础学习(二)&mdash;jQuery选择器

一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 CSS规则   }   以文档元素为选择符   ID选择器 #ID{                  CSS规则 }   以ID为选择符   类选择器 E.className{                 CSS规则 }   以文档元素的Class为选择符   群组选择器 E1,E2{   

很容易学习的JQuery库 : (三) 事件

jQuery 是为事件处理特别设计的. 一.事件函数 jQuery 事件处理方法是 jQuery 中的核心函数. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法.术语由事件"触发"(或"激发")经常会被使用. 通常会把 jQuery 代码放到 <head>部分的事件处理方法中: 实例 <span style="font-size:18px;"><html> <head> <scr