Drupal 7主题定制JQuery和JavaScript技巧

我经常在drupal.org的论坛上看到一些帖子和一些其他方法在Drupal中实现JQuery脚本，经常看到大部分用户尝试直接附加JQuery到page.tpl.php或html.tpl.php，换而言之，这是对脚本硬编码到页面并且这样做并不好，还有些人尝试使用区块或节点中的PHP过滤器来输出。这些方法的缺点就是这些js代码无法被系统压缩合并或缓存而且可能导致冲突而难以排除。为了获得最佳的Drupal主题定制实践，我提出了下面的一些方法。

一些方法

这里有一些运行良好的方法在Drupal 7中添加额外的自定义JQuery脚本，这些取决于使用情况。例如，你有一些常规代码需要整站使用或者你有特定代码仅需添加到首页或指定的内容类型?下面是几种最常见的方式:

drupal_add_js

此方法是很好的一次性添加代码到指定页面而不是整个网站，使用drupal_add_js方法是通过添加代码到你的主题 template.php 文件。在下面的代码片段，我们测试看它是否是Drupal的主页，如果是，添加代码。

function my_theme_preprocess_html(&$variables) {
  if (drupal_is_front_page()) {
  drupal_add_js(drupal_get_path('theme', 'my_theme') . '/js/my_script.js');
   }
}

在上面的代码示例,你需要用你实际的主题机器名来替换'my_theme'  ， 'js' 是你主题目录中包含js脚本的一个目录，我们也可以使用drupal_add_js 方法来指定具体的内容类型像这样:

function my_theme_preprocess_node(&$variables) {

  if (isset($variables['node']) && $variables['node']->type == 'page') {
    // Add js
    drupal_add_js(drupal_get_path('theme', 'my_theme') . '/js/scripts.js');
    $variables['scripts'] = drupal_get_js();
  }
}

这将添加脚本到内容类型为"page（页面）"的所有页面中

你也可以使用drupal_add_js 方法来添加一个脚本到指定的节点路径（nid-节点id），下面我们给定一个节点id（nid） 来添加定制脚本到指定节点路径id，此例中使用  /node/8

function my_theme_preprocess_node(&$variables) {
   if(arg(0) == 'node' && arg(1) == '8' && arg(3) == null) {
     drupal_add_js(drupal_get_path('theme', 'my_theme') . '/js/custom.js');
  }
}

主题 .info 文件

如果你需要添加脚本到你整个网站的每个页面，你可以不给定任何条件的使用上面的方法或者你可以插入脚本到你的主题 .info文件，像这样:

scripts[] = js/custom.js

代码

所以，现在你已设置好添加脚本，但是如何在Drupal7中执行JQuery格式？在Drupal 7中执行JQuery已经发生了很多改变，在Drupal 6中，我们使用可以像这样使用:

Drupal.behaviors.myfunction = function(context) {

//some jquery goodness here...

};

然而，在Drupal7中，他要像这样:

(function ($) {
    //add drupal 7 code
    Drupal.behaviors.myfunction = {
        attach: function(context, settings) {
//end drupal calls

//some jquery goodness here...

  }}})
(jQuery);

Ajax?

一个额外的提示是，如果你要执行一些JQuery，如有Ajax事件，你要确保让JQuery知道，你可以为Ajax做个事件处理:

(function ($) {
    //add drupal 7 code
    Drupal.behaviors.MyfunctionTheme = {
        attach: function(context, settings) {
    //end drupal 7 calls

            //Tell JQuery that there's an Ajax event first
            $('.mydiv').ajaxComplete(function() {

        // now your actual code

               $(this).remove() // or whatever code you need to execute
            });
        }}})
 (jQuery);

注意，我已经在我所设计、开发、定制的各种网站使用并测试过上述所有这些方法，如果有其他额外的那些我可能错过的技巧请在评论中告诉我吧。

享受你的Drupal JQuery 之旅吧！