如何添加特定于视图的JavaScript?


26

我的网站上有一个具有特定类名的视图。我想知道在主题的template.php文件中,如何知道请求的页面中是否具有特定类名的视图。

这对我来说非常重要,因为当在页面中使用具有特定类名的视图(例如image-gallery)时,我需要包括特定的JavaScript和CSS。

Answers:


40

您可以使用template_preprocess_views_view()挂钩执行此操作:

function THEME_preprocess_views_view(&$vars) {
  $view = &$vars['view'];
  // Make sure it's the correct view
  if ($view->name == 'your-view-name') {
    // add needed javascript
    drupal_add_js(drupal_get_path('theme', 'your-theme') . '/your-js.js');
    // add needed stylesheet
    drupal_add_css(drupal_get_path('theme', 'your-theme') . '/your-css.css');
  }
}

请注意,您还可以使用以下方法检查视图的特定显示:

if ($view->name == 'your-view-name' && $view->current_display == 'your-display-id') {
  // include javascript & css here
}

您应该能够像这样检查自定义的CSS类:

if ($view->name == 'your-view-name' && $view->display[$view->current_display]->display_options['css_class'] == 'your-css-class') {
   // include javascript & css here
}

非常感谢,但是此功能通过名称识别视图,我想识别类名称,因为一页中有多个具有相同类名的视图。例如2个视图具有“ gallery-image”类名称,而3个视图具有“ light-box”类名称。例如,如果页面中具有“ light-box” css类名的视图可用,我想添加js。
Mehrdad201

您不能只查看显示吗?if($view->name == 'your-view-name' && $view->display_id == 'your-display-id')
Cyclonecode

否,因为尚不清楚页面中有多少视图可用。也许有10个视图,它们都具有相同的CSS类名称。
Mehrdad201 2012年

我实现了此钩子并刷新了所有缓存-但没有被调用。不知道为什么。是的,我仔细检查了名字。
jdhildeb '16

看起来很奇怪?您已用实际主题的名称替换了THEME?只要正确实现,它就可以正常工作。
Cyclonecode

8

您可以使用views_get_page_view函数来确定页面上正在提供哪个视图。它返回视图对象。请注意,在下面的代码段中,您应该将其与Views机器可读名称进行比较,但是当然您可以根据views_get_page_view返回的view对象编写自己的比较

function YOURTHEMENAME_preprocess_page(&$variables) {
    $view = views_get_page_view();
    if($view->name == 'YOURVIEW') {
    //Do what ever you want 
    }

6

以防万一这对陷入困境的其他人很有用,就像我为将JavaScript附加到Drupal View一样进行搜索。对于D7和Views 3.7,以下对我来说效果最好:

function HOOK_views_pre_render ( &$view ) { 
  /// check to make sure the view has a classname
  if ( $view->display_handler && !empty($view->display_handler->options['css_class']) ) {
    $cln = $view->display_handler->options['css_class'];
    $cls = 'CLASS GOES HERE';
    /// test that the classname contains our class
    if ( preg_match('/(^|\s+)' . preg_quote($cls) . '(\s+|$)/i', $cln) ) {
      /// build the path to the js, which is local to my module, js/view.js
      $sep = DIRECTORY_SEPARATOR;
      $dir = rtrim(drupal_get_path('module', 'HOOK'), $sep);
      $pth = "{$dir}{$sep}js{$sep}view.js";
      drupal_add_js($pth);
    }
  }
}

这很有益,因为我想将代码保留在模块中而不是主题中,因为JavaScript带来的增强与外观无关。

注意:显然HOOK,在两个位置上都应该用模块名称CLASS GOES HERE替换,也应该用要搜索的类替换。


为了清楚起见,为什么pre_render优于pre_process?
尼克

@Nick〜没有HOOK_views_pre_processapi.drupal.org/api/views/views.api.php/7),除非您的意思是要使用它的原因THEME_preprocess_views_view-在这种情况下,这只是出于偏爱您希望添加代码修改。HOOK_views_pre_render可以从模块中挂钩,而THEME_preprocess_views_view应该放在主题/模板文件中。HOOK_views_post_render如果愿意,也可以使用。
Pebbl 2014年

抱歉,我的意思是THEME_preprocess_views_view,是的。我确定我hook_preprocess_views_view之前在模块中都做过。
尼克

4

如果您使用的是drupal 6或7,则还可以在模块上下文添加资产中包含javascript资产。确实需要上下文,但是您将放心确保在渲染视图时始终将其包括在内。

https://drupal.org/project/context_addassets

从模块的项目页面:

您是否曾经想过在渲染特定视图或块时包含javascript或CSS?还是您曾经想只在首页中包含javascript或CSS,而无需编写代码?

上下文添加资产允许您执行此操作。它具有易于使用的UI,可让您无需编写任何代码即可完成所有操作。因为它使用ctools,所以所有这些都可以导出。


2

编写使用jQuery的hasClass()在视图中搜索特定类的JavaScript代码,并在满足条件时包含您的JavaScript文件。

另一种方法是为您的视图放置一个模板,然后使用drupal_add_js()通过该模板添加JavaScript代码。


你能告诉我,我该怎么做。的确,在Java脚本中的条件表达式之后如何包含CSS和js文件是正确的??!
Mehrdad201

对于Drupal 8,此答案概述了如何为视图输出制作自定义视图模板以实现此目的:stackoverflow.com/a/43131240/227926
therobyouknow
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.