你现在的位置:首页 > PHP网站建设知识库 > Drupal > 正文

drupal引用JQuery和JavaScript技巧

如何在drupal中引用jquery和javascript?

\

大部分PHP网站制作者用户尝试直接将调用、引用JQuery库的代码写在page.tpl.php或html.tpl.php文件里,但是呢,这是脚本硬编码(hard code),虽然可以起作用,但是并不符合drupal的编码规范,还有些人尝试使用区块或节点中的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);