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


26

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

特定のクラス名を持つビュー(イメージギャラリーなど)がページで使用される場合、特定のJavaScriptとCSSを含める必要があるため、これは私にとって非常に重要です。

回答:


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
}

どうもありがとうございますが、この関数は名前でビューを認識します。同じクラス名を持つ1つのページに複数のビューがあるため、クラス名を認識したいと思います。たとえば、2つのビューには「gallery-image」クラス名があり、3つのビューには「light-box」クラス名があります。たとえば、「ライトボックス」CSSクラス名を持つビューがページで使用可能な場合、jsを追加します。
Mehrdad201

ディスプレイだけをチェックすることはできませんか?if($view->name == 'your-view-name' && $view->display_id == 'your-display-id')
Cyclonecode

いいえ。ページで使用可能なビューの数が明確ではないためです。たぶん、それらのすべてが同じcssクラス名を持つ10個のビューがありました。
Mehrdad201

このフックを実装し、すべてのキャッシュをフラッシュしましたが、呼び出されませんでした。理由はわかりません。はい、名前を再確認しました。
jdhildeb

それは非常に奇妙に思えますか?テーマを実際のテーマの名前に置き換えましたか?これは、正しく実装する限り問題なく機能するはずです。
Cyclonecode

8

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 
    }

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よりも優れていたのですか?
ニック14年

@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 14年

申し訳ありませんが、THEME_preprocess_views_viewそうです...はい...私はhook_preprocess_views_view以前にモジュールで行ったことがあると確信しています。
ニック14年

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スクリプトの条件式がtrueの後にcssファイルとjsファイルを含めるにはどうすればよいですか??!
Mehrdad201

:Drupalの8のために、この答えは、ビューの出力がこれを行うためのカスタムビューテンプレート作成する方法について説明しstackoverflow.com/a/43131240/227926
therobyouknow
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.