it-swarm-vi.com

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?

18
Vonder

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 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

15
Alex Weber

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 xem 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 xây dựng 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 bạn đang sử dụng thư viện nào, tôi có thể cung cấp mã mẫu để biết cách xác định 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 đó thực hiện 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.

12
Jeremy French

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.

5
Nebojsa

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

3
Shabir A.

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 dòng script[] = Trong tệp .info của chủ đề bạn đang sử dụng. Tôi sẽ xem xét trường hợp này chỉ khi 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ụ như Garland. Làm như vậy trong trường hợp đó có nghĩa là bị mất tất cả thay đổi tất cả các lần chủ đề được cập nhật hoặc sao chép các tệp chủ đề đã cập nhật và 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 dòng script[], 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 khi 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 đó.
[.___.] Chuyên nghiệp 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à hook bạn nên thực hiện. Tôi sẽ thêm rằng hook_library() là hook mới được thêm vào Drupal 7 cho các tệp Javascript như trình cắm jQuery.

3
kiamlaluno

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

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

1
gbwebservice

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.

1
ebeyrent

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_path chức năng của mô-đun thư viện để lấy đường dẫn của chúng từ các trang web/all/library dir:

Đâ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.

1
Druvision

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

}
0
David Moldenhauer

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 chắc chắn rằng 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 .

0
ANDiTKO