上海戴文 - Drupal开发 在线教育

你在这里

听晴空讲Drupal主题——第七章 主题中的JS(2)

主标签

7.2 在主题中引入JS

7.2.1 使用.info文件添加js

在dp中引入js最简单的方法是在.info文件中进行声明。这里就不重复叙述了,但是你应该记住两点:第一,用这个方法添加的js会出现在网站的所有页面上,因此,要考虑性能问题。第二,用这个方法添加的js是主题层的js,当drupal页面加载的时候,drupal会首先加载库js(core/library)和模块js,然后才加载主题js。

或者,你也可以用JS Injector 模块来执行这个动作,官网地址:https://www.drupal.org/project/js_injector。

7.2.2 从template.php中加载js

在Drupal 7的template.php文件中,你可以通过 drupal_add_js() 或者 drupal_add_library()来添加js,d6中就只能使用前者。

关于drupal_add_js的详细内容,请查看官网https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_js/7,以下只给出一些例子。

比如,你的根目录下有一个名为foo.js的脚本,那么引入的时候就大概是下面这样的:

Drupal 6:

<?php

function example_preprocess_page(&$variables) {

  drupal_add_js(drupal_get_path('theme', 'example'). '/foo.js', 'theme');

  // We need to rebuild the scripts variable with the new script included.

  $variables['scripts'] = drupal_get_js();

}

?>

 Drupal 7:
 

<?php

function example_preprocess_html(&$variables) {

  $options = array(

    'group' => JS_THEME,

  );

  drupal_add_js(drupal_get_path('theme', 'example'). '/foo.js', $options);

}

?>

 在下面的代码片段,我们先判断当前页面是否为网站首页,如果是,添加js。

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来为具体的内容类型添加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),此例中的路径是  /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');

  }

}

下面还有一些例子,看得懂的就看,我就不解释了,事实证明,教程不能写得太详细,不然就会有那种连<p>是什么都不知道的人说你的教程写得太乱了,然后帮你出个整理版。

Javascript direkt einbinden

<?php

drupal_add_js('    

  (function ($) {

    Drupal.behaviors.exampleModule = {

      attach: function(context, settings) {

        // Hier kann nun wie gewohnt jQuery-Code stehen.

      }

    };

  })(jQuery);

', 'inline');

?>

Eine Javascript-Datei einbinden

<?php

drupal_add_js('/pfad/zur/javascript-datei.js', 'file');

?>

Dieser Code sollte entweder der Datei template.php im aktiven Theme Ordner platziert werden, oder in einem eigenen Modul. Zum Beispiel über hook_init().

 

<?php

function deinModulName_init() {

  // Javascript direkt einbinden

  drupal_add_js('    

    (function ($) {

      Drupal.behaviors.exampleModule = {

        attach: function(context, settings) {

          // Hier kann nun wie gewohnt jQuery-Code stehen.

        }

      };

    })(jQuery);

  ', 'inline');



  // Eine Javascript-Datei einbinden

  drupal_add_js( drupal_get_path('module', 'deinModulName') . '/javascript-datei.js', 'file');

}

?>

Weitere Beispiele:

<?php

  // Eine Datei einbinden.

  drupal_add_js('misc/collapse.js', 'file');

  // Inline-JS einbinden.

  drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });', 'inline');

  // Inline-JS mit weiteren Optionen einbinden.

  drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });',

    array('type' => 'inline', 'scope' => 'footer', 'weight' => 5)

  );

  // Externes JS einbinden.

  drupal_add_js('http://example.com/example.js', 'external');

  // JS-Setting einbinden.

  drupal_add_js(array('myModule' => array('key' => 'value')), 'setting');

  // Eine Library (z.b. jQuery Plugin) einbinden.

  drupal_add_js('misc/collapse.js',

    array('type' => 'file', 'scope' => 'footer', 'group' => JS_LIBRARY)

  );

?>

 

Javascript auf ausgewählten Seiten einbinden

 

Wenn man Javascript nur auf einigen Seiten einbinden möchte kann man das zum Beispiel über eine if-Abfrage im hook_init machen.

<?php

function deinModulName_init() {

  // Nur auf node/123 einbinden

  if (arg(0) == 'node' AND arg(1) == 123) {

    // Hier drupal_add_js(...);

  }

}

?>

7.2.3 Js的加载顺序

在Drupal中引入JS的时候,你可以用表示权重的“group”来控制JS在页面上的载入顺序,以下是你可以在"group"中使用的常数:

JS_LIBRARY: JS库,设置(settings),jQuery插件

JS_DEFAULT:模块层JS

JS_THEME: 模版层JS

Drupal页面加载JS的顺序是:先加载JS_LIBRARY,然后加载JS_DEFAULT,最后是JS_THEME。

当你使用drupal_add_js引入JS的时候,你可以使用类似下面的代码来控制JS的加载顺序:

 

<?php

drupal_add_js(

  'jQuery(document).ready(function () { alert("Hello!"); });',

  array(

    'type' => 'inline',

    'scope' => 'footer',

    'group' => JS_THEME,

    'weight' => 5,

  )

);

?>
Drupal 版本: 

猜你喜欢