web-dev-qa-db-ja.com

ビューに固有のJavaScriptを追加するにはどうすればよいですか？

サイトに特定のクラス名を持つビューがあります。テーマのtemplate.phpファイル内で、特定のクラス名のビューがリクエストされたページで使用できるかどうかを知りたいのですが。

特定のクラス名（image-galleryなど）のビューがページで使用される場合、特定のJavaScriptおよびCSSを含める必要があるため、これは私にとって非常に重要です。

viewsthemingjavascript
29
Mehrdad201

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
}
42
Cyclonecode

Views_get_page_view関数を使用して、ページで提供されているビューを確認できます。ビューオブジェクトを返します。以下のコードスニペットでは、ビューの機械可読名と比較する必要がありますが、もちろん、views_get_page_viewによって返されるビューオブジェクトに基づいて独自の比較を書くこともできます。

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

これがこの質問に出くわした誰かに役立つ場合に備えて、JavaScriptをDrupal ViewD7＆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も、検索するクラスに置き換える必要があります。

6
Pebbl

drupal 6または7を使用している場合は、javascriptアセットをモジュールコンテキスト追加アセットに含めることもできます。これには、コンテキストが必要ですが、残りの場合は、ビューがレンダリングされています。

https://drupal.org/project/context_addassets

モジュールのプロジェクトページから：

特定のビューまたはブロックがレンダリングされているときにjavascriptまたはcssを含めたいと思ったことはありますか？または、コードを記述せずにフロントページのみにJavaScriptまたはCSSを含めたいと思ったことはありませんか？

コンテキスト追加アセットにより、これを行うことができます。使いやすいUIを備えているため、コードを記述せずにすべてを実行できます。 ctoolsを使用しているため、これもすべてエクスポート可能です。

4
chrisjlee

JQueryの hasClass（） を使用して、ビュー内の特定のクラスを検索するJavaScriptコードを記述し、条件が満たされたときにJavaScriptファイルを含めます。

もう1つの方法は、ビューのテンプレートを配置し、そのテンプレートから drupal_add_js（） を使用してJavaScriptコードを追加することです。

2
niksmac