Question

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

已经设置了一个自定义模块（包括文件夹结构）...模块中的内容函数在渲染数组中输出以下html（基本上是推动HTML在数组上创建一个accordion元素）它将通过使用＆＃39;数组附加到渲染数组中（＆＃39; #type＆＃39; =＆gt;＆＃39;标记＆＃39;，＆＃34; #markup＆＃39; = ＆gt; $ html）＆＃39;等，代码确实出现在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文件已通过＆lt;＆gt; .libraries.yml加载，并包含以下代码：

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

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

3A）为了清楚起见，我已将以下代码添加到＆lt;＆gt; .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位没有被执行

Answer 1

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

中

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

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

使用它，而不是在第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标准，在Drupal.behaviors目录下搜索core，你会发现很多例子。

Drupal 8 - JQuery-ui在自定义模块

1 个答案: