关于Drupal与jQuery的关系

来源：互联网发布：nuitka linux 编辑：程序博客网时间：2024/05/16 09:45

在创建“学JAVA”网（www.xue-java.com）过程中，因为一向对jQuery有极大的好感，并且以前使用jQuery比较多，比较熟悉，因此想在Drupal 7中直接使用jQuery库和jQuery UI库。通过Google，发现下面这些内容对Drupal和jQuery和关系讲解得比较清晰，故转载。

（以下内容适用于Drupal 7）

Drupal核心内置了jQuery，因此要在Drupal上使用jQuery，并不需要额外安装模块或下载jQuery库。其库文件路径是Drupal网站根目录下的/misc/jquery.js。

关于在Drupal中使用jQuery

最简单的方式就是使用drupal_add_js()这个方法来调用Drupal内建的jQuery。其实际使用步骤如下：

步骤1：以管理员身份登录自己的网站，管理->添加内容->文章，建立一个新的页面；

步骤2：将输入格式（filter）设定为PHP code；（注：前提是启用了PHP filter模块。方法：管理->模块，勾选PHP filter模块，然后点“保存设置“按钮）

步骤3：在内容(body)中输入以下代码：

<?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>

步骤4：保存后，将看到所有<p></p>标签内的内容在网页载入后慢慢浮现。

进一步讲解上面的代码

眼尖的读者应该已经发现上面的代码中所使用的drupal_add_js()有两个参数，第一个参数为要执行的jQuery语法；第二个参数为Drupal输出javascript的格式。两个参数都使用单引号括起来。

 drupal_add_js(    //网页载入时调用的方法    'jQuery(document).ready(function(){        //将所有网页中<p>标签的内容隐藏        jQuery ("p").hide();        //将所有网页中<p>标签的内容淡入(慢慢浮现)        jQuery ("p").fadeIn("slow");    });', 'inline');

第一个参数是jQuery语法，这里不做过多说明。第二个参数是Drupal输出javascript的样式，这里使用的是'inline'，使用这个指令Drupal会将javascript用<script></script>括起来并放在网页的<head></head>标签中。如果你照着这个示例来做了，不妨在浏览器中查看一下源代码，看看Drupal输出javascript的效果。

结论以及其他议题

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');