web-dev-qa-db-ja.com

jqueryを動作させる方法Drupal 7-初心者向け

drupal 7.でjqueryを動作させる方法について、多くのチュートリアルをオンラインで読んでいます。コードと例はたくさんありますが、見つけることができないのは、どこにコードを置くかです(たぶん)ほとんどの開発者にとってそれは明らかです)

だから、私がすることは

1)新しいカスタムブロックを作成します

2)あそこからdrupal UI、コードを書いて

(function ($) {

  $(document).ready(function(){

    // jquery here

  });
})(jQuery);

3)ブロックを表示しましたが、jqueryがロードされていません。

私はこのコードをテンプレートファイル、テーマファイル、CSSファイル、情報ファイルに配置する必要があることを読んでいます。

上記のコードを適切に機能させるために、正確にどのファイルとどのパスに配置する必要があるのか​​がわかりません。

何かアドバイス?

どうもありがとう!

8
apdr

ここにいくつかのものがあります:

  1. JavaScriptとPHP=をUI経由でサイトに入力することを回避できる場合は、問題を解決する可能性があります。代替手段がない場合は問題ありませんが、次の理由があります。素晴らしいアイデア: https://drupal.stackexchange.com/a/2512/10729 (それはPHPではなくjsではなく、ほとんどの点がまだjs)。 examples モジュールには、カスタムブロックを作成する例があります。
  2. Jsを添付するために、すべてのページで必要な場合は、テーマの情報ファイルに追加できます。ただし、一部の場所でのみ必要な場合は、 drupal_add_js() を使用して、必要なページのみに配置することをお勧めします。 js動作をフォームに添付するために、フォーム項目に #attached 属性を使用することもできます。
  3. $(document).ready()を使用すると、ページが読み込まれたときにJavaScriptが起動しますが、ページがAjax経由で更新された場合、JavaScriptは再び起動しないため、新しいマークアップはJavaScriptの影響を受けませんです。これらのケースを処理するには、ドキュメント準備の代わりにdrupal behaviors を使用する必要があります。

例えば:

(function ($) {
  Drupal.behaviors.yourBehaviorName = {
    attach: function (context, settings) {
      // Do your thing here.
    }
  };
})(jQuery);

これらのページを読むことをお勧めします:
JavaScriptの管理Drupal 7
JavaScriptおよびjQueryの操作

11
rooby

。jsにこのコードのように挿入します。

(function ($) {  

  Drupal.behaviors.themename = {

    attach: function (context, settings) {            

     // All our js code here
     alert('Hello jQuery');
     // end our js code

   }

 };})(jQuery);

あなたのテーマでtemplate.php作成hook_preprocess_html次にdrupal_add_jsを使用します

function themename_preprocess_html(&$variables) {
  drupal_add_js(drupal_get_path('theme', 'themename') . '/js/your.js', array( 
    'scope' => 'footer', 
    'weight' => '15' 
  ));
}

変更テーマ名

7
sibiru

.jsファイルは次のようになります。

(function ($) {
    Drupal.behaviors.cdgi = {
        attach: function(context) {

        //your code

        }
    }
}(jQuery));

モジュールで drupal_add_js() を使用して、このファイルをDrupalに追加します。適切なリファレンス here および here

キャッシュを頻繁にクリアする;)

3
please_reboot