뷰에 고유 한 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
}

고마워하지만이 함수는 이름으로보기를 인식합니다. 클래스 이름이 동일한 한 페이지에 여러 개의보기가 있기 때문에 클래스 이름을 인식하고 싶습니다. 예를 들어 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

이 후크를 구현하고 모든 캐시를 플러시했지만 호출되지 않았습니다. 이유가 확실하지 않습니다. 예, 이름을 재확인했습니다.
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

이 질문에 대해 다른 사람에게 유용한 경우를 대비 하여 Drupal View에 JavaScript를 연결 하는 것처럼 검색 합니다. 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

@Nick ~ 이것을 사용하는 이유를 의미하지 않는 한 HOOK_views_pre_process( api.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 2013 년

죄송합니다. THEME_preprocess_views_view그렇습니다 hook_preprocess_views_view. 이전에 모듈에서 작업 한 것이 확실 합니다.
Nick

4

drupal 6 또는 7을 사용하는 경우 모듈 컨텍스트 추가 자산과 함께 Javascript 자산을 포함 할 수도 있습니다. 컨텍스트가 필요하지만 뷰가 렌더링 될 때 항상 포함되도록해야합니다.

https://drupal.org/project/context_addassets

모듈의 프로젝트 페이지에서 :

특정 뷰 또는 블록이 렌더링 될 때 자바 스크립트 또는 CSS를 포함하고 싶습니까? 아니면 코드를 작성하지 않고도 첫 페이지에 자바 스크립트 또는 CSS를 포함하고 싶습니까?

컨텍스트 추가 자산을 사용하면이 작업을 수행 할 수 있습니다. UI를 사용하여 코드를 작성하지 않고도이 모든 작업을 수행 할 수 있습니다. ctools를 사용하기 때문에이 모든 것도 내보낼 수 있습니다.


2

jQuery의 hasClass ()를 사용하여 뷰에서 특정 클래스를 검색하는 JavaScript 코드를 작성 하고 조건이 충족되면 JavaScript 파일을 포함하십시오.

또 다른 방법은 뷰용 템플릿을 넣고 drupal_add_js ()를 사용하여 해당 템플릿을 통해 JavaScript 코드를 추가하는 것 입니다.


내가 어떻게 말해 줄 수 있니? 실제로 자바 스크립트에서 조건부 표현식 후에 CSS와 JS 파일을 포함시키는 방법은 사실입니까 ??!
Mehrdad201

: 드루팔 8의 경우,이 대답은보기 출력이 작업을 수행하기 위해 사용자 정의보기 템플릿을 만드는 방법을 설명합니다 stackoverflow.com/a/43131240/227926
therobyouknow
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.