Drupal 6 到 7：在表单中添加 jquery 函数答案

【问题标题】：Drupal 6 to 7: add jquery function to formDrupal 6 到 7：在表单中添加 jquery 函数
【发布时间】：2018-07-11 22:38:29
【问题描述】：

我需要将代码从 Drupal 6 转换为 Drupal 7，但在 jquery 部分卡住了。在Drupal 6中，添加jquery的代码如下，其中simpleColor是jquery.simple-color.min.js中的一个函数：

drupal_add_js(drupal_get_path('module', 'module_name') . '/js/jquery.simple-color.min.js', 'module', 'header', FALSE, FALSE, FALSE);

$jquery = '
  $(document).ready(function() {
    $(".simple_color").simpleColor({
      displayColorCode: true,
      boxWidth: "6em",
      defaultColor: "#36c",
    });
  });';

drupal_add_js($jquery, 'inline');

simple_color 已添加到表单中：

$form['feeds']["feed_$fid"]['color'] = array(
  '#title' => t('Color'),
  '#type' => 'textfield',
  '#size' => 10,
  '#attributes' => array(
    'class' => 'simple_color',
  ),
);

我曾尝试将上述代码转换为 Drupal 7 但不成功：

drupal_add_js(drupal_get_path('module', 'module_name').'/js/jquery.simple-color.min.js', array('type'=>'module', 'scope'=>'header', 'defer'=>FALSE, 'cache'=>FALSE, 'preprocess'=>FALSE));

$jquery = '
  jQuery(document).ready(function() {
    $(".simple_color").simpleColor = {
      attach: function({
        displayColorCode: true,
        boxWidth: "6em",
        defaultColor: "#36c"
    })
  };
});';

drupal_add_js($jquery, array('type'=>'inline'));

形式：

$form['feeds']["feed_$fid"]['color'] = array(
  '#title' => t('Color'),
  '#type' => 'textfield',
  '#size' => 10,
  '#attributes' => array(
    'class' => array('simple_color'),
  ),
);

我尝试了很多方法，但它们都不适用于这种情况。请花点时间看看并尝试帮助我。先谢谢了。

【问题讨论】：

您的代码在哪里添加？在一个钩子里？您应该使用 drupal 行为而不是 document.ready。请参阅文档：drupal.org/docs/7/api/javascript-api/…
@2pha：我的 drupal_add_js 代码已添加到挂钩菜单的回调函数中，该函数稍后调用 drupal_get_form，其中创建了具有类“simple_color”的表单。我会看看drupal的行为并尝试一下。无论如何，谢谢。

标签： jquery forms function drupal-7 parameter-passing

【解决方案1】：

应用 2pha 的建议，我已成功将 jquery 代码添加到 drupal。以下是 drupal 7 中的修复：

drupal_add_js(drupal_get_path('module', 'module-name') . '/js/jquery.simple-color.min.js','file');

$jquery = '
  (function($) {
  Drupal.behaviors.myBehavior = {
    attach: function (context, settings) {
      $(document).ready(function() {
        $(".simple_color").simpleColor({
          displayColorCode: true,
          boxWidth: "6em",
          defaultColor: "#36c",
        });
      });
    }
  };
  })(jQuery);';

【讨论】：