web-dev-qa-db-ja.com

モジュール/テーマでjQueryコードを使用するにはどうすればよいですか？

Drupal 8モジュールを通じてjQueryを使用するにはどうすればよいですか？drupal 8 Webサイトでjqueryコードを実行しようとしています。これはdivアニメーションです。ラッパー内でdivをランダムに移動します。JSファイルとCSSファイルを追加し、どちらもソースに表示されています。次に、「container」のDiv IDをhtml.html.twigに追加しました（はい、コピーしました）最初に私のテーマフォルダに）-

{%
  set body_classes = [
    logged_in ? 'user-logged-in',
    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
    node_type ? 'page-node-type-' ~ node_type|clean_class,
    db_offline ? 'db-offline',
    theme.settings.navbar_position ? 'navbar-is-' ~ theme.settings.navbar_position,
    theme.has_glyphicons ? 'has-glyphicons',
    'container',
  ]
%}

これに使用するdivも追加されました。再びhtml.html.twig

<js-bottom-placeholder token="{{ placeholder_token|raw }}"> //**Not part of my code just adding it for comparison.
   <div class='fly'>TEST DIV, IF I MOVE I'M WORKING!</div>

そのため、ファイルはソースに表示され、ソースはコンテナのdiv IDが追加されたことも示しています。

これがjQueryコードです。Drupal 8で機能するように調整したので、おそらく構文エラーが1つまたは2つあることを覚えておいてください。

$.extend(Drupal.theme, {
  animateDiv: (function() {
    ($('.fly')); }),

*問題はほぼ確実です^^^

  makeNewPosition: function ($container) {
    // Get viewport dimensions (remove the dimension of the div)
    var h = $container.height() - 10;
    var w = $container.width() - 10;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];
},

animateDiv: function ($target) {
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $target.animate({
        top: newq[0],
        left: newq[1]
    }, speed, function() {
        animateDiv($target);
    });

},

calcSpeed: function (prev, next) {

    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.23;

    var speed = Math.ceil(greatest / speedModifier);

    return speed;

}  



});

これがCSSコードです

.fly {
width: 50px;
height:50px;
background-color: red;
position:fixed;

}

それが私が試したものであり、それでもjQueryアクティビティはまだありません。問題があると思うクラス名（#divなどの代わりに.divなど）にさまざまなタイプを使用してみました。空飛ぶdivは表示されますが、スタイルが設定されておらず、jQueryはありません。何が悪いのですか？

更新：しばらくコードをいじった後、少なくともスタイルをdivに表示することができました。 jQueryはまだノーショーです。

これは同じjqueryコードではありませんが、似ており、私が望んでいるとおりです。divはページ全体に浮動します。このコードも使用してみましたが、それでも上記と同じ問題が発生します。 http://jsfiddle.net/Xw29r/15/

theming8javascript
2
Krypton

Drupal 7 and 8では、JSコードを次のようにラップする必要があります。

(function($) {
Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {

    //custom code goes here

  }
};
})(jQuery);

テストするには、JSファイル内に次のコードを挿入します。

(function($) {
Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {

    //code starts
    $("body").click(function() {
      alert("Hello World");
    });
    //code ends

  }
};
})(jQuery);

ボディをクリックすると、「hello world」という警告が表示されます。

詳しくは JavaScript API in Drupal 8 をご覧ください。

2
No Sssweat