Làm cách nào để thêm plugin Jquery vào Drupal?

Tôi có nên dán mã vào tệp mẫu chính không, hoặc có cách nào khác được đề xuất để đính kèm các plugin Jquery mới trong Drupal 7 không?

Cách dễ nhất là chỉ cần thêm nó vào tệp .info của chủ đề của bạn:

scripts[] = js/my_jquery_plugin.js

Ngoại lệ duy nhất là nếu bạn đang thêm một tài nguyên bên ngoài (CDN / tập lệnh được lưu trữ), trong trường hợp đó bạn nên sử dụng drupal_add_js (), như được giải thích bởi Jamie Hollern

Drupal có Jquery đóng gói với nó.

Để thêm tệp js, bạn có thể sử dụng drupal_add_js theo cách được giải thích trong các bài đăng khác.

Điều này sẽ hoạt động trong các trường hợp đơn giản, nhưng nếu bạn bắt đầu có các plugin phụ thuộc vào các plugin khác. bạn có thể muốn nhìn vào thư viện api . Tôi hy vọng các mô-đun thời gian sẽ được tạo để hỗ trợ các thư viện phổ biến, có một số cho JQuery ui được tích hợp trong xem system_l Library () .

Trong ví dụ này để bao gồm mô đun jQuery ui.accordion, bạn có thể sử dụng drupal_add_l Library ()

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

Điều này sẽ đảm bảo js được bao gồm cùng với CSS và bất kỳ thư viện nào phụ thuộc vào nó. Nó cũng sẽ đảm bảo rằng các thư viện chỉ được bao gồm một lần.

Nếu bạn nói thư viện nào bạn đang sử dụng, tôi có thể cung cấp mã mẫu để biết cách xác định thư viện

Vì vậy, trước tiên hãy tạo một mô-đun để xác định thư viện (gọi nó là qtip) và tải mô-đun lên thư mục js bên dưới thư mục mô-đun

sau đó triển khai hook_l 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;
}

Sau đó, để thêm tập tin vào mã của bạn

drupal_add_library('qtip', 'qtip');

Điều này có thể là quá mức cần thiết cho một thư viện đơn giản nhưng nếu bạn phải quản lý một số lượng lớn các thư viện trên nhiều trang web và chủ đề thì nó sẽ làm cho cuộc sống dễ dàng hơn nhiều.

Nếu bạn chỉ muốn tải tập lệnh trên một số trang (không phải tất cả), bạn có thể thêm tập lệnh vào tệp template.php của mình. Chỉ cần thêm mã tương tự như thế này:

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');
 }
}

Tôi chỉ thử nghiệm điều này trong Drupal 6.

Bạn có thể thêm tệp JavaScript vào chủ đề bạn sử dụng trong trang web Drupal, bằng cách thêm một script[] =dòng trong tệp .info của chủ đề bạn đang sử dụng. Tôi sẽ chỉ xem xét trường hợp này nếu bạn đang sử dụng một chủ đề tùy chỉnh hoặc phiên bản sửa đổi của một chủ đề hiện có đã được đổi tên; Tôi sẽ không đề xuất làm điều đó nếu bạn đang sử dụng, ví dụ, Garland. Làm điều đó trong những trường hợp như vậy có nghĩa là mất tất cả các thay đổi trong tất cả các lần chủ đề được cập nhật hoặc sao chép các tệp chủ đề được cập nhật, sau đó áp dụng lại các thay đổi tương tự được áp dụng cho phiên bản trước của tệp; nếu thay đổi chỉ thêm một script[]dòng, thì thay đổi là tối thiểu và có thể đáng để thực hiện, nhưng điều đó cũng có nghĩa là các tệp JavaScript không được thêm vào trong thư mục chứa các tệp chủ đề hoặc bạn nên thêm các tệp JavaScript mỗi thời gian chủ đề được cập nhật.

Thay vào đó, bạn có thể tạo một mô-đun tùy chỉnh hoặc thêm mã vào mô-đun tùy chỉnh hiện có mà bạn đang sử dụng cho trang web đó.
Điểm nổi bật là các tệp JavaScript sẽ được thêm vào mọi chủ đề được đặt làm mặc định hoặc chủ đề quản trị mà không cần thay đổi tất cả các chủ đề được bật trên trang web và người dùng có thể tự chọn.

Như đã báo cáo trong một câu trả lời khác, hook_init()là cái móc bạn nên thực hiện. Tôi sẽ thêm đó hook_library()là hook mới được thêm vào trong Drupal 7 cho các tệp Javascript như các trình cắm thêm jQuery.

Bạn có thể sử dụng mô-đun Js Injection để thêm tập lệnh trực tiếp vào bảng quản trị Drupal. Ngoài ra, bạn có thể sử dụng hàm drupal_add_js () để thêm tệp js vào trang của mình.

Bạn có thể tạo một mô-đun tùy chỉnh đơn giản và thêm nó theo cách đó. Mã này sẽ tương tự như sau:

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

Bạn chỉ có thể sử dụng trong YOURTHEME_preprocess_theme()nếu bạn muốn áp dụng điều kiện logic:

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

và thêm vào trong tập tin yourtheme.info:

scripts[] = js/yourplugin.js

Nếu bạn đang sử dụng mô-đun Ngữ cảnh, hãy cài đặt Ngữ cảnh Thêm tài sản. Thiết lập bối cảnh toàn cầu hoặc bối cảnh cụ thể và thêm phản ứng mới để thêm nội dung JS theo đường dẫn hoặc theo mô-đun.

Không cần mã hóa.

Có rất nhiều thư viện bên ngoài cần được đưa vào ngày nay.

Đặt tất cả chúng trong thư mục js của chủ đề không phải lúc nào cũng được mong muốn vì đôi khi các thư viện đó bao gồm nhiều tệp js và nhiều tệp css.

Tôi đã kết thúc bằng cách sử dụng libraries_get_pathchức năng của mô-đun thư viện để lấy đường dẫn của chúng từ thư mục của trang web / all / library:

Đây là cách tôi đã thêm các tệp đã chọn liên quan đến 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");
  }

} ?>

Tôi rất muốn nghe nếu có một kho lưu trữ bên ngoài trong đó tất cả các thư viện đó được xác định trước vì vậy tôi sẽ không phải xác định chúng theo cách thủ công.

Tôi khuyên bạn nên tải jQuery từ Google CDN con rối. Kiểm tra liên kết này để biết thêm thông tin: http://code.google.com.vn/apis/lologists/devguide.html#jquery. Hãy đảm bảo bạn không tải cùng một tập lệnh nhiều lần trong trang web của mình.

đây là những gì làm việc cho tôi, không cần phải tạo mô-đun cho plugin jQuery hoặc cài đặt một cái - trong template.php của tôi. Tôi đã thêm:

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',
    );

}

một cách khác là thêm mã sau vào tệp page.tpl.php
drupal_add_js (drupal_get_path ('theme', 'path / to / your / plugin'). '/plugin.js', 'file');