Drupal에 Jquery 플러그인을 추가하는 방법?

주 템플릿 파일에 코드를 붙여 넣거나 Drupal 7에 새로운 Jquery 플러그인을 첨부하는 다른 권장 방법이 있습니까?

가장 쉬운 방법은 테마의 .info 파일에 추가하는 것입니다.

scripts[] = js/my_jquery_plugin.js

외부 리소스 (CDN / 호스트 스크립트)를 추가하는 경우에는 예외가 있습니다.이 경우 Jamie Hollern의 설명에 따라 drupal_add_js ()를 사용해야합니다

Drupal은 Jquery와 함께 제공됩니다.

js 파일을 추가하기 위해 다른 게시물에 설명 된 방식으로 drupal_add_js를 사용할 수 있습니다.

이것은 간단한 경우에 작동하지만 다른 플러그인에 의존하는 플러그인이 시작되면. 라이브러리 api 를보고 싶을 수도 있습니다 . 나는 인기있는 라이브러리를 지원하기 위해 모듈이 만들어 질 것으로 예상합니다 .JQuery UI에는 system_library () 참조가 있습니다. .

이 예제에서는 jQuery ui.accordion 모듈을 포함 시키기 위해 drupal_add_library ()를 사용할 수 있습니다

drupal_add_library('system', 'ui.accordion');

그러면 js가 CSS 및 이에 의존하는 라이브러리와 함께 포함됩니다. 또한 라이브러리가 한 번만 포함되도록해야합니다.

사용중인 라이브러리를 말하면 그것을 정의하는 방법에 대한 샘플 코드를 제공 할 수 있습니다

먼저 라이브러리를 정의하는 모듈을 작성하고 (qtip이라고 함) 모듈을 모듈 폴더 아래의 js 폴더에 업로드하십시오.

그런 다음 hook_library () 를 구현 하십시오.

function qtip_library() (
 $libraries['qTip'] = array(
    'title' => 'qTip', 
    'website' => 'http://craigsworks.com/projects/qtip/docs/', 
    'version' => '1.0.0-rc3', 
    'js' => array(
      drupal_get_path('module', 'qtip') . '/js/jquery.qtip-1.0.0.min.js' => array(),
    ),
    'dependencies' => array(
      array('system', 'jquery'),
    ),
  );
  return $libraries;
}

그런 다음 코드에 넣은 파일을 추가하십시오.

drupal_add_library('qtip', 'qtip');

이것은 단순한 라이브러리에는 과잉 일 수 있지만 여러 사이트와 테마를 통해 많은 수의 라이브러리를 관리해야하는 경우 훨씬 쉽게 사용할 수 있습니다.

일부 페이지에만 스크립트를로드하려는 경우 template.php 파일을 통해 추가 할 수 있습니다. 다음과 비슷한 코드를 추가하십시오.

function YourTheme_preprocess_node(&$variables) {

 $node = $variables['node'];
if (!empty($node) && ($node->nid == 983)
 // here you can esily add more pages
) {

drupal_add_js('sites/all/libraries/jquery.ui/ui/ui.core.js');
drupal_add_js('sites/all/libraries/jquery.ui/ui/jquery-ui-1.7.3.custom.js');
drupal_add_js('sites/all/libraries/jquery.ui/ui/ui.progressbar.js');

drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.progressbar.css');
drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.core.css');
drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.theme.css');
 }
}

Drupal 6에서만 테스트했습니다.

사용중인 테마 script[] =의 .info 파일에 줄 을 추가하여 Drupal 사이트에서 사용하는 테마에 JavaScript 파일을 추가 할 수 있습니다 . 사용자 정의 테마 또는 이름이 바뀐 기존 테마의 수정 된 버전을 사용하는 경우에만이 경우를 고려합니다. 예를 들어 Garland를 사용하는 경우에는 권장하지 않습니다. 이러한 경우에는 테마가 업데이트 될 때마다 모든 변경 사항을 잃거나 업데이트 된 테마 파일을 복사 한 후 이전 버전의 파일에 적용된 동일한 변경 사항을 다시 적용해야합니다. 변경 사항이script[] 줄만 경우 변경 사항이 최소화되고 그만한 가치가 있지만 테마 파일이 포함 된 디렉토리에 JavaScript 파일이 추가되지 않았거나 JavaScript 파일을 모두 추가해야 함을 의미합니다. 테마가 업데이트되는 시간.

또는 사용자 지정 모듈을 만들거나 해당 사이트에 이미 사용중인 기존 사용자 지정 모듈에 코드를 추가 할 수 있습니다.
전문가는 사이트에서 활성화 된 모든 테마를 변경할 필요없이 모든 테마에 JavaScript 파일이 기본 또는 관리 테마로 추가되며 사용자가 직접 선택할 수 있다는 것입니다.

다른 답변에서 이미보고했듯이 hook_init()구현해야 할 후크입니다. 나는이 추가됩니다 hook_library()jQuery를 플러그인과 같은 자바 스크립트 파일 드루팔 7에 추가 된 새로운 후크입니다.

Js Injector 모듈을 사용 하여 Drupal 관리자 패널에서 직접 스크립트를 추가 할 수 있습니다 . 또는 drupal_add_js () 함수를 사용 하여 js 파일을 페이지에 추가 할 수 있습니다 .

간단한 사용자 정의 모듈을 만들어서 추가 할 수 있습니다. 코드는 다음과 유사합니다.

MYMODULE_init() {
  drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/FILE.js');
}

YOURTHEME_preprocess_theme()논리 조건을 적용하려는 경우 간단히 사용할 수 있습니다 .

drupal_add_js(drupal_get_path('theme','your_theme').'/js/yourplugin.js');

yourtheme.info 파일에도 추가하십시오.

scripts[] = js/yourplugin.js

컨텍스트 모듈을 사용하는 경우 컨텍스트 추가 자산을 설치하십시오. 글로벌 컨텍스트 또는 특정 컨텍스트를 설정하고 경로 또는 모듈별로 JS 자산을 추가하는 새로운 반응을 추가하십시오.

코딩이 필요하지 않습니다.

요즘 포함해야 할 많은 외부 라이브러리가 있습니다.

때로는 해당 라이브러리가 여러 개의 js 파일과 여러 개의 css 파일로 구성되므로 테마의 js 디렉토리에 모두 배치하는 것이 항상 바람직한 것은 아닙니다.

libraries_get_path라이브러리 모듈 의 기능을 사용하여 sites / all / libraries 디렉토리에서 경로를 가져 왔습니다.

textext.js와 관련된 선택된 파일을 추가 한 방법은 다음과 같습니다.

<?php 
function MYMODULE_init() {

  // Add jQuery library to a specific page.
  if (arg(0) == 'messages' && arg(1) == 'new') {
    // Add the jQuery TextExt library ( http://textextjs.com/ )
    $libdir = libraries_get_path('jquery-textext');
    drupal_add_js("$libdir/src/js/textext.core.js");
    drupal_add_js("$libdir/src/js/textext.core.js");
    drupal_add_js("$libdir/src/js/textext.plugin.tags.js");
    drupal_add_js("$libdir/src/js/textext.plugin.autocomplete.js");
    drupal_add_js("$libdir/src/js/textext.plugin.suggestions.js");
    drupal_add_js("$libdir/src/js/textext.plugin.filter.js");
    drupal_add_js("$libdir/src/js/textext.plugin.focus.js");
    drupal_add_js("$libdir/src/js/textext.plugin.prompt.js");
    drupal_add_js("$libdir/src/js/textext.plugin.ajax.js");
    drupal_add_js("$libdir/src/js/textext.plugin.arrow.js");

    drupal_add_css("$libdir/src/css/textext.core.css");
    drupal_add_css("$libdir/src/css/textext.plugin.tags.css");
    drupal_add_css("$libdir/src/css/textext.plugin.autocomplete.css");
    drupal_add_css("$libdir/src/css/textext.plugin.focus.css");
    drupal_add_css("$libdir/src/css/textext.plugin.prompt.css");
    drupal_add_css("$libdir/src/css/textext.plugin.arrow.css");
  }

} ?>

모든 라이브러리가 미리 정의 된 외부 저장소가 있는지 듣고 싶습니다. 따라서 각 라이브러리를 수동으로 정의 할 필요가 없습니다.

공공 Google CDN에서 jQuery를로드 할 것을 권장합니다. 자세한 내용은 다음 링크를 확인하십시오. http://code.google.com/apis/libraries/devguide.html#jquery 사이트에서 동일한 스크립트를 여러 번로드하지 않도록하십시오.

이것은 나를 위해 일한 것입니다 .jQuery 플러그인 용 모듈을 만들거나 설치할 필요가 없습니다. 내 template.php에 추가했습니다.

function YOURTHEME_js_alter(&$javascript){
    // overwriting for newer jQuery version
    $javascript['misc/jquery.js']['data'] = path_to_theme() . '/assets/js/jquery-1.9.0.js';
    // also the min...
    $javascript['misc/ui/jquery.ui.core.min.js']['data'] = path_to_theme() . '/assets/js/jquery-ui-1.10.0.custom.min.js';
    // here I add the library (jQuery plugin) to resolve an error -> $.browser.msie undefined
    $javascript[path_to_theme() . '/assets/js/jquery-migrate-1.1.0.min.js'] = array(   
        "group" => -100,
        "weight" => -18.990,
        "version" => "1.1.0",
        "every_page" => true,
        "type" =>   "file",
        "scope" => "header",
        "cache" => true,
        "defer" => false,
        "preprocess" => true,
        "data" =>  path_to_theme() . '/assets/js/jquery-migrate-1.1.0.min.js',
    );

}

또 다른 방법은 page.tpl.php 파일에 다음 코드를 추가하는 것입니다
drupal_add_js (drupal_get_path ( 'theme', 'path / to / your / plugin'). '/plugin.js', 'file');