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

【问题标题】：Drupal 8 - JQuery-ui implementing accordion or tabs in custom moduleDrupal 8 - JQuery-ui 在自定义模块中实现手风琴或选项卡
【发布时间】：2017-01-26 07:12:32
【问题描述】：

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

已设置自定义模块（包括文件夹结构）...模块中的内容函数正在渲染数组中输出以下 html（基本上将 HTML 以创建手风琴元素推到一个数组中，该数组将是通过使用 'array('#type'=>'markup',"#markup'=>$html)' 等附加到渲染数组，并且代码确实出现在 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

已通过 .libraries.yml 加载了额外的 javascript 文件并包含以下代码：

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

...它在我检查页面的 html 并且文件在那里时加载了 javascript 文件，并且还添加了以下行 "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（注意：警报命令正确执行，但$("#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 位没有被执行

【问题讨论】：

问题已解决...
问题已解决...部分问题在于 >.libraries.yml 文件中的 header:true 声明，这意味着定义手风琴的定制文件在 Drupal 之前加载。 js 文件正在加载（因此收到 ReferenceError: Drupal 错误未定义）... javascript 是 (function ($) { Drupal.behaviors.myModuleBehavior = { attach: function (context, settings) { $('#accordion').手风琴 (); } }; })(jQuery);还有行 array_push($strn,"
");已更改为删除 chr(22) 并替换为 "
"
我认为您应该发表您的评论作为答案并接受它

【解决方案1】：

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

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

进入dependencies 下的 MODULE.libraries.yml。或者至少core/drupal。这表示您的东西需要drupal，因此它会在您的脚本之前加载它。这是必要的，因为如果没有任何模块/主题需要它，drupal 8 将不会加载库！请注意这一点。

使用这个，而不是你在第四点使用：

(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，你会发现很多例子。

【讨论】：

@golddrangon007 感谢您抽出宝贵时间回答并帮助您了解您的知识，非常感谢