私のテーマで組み込みのjQuery UIを使用する


25

テーマのすべてのページでjquery UIを使用する必要があります。Drupal 7に含まれていることは知っていますが、Drupalの技術的なドキュメントを解読することはできません。これを行う唯一の方法は、template.phpファイルを使用することです。しかし、私はそのファイルを理解していないので、そのようにしないようにしています。

別の方法がありますか、またはtemplate.phpファイルを試してみるべきですか?


あなたは何をしようとしているのですか?すべてのjquery UI関数と、使用できないもの。すべてのページでカスタムJSコードを実行しますか?特定のページで実行しますか?特定のイベント?JSを実行する方法はたくさんあります。すなわち、drupal_add_js
LSU_JBob

テーマのすべてのページに表示されるいくつかのフィールドで.datepicker()を使用しようとしています。たぶん後でもっといくつかのもの。
ベン

@Ben答えがあなたの問題を解決した場合、賞金を授与することを忘れないでください。
googletorp

@googletorp申し訳ありませんが、私の最初の賞金。バウンティが授与されました。
ベン

答えの多くは最終ステップを省いているように感じます。drupal_add_library( 'system'、 'ui.button')などを含めたら、実際に呼び出すJavaScriptの行または2つをテーマに追加する必要がありますプラグイン。
ライアン価格14年

回答:


36

PHPを使用する必要がある場合でも、ページにJSを追加するのはそれほど難しくありません。

通常のJSファイルの場合、次のようなことができます

drupal_add_js($path_to_js)

ただし、DrupalはjQuery UIをライブラリに登録しているため、特定のjQuery UIプラグインのJSファイルとCSSファイルの両方を簡単に追加できます。これは次を使用して行うことができます

drupal_add_library($module, $library);

jQuery UIプラグインはすべてシステムモジュールに存在するため、次のことができます。

drupal_add_library('system', 'ui');

または

drupal_add_library('system', 'ui.accordion');

これらのプラグインの一部は、他のプラグインを使用するため、依存関係があります。Drupalはこれを非常に巧妙に処理し、必要なコンポーネントを組み込みます。

ここでjQueryプラグインの完全なリストを見ることができます。これはPHP配列としてフォーマットされますが、一般的に命名規則はui.PLUGIN-NAMEです。

すべてのページにJSを追加する必要がある場合は、前処理ページフックを追加して、そこに追加するだけです。これは、template.phpファイルでは次のようになります。

function NAME_OF_THEME_preprocess_page(&$variables) {
  drupal_add_library('system', 'ui');
  drupal_add_library('system', 'ui.accordion');
  drupal_add_library('system', 'effects.highlight');
}

ここにあるものを正確に追加しようとしました(ただし、NAME_OF_THEMEの代わりに私のテーマ名を使用)template.phpに追加しましたが、機能しませんでした。何か案は?これは私が持っているものです function nocturnal_preprocess_page(&$variables) { drupal_add_library('system', 'ui'); drupal_add_library('system', 'ui.datepicker'); }
ベン

@ben新しいフックまたはプリプロセス関数を追加するたびにキャッシュをクリアする必要があります。キャッシュをクリアしてください。また、自分で何もしないJSファイルを追加するだけなので、動作するかどうかをテストする方法も必要です。
googletorp

キャッシュをクリアしました。以前は手動で参照されたjquery UIを使用していたいくつかの日付フィールドで動作するはずです。まだデバッグ中ですが、これまでのところ何も問題は見つかりません。
ベン

@Ben最初のステップは、ソースを調べ、ファイルが含まれているかどうかを確認することです(オンになっている場合はJS集約を無効にします)
googletorp

3
@googletorp:drupal_add_library('system', 'ui');との違いについて少し詳しく教えてdrupal_add_library('system', 'ui.accordion');ください。最初のものはすべてをフェッチしていますか、それともコアだけですか?使用するプラグインごとに行が必要ですか?
ジャール

4

date_popupモジュールを試しましたか?フォームAPIでうまく機能します


モジュールが必要なフォームは非常に複雑で、カスタムコーディングが必要なので、モジュールは必要ありません。テーマのテンプレートにハードコードされています。Drupalに同梱されているjquery UIを使用する最良の方法を見つけようとしています。動作させるための唯一の方法は、テーマのフォルダーに入れてそこにリンクすることです。しかし、1つのDrupalインストールで複数のサイトを実行しており、これらすべてのサイトにjQuery UIが必要になるため、組み込みのjQuery UIを使用して重複作業を防止したかったのです。
ベン

任意のサイトから任意のjquery uiを呼び出して追加できるはずです。これはdrupalコアにあります。フォームはForm APIで構築されていますか?
LSU_JBob

2
フォームがテンプレートファイルに組み込まれているのはなぜですか?フォームAPIを使用していない場合、SQLインジェクション攻撃からの組み込みセキュリティなど、いくつかの利点を逃しています。テンプレートファイルからフォームを取り出し、Form APIを使用してフォームを作成するカスタムモジュールを作成することを強くお勧めします。カウボーイにならないようにしてください。いずれにせよ、drupal_add_js( '/ misc / ui / jquery.ui.core.min.js'、 'file');のようなdrupal_add_jsを使用して、どこからでもJavaScriptを参照できます。AND drupal_add_js( '/ misc / ui / jquery.ui.datepicker.js'、 'file');
LSU_JBob

3
Form APIを使用してカスタムモジュールでフォームを作成し、tplファイルでrender(drupal_get_form( 'form_id'))を呼び出します。おそらくカスタムJavaScriptを使用して、フォームapiが複雑な要件を処理できることを約束します。この機能をすべてtplファイルに詰め込もうとするだけで、あなたは自分で物事を難しくしているように感じます。技術的にはテーマレイヤーなので、機能的なバックエンドコードの大きなチャンクをそこに入れるのはベストプラクティスではありません。
LSU_JBob

3
私は彼が言っていると思うCREATEモジュールを。フォームなどの機能的なものはモジュールに属します。Form APIを使用すると、独自のカスタムモジュールで想像できるあらゆる種類のフォームを作成できます。ほとんどの場合、テーマは機能から独立している必要があります。これにより、今後の柔軟性が高まります。
ジョナサンローニー

4
  1. .tplファイル内のハードコーディングされたフォームをフォームAPI実装にリファクタリングします。@LSU_JBobが言ったように、FAPIを使用せずにフォームを作成する理由はありません。Form APIクイックスタートガイドを読み、Form APIリファレンスページをブックマークすることをお勧めします。
  2. フォームを構築し、値を送信したり処理したりできるようになったら、Date contribモジュールのコードをダウンロードして読み取ります。日付は、作成する日付ポップアップの種類を提供するために使用されますが、D6のCCKおよびD7のコアフィールドに使用されます。フィールドを操作するつもりはありませんが、DateモジュールはJQuery UIを使用して、ユーザーがしようとしていることを実行します。このモジュールは堅実な例を提供します。

ありがとう。これらのリンクは役に立ちます。私はPHPに入るのはあまり好きではありませんが、この場合に私がやりたいことを正確にやりたいと思います。現時点では、Drupal PHPを学ぶ時間がないので、たぶん時間のためにtplファイルに保存するだけです。しかし、みんなからの良いアドバイス。
ベン

3

googletorpこれに答えてくれてありがとう。

UIプラグインの有効化に関連することがまだ明確でない場合は、追加するだけです。

あなたが言及するとき、drupal_add_library('system', 'ui');
これはすべてのUIプラグインを自動的に有効にするわけではないことに注意してください。

利用可能なjquery uiプラグインのリストは、次のdrupal 7にあります。 /misc/ui/

たとえば、特定のプラグインを有効にするには、次のjquery.ui.slider.min.js行を追加する必要があります。

drupal_add_library('system', 'ui.slider');

これが役立つことを願っています。


2

最近この問題がありました。誰かが私にカスタムモジュールを提供して、JQuery UIをすべてのページに強制的にロードしました。簡単に再作成できます。最初に、jquery_updateをインストールし、動作することを確認します。次に、このモジュールを作成して有効にします。

path / to / modulesに「jquery_force」という名前のフォルダーを作成します。

内部で、2つのファイルを追加します。

jquery_force.info

name = JQuery UI Force
description = Forces JQuery UI to always load
dependencies[] = jquery_update
package = User Interface
core = 7.x
files[] = jquery_force.module

jquery_force.module

<?php
/**
 * @file jquery_force.module
 * TODO: Enter file description here.
 */

/**
 * Implements hook_init().
 */
function jquery_force_init() {
    drupal_add_library('system', 'ui');
}

2

template.phpファイルにプリプロセスフックを追加しても機能しませんでした。

私は、簡単に言えばdrupal_add_library('system', 'ui');template.php、自身でファイル作品を。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.