it-swarm.asia

كيفية إضافة البرنامج المساعد Jquery إلى دروبال؟

هل يجب علي لصق الشفرة في ملف النموذج الرئيسي فقط ، أم أن هناك أي طريقة أخرى موصى بها لإرفاق مكونات Jquery الإضافية في Drupal 7؟

18
Vonder

إن أسهل طريقة هي فقط لإضافتها في ملف .info الخاص بموضوعك:

scripts[] = js/my_jquery_plugin.js

الاستثناء الوحيد هو إذا كنت تضيف موردًا خارجيًا (CDN/نص برمجي مستضاف) ، وفي هذه الحالة يجب عليك استخدام drupal_add_js () ، كما هو موضح بواسطة Jamie Hollern

15
Alex Weber

دروبال يحزم 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');

قد يكون هذا مبالغة في مكتبة بسيطة ولكن إذا كان عليك إدارة عدد كبير من المكتبات عبر مواقع ومواضيع متعددة ، فهذا يجعل الحياة أسهل بكثير.

12
Jeremy French

إذا كنت ترغب في تحميل البرنامج النصي فقط على بعض الصفحات (وليس كلها) ، يمكنك إضافته من خلال ملف 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.

5
Nebojsa

يمكنك استخدام Js Injector الوحدة النمطية لإضافة البرامج النصية مباشرةً في Drupal. وبدلاً من ذلك يمكنك استخدام drupal_add_js () لإضافة الوظيفة js ملف إلى صفحتك.

3
Shabir A.

يمكنك إضافة ملف JavaScript إلى السمة التي تستخدمها في Drupal ، عن طريق إضافة سطر script[] = في ملف .info للسمة التي تستخدمها. أود أن هذه الحالة فقط إذا كنت تستخدم سمة مخصصة ، أو نسخة معدلة من سمة موجودة تمت إعادة تسميتها ؛ لا أقترح القيام بذلك إذا كنت تستخدم ، على سبيل المثال ، Garland. يعني القيام بذلك في مثل هذه الحالات أن تفقد جميع التغييرات في جميع الأوقات التي يتم فيها تحديث السمة ، أو لنسخ ملفات السمة المحدثة ، ثم إعادة تطبيق نفس التغييرات المطبقة على الإصدار السابق من الملفات ؛ إذا كان التغيير يضيف فقط سطر script[] ، التغيير ضئيل ، وقد يكون من المفيد القيام به ، ولكنه قد يعني أيضًا عدم إضافة ملفات JavaScript في الدليل الذي يحتوي على ملفات السمة ، أو يجب عليك إضافة ملفات JavaScript في كل مرة يتم فيها تحديث السمة.

كبديل ، يمكنك إنشاء وحدة مخصصة ، أو إضافة رمز إلى وحدة مخصصة موجودة تستخدمها بالفعل لهذا الموقع.
المحترف هو أن ملفات JavaScript ستتم إضافتها إلى كل سمة يتم تعيينها كموضوع افتراضي ، أو سمة إدارة ، دون الحاجة إلى تغيير جميع السمات التي تم تمكينها على الموقع ، والتي يمكن للمستخدمين تحديدها بأنفسهم.

كما ورد بالفعل في إجابة أخرى ، hook_init() هي الخطاف الذي يجب تنفيذه. سأضيف أن hook_library() هو الخطاف الجديد المضاف في Drupal 7 لملفات جافا سكريبت مثل jQuery plug-ins.

3
kiamlaluno

يمكنك إنشاء وحدة مخصصة بسيطة وإضافتها بهذه الطريقة. سيكون الرمز مشابهًا لما يلي:

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

يمكنك ببساطة الاستخدام في YOURTHEME_preprocess_theme() إذا كنت تريد تطبيق الشرط المنطقي:

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

وأضف أيضًا في ملف yourtheme.info:

scripts[] = js/yourplugin.js

1
gbwebservice

إذا كنت تستخدم وحدة السياق ، فقم بتثبيت السياق إضافة أصول. يمكنك إعداد سياق عالمي أو سياق محدد وإضافة تفاعل جديد لإضافة مادة عرض JS حسب المسار أو الوحدة.

لا يلزم الترميز.

1
ebeyrent

هناك العديد من المكتبات الخارجية التي يجب تضمينها في الوقت الحاضر.

إن وضعهم جميعًا في دليل js للموضوع ليس مرغوبًا دائمًا لأن هذه المكتبات تتكون أحيانًا من ملفات js متعددة وملفات css متعددة.

انتهى بي الأمر باستخدام libraries_get_path وظيفة وحدة المكتبات لأخذ مساراتها من المواقع/الكل/مكتبات dir:

إليك كيفية إضافة الملفات المحددة التي تتعلق بـ 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");
  }

} ?>

أود أن أسمع ما إذا كان هناك مستودع خارجي يتم فيه تحديد جميع هذه المكتبات مسبقًا لذلك لن أضطر إلى تعريف كل منها يدويًا.

1
Druvision

هذا ما نجح معي ، لا حاجة لإنشاء وحدة نمطية لمكوّن jQuery الإضافي أو تثبيت واحد - في نموذجي. 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',
    );

}
0
David Moldenhauer

أنصحك بتحميل jQuery من شبكة Google CDN العامة. تحقق من هذا الرابط لمزيد من المعلومات: http://code.google.com/apis/libraries/devguide.html#jquery . تأكد فقط من عدم تحميل نفس البرنامج النصي عدة مرات في موقعك .

0
ANDiTKO