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ファイル、情報ファイルに配置する必要があることを読んでいます。

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

何かアドバイス？

どうもありがとう！

themingblocksjavascript
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