Drupal 8 - JQuery-ui 在自定义模块中实现手风琴或选项卡

Question

在 Drupal 8 中，手风琴或选项卡元素如何在自定义模块中实现...例如：

已设置自定义模块（包括文件夹结构）...模块中的内容函数正在渲染数组中输出以下html（基本上推HTML 通过使用 'array('#type'=>'markup',"#markup'=>$[= 在将附加到渲染数组的数组上创建手风琴元素47=])' 等代码确实出现在 HTML 页面中 ):

        array_push($strn,"<div id=".chr(22)."accordion".chr(22).">");
            array_push($strn,"<h3>Section 1</h3>");
                array_push($strn,"<div>");
                    array_push($strn,"<p>");
                        array_push($strn,"data");
                    array_push($strn,"</p>");
                array_push($strn,"</div>");
            array_push($strn,"<h3>Section 2</h3>");
                array_push($strn,"<div>");
                    array_push($strn,"<p>");
                        array_push($strn,"data");
                    array_push($strn,"</p>");
                array_push($strn,"</div>");
            array_push($strn,"<h3>Section 3</h3>");
                array_push($strn,"<div>");
                    array_push($strn,"<p>");
                        array_push($strn,"data");
                    array_push($strn,"</p>");
                array_push($strn,"</div>");
        array_push($strn,"</div>");

模块本身工作并渲染HTML

附加 javascript 文件已通过 <>.libraries.yml 加载并包含以下代码：

(function($) {
$(document).ready(function() {
    $("#accordion").accordion();
});})(jQuery);

...它加载了 javascript 文件，因为我检查了页面的 html 并且文件在那里并且还添加了以下行 "window.alert("LOADED BESPOKE JS SCRIPT！”） ;"执行成功

3A) 为了清楚起见，我在 <>.libraries.yml 文件中添加了以下代码：

dataAnalytics.jqui:
  version: VERSION
  header: true
  css:
    theme:
      css/test.css: {}
      css/jquery-ui.css: {}
  js:
    libraries/js/bespokescript1.js: {}
  dependencies:
    - core/jquery
    - core/jquery.ui.accordion

4) 即使按如下方式尝试javascript（注：alert命令正确执行，但是$("#accordian").accordion();没有效果，虽然alert命令运行):

$(function ($) {
//add drupal 7 code
Drupal.behaviors.myfunction = {
    attach: function(context, settings) {
    //end drupal calls

    //some jquery goodness here...
        $( "#accordion" ).accordion( {
            header: "li",
            collapsible: true
        } );

        alert("search_results.js properly loaded");
    }
}
});

问题：手风琴元素不会呈现为手风琴，就像标准 HTML 文本一样，例如JQuery 位未被执行

Answer 1

您的代码的一些注释。如果你想在你的模块中使用 Drupal，把这个

- core/drupal.ajax
- core/drupal
- core/drupalSettings

进入 dependencies 下的 MODULE.libraries.yml。或者至少 core/drupal。这表示你的东西需要 drupal，所以它会在你的脚本之前加载它。这是必要的，因为 drupal 8 不会加载库，如果 modules/themes 的 none 需要它！这点要注意。

使用这个，而不是在第 4 点中使用：

(function ($, Drupal) {
    //add drupal 7 code
    Drupal.behaviors.myfunction = {
        attach: function(context, settings) {
        //end drupal calls

        //some jquery goodness here...
            $( "#accordion" ).accordion( {
                header: "li",
                collapsible: true
            } );

            alert("search_results.js properly loaded");
        }
    }
})(jQuery, Drupal);

如果您不想使用 Drupal，只需从那里删除即可。如果您也使用其他东西，请在此处添加。这是某种 Drupal 8 标准，在 core 目录下搜索 Drupal.behaviors，你会发现很多示例。

Drupal 8 - JQuery-ui 在自定义模块中实现手风琴或选项卡

Drupal 8 - JQuery-ui implementing accordion or tabs in custom module

drupal

jquery-ui

drupal-8