ホームページ >バックエンド開発 >PHPチュートリアル >Joomla でカスタムフォームフィールドタイプを作成し、モーダル選択の例を使用する

Joomla でカスタムフォームフィールドタイプを作成し、モーダル選択の例を使用する

Susan Sarandonオリジナル: 2024-11-17 10:18:03645ブラウズ

Joomla 5 で ModalSelect Form フィールドタイプを使用すると、拡張機能の開発時にカテゴリ、メーカー、検索を使用してモーダルウィンドウでフィルタリングすることで、数千の中から適切な製品を簡単に見つけることができます。

イントロ

クライアントと協力する過程では、さまざまなレベルのタスクがあります。誰かが 5 ～ 6 ページのシンプルな Web サイトを必要としています。 REST API を使用してサードパーティシステムと統合された大規模な商品カタログやオンラインストアが必要な場合があります。利用できる一般的なソリューションがない非標準の機能を必要とする人もいます。

Joomla は開発に適しており、メンテナンスが簡単なコードを作成できます。要件が CMS コアに従っている場合、これらすべてのケースに対する答えが得られます。

大規模なプロジェクトを完了するには、プロジェクトを小さなタスクに分割する必要があります。この記事では、これらのタスクの 1 つを解決する方法について説明したいと思います。

初期データ

顧客は、Joomla (JoomShopping) のオンラインストアの人気コンポーネントの 1 つで製品カタログをすでに作成しています。製品のパラメータを選択し、カートに入れて購入することができます。すべていつも通りです。ただし、ここで、製品のグラフィックレイアウトを作成する機能を追加する必要があります。たとえば、商品がマグカップや T シャツであるとします。購入する前に、製品デザイナーにアクセスし、ロゴや写真をアップロードし、テキストを書くと、このレイアウトがオンラインストアでの注文に添付されます。支払い後、レイアウトは直接制作に入り、画像とテキストがマグカップに適用され、住所に送信されます。

この機能の実装には非常に時間がかかるため、別のプロダクトデザイナーコンポーネントとして作成されます。また、データプロバイダープラグインがすでに作成されているため、1 つまたは別の e コマースコンポーネントを操作できるようになります。

小さな応用タスクの 1 つは、オンラインストアコンポーネントの商品とプロダクトデザイナーコンポーネントの商品間の接続を作成することです。これは、将来コンテンツに取り組むコンテンツ管理者にとって便利で直感的なものとなるはずです。したがって、希望する製品の ID 番号を表示するテキストフィールドを作成するだけでは十分ではありません。オンラインストアには数十の製品しかないかもしれませんが、コミュニケーション用の製品を選択することはそれほど難しくありません。数千の製品がある場合、パラメータによって製品を検索およびフィルタリングする機能が重要になります。製品のリストをカテゴリ、メーカーでフィルタリングしたり、数百もの製品の中から名前で検索したりできれば、作業がはるかに速く、簡単になります。

Creating a custom Form field type in Joomla sing the Modal Select example
ビデオを見る

このフィールドは、エディターボタンプラグイン (editors-xtd グループ) の機能に非常に似ており、選択用のデータ (記事へのリンク、モジュールの短いコードなど) がモーダルウィンドウに表示されます。

ちょっとした理論

Joomla 管理者パネルには、他のコンポーネントからのデータを入力する必要があるさまざまなフィールドがあります。記事、メニュー項目、連絡先、製品などを指定します。通常、このようなフィールドは選択オプションのドロップダウンリストとして設計されています。、データリストを使用して input type="text" として設計できますが、フィルタリング、検索、ページネーションを備えた必要なエンティティのリストを表示する便利なフィールドもあります。サイト内のソース (さまざまなコンポーネント、プラグイン) だけでなく、REST API 経由で利用できるサードパーティのサービス (CRM、配信サービス、外部データベース、他の Joomla サイトなど) もデータソースとして機能できます。

私たちは皆、「記事 - 単一の記事」、「連絡先 - 単一の連絡先」などのメニュー項目で記事を選択するとき、またはメニュー項目のエイリアス - 「システムリンク - メニュー」を作成するときに、これらのフィールドが動作しているのを見たことがあるでしょう。アイテムのエイリアス」。ただし、それらがどのようなものであるかを思い出してください。

モーダル記事選択ウィンドウ。

Creating a custom Form field type in Joomla sing the Modal Select example
モーダルな単一の連絡先選択ウィンドウ。

Creating a custom Form field type in Joomla sing the Modal Select example

Joomla のモーダル選択フィールドの可能性

これらのフィールドを詳しく見てみましょう。具体的に何ができるのかを見てみましょう。深いところでは、このフィールドの主な役割は選択されたエンティティの ID を取得し、この ID をテキストフィールドに入力することであると理解しています。しかし、画面には別のものが表示されます。ID 番号の代わりに、記事のタイトルまたは連絡先が表示されます。素敵で便利です。 ID 1452704 の記事の名前を覚えておく必要はありません。また、ビデオでは、フィールドにすでに値がある場合、「クリア」ボタンが表示されることが明確に示されています。フィールドの値がリセットされ、[選択] ボタンを再度クリックできるようになります。

Creating a custom Form field type in Joomla sing the Modal Select example

場合によっては、メニュー項目の作成プロセス中に、選択したタイプのエンティティ (記事、連絡先など) を作成する機会があります。このボタンは、ACL (Joomla でのアクセス権の分離) を考慮して機能します。

Web サイトを構築し、「連絡先」ページを作成していると想像してください。複雑な構造を持つ多数の支店がない場合、これは「未分類」カテゴリにある通常の Joomla 記事です。そして、すべての連絡先がテキストまたは変数の形式ですでに含まれています。昔は、最初に記事を作成してから、メニュー項目に移動して、その記事のメニュー項目を作成する必要がありました。今はその必要はありません。

Creating a custom Form field type in Joomla sing the Modal Select example

フィールドにすでに値がある場合、場合によっては、メニュー項目の作成中に選択したエンティティ (記事、メニュー項目など) を編集することができます。

モーダルウィンドウの選択フィールドを使用して、次のことができます。

選択
作成
編集
クリア

これが私の目の前にあるものです。しかし、Joomla の奥深くには、選択した値をフィールドで指定された URL に送信できる興味深い urlCheckin パラメータもあります。 Joomla のこの機能は、かなり長い間徐々に開発されてきたことは注目に値します。ただし、ニーズに合わせて使用できる別のユニバーサルフィールドタイプは Joomla 5 でのみ登場しました。Joomla 4 にもありません。

Joomla 管理パネルインターフェイスのフォームコンストラクターのフィールドはどのように配置されていますか?

以前は、このコンストラクターは JForm と呼ばれていました。すべての読者が PHP Storm や VS Code のような IDE (開発環境) などの開発ツールを手にしているわけではないことを前提としているので、コードベースをナビゲートするための追加のガイドラインを提供しようとします。

Joomla では、ロジックはビュー (実際の HTML 出力) から分離されているため、同時にいくつかの場所で調べます。

ロジックは Form クラスです

Logic は Form クラスです。 Joomla 5 では、Form クラスファイルは libraries/src/Form にあります。これらのファイルを調べて、ロジック自体、データに何が起こるか、その操作方法を理解します。

Creating a custom Form field type in Joomla sing the Modal Select example

つまり、Form コンストラクターはフィールドの説明を含む XML を受け取ります。データ (フィールドタイプ、addfieldprefix 属性からのカスタムフィールドクラス (存在する場合) など) を読み取り、FormHelper を使用して必要なフィールドクラスを読み込みます。フィールドに出力データをフィルタリングするためのルールがある場合 (FormRule クラスが使用されます)、ファイルリストタイプの Joomla フィールドを覚えておいてください。フィルタリングパラメータを指定して、たとえば、php ファイルのみまたは CSS ファイルのみを選択できます。

Joomla Form フィールドクラスファイル は libraries/src/Form/Field にあります。控えめに言っても、それらはたくさんあります。これは管理パネルの構築マテリアルであり、場合によってはフロントエンドでもあります。

Creating a custom Form field type in Joomla sing the Modal Select example

クラスファイルには、$type、$layout、その他動作に必要なクラスプロパティが記述されます。ほとんどのフィールドにはメソッド getInput() - 実際にフィールドの HTML 出力を返します、getLayoutData() - レンダリングに送信する前にフィールドのデータを前処理します、getLabel() - フィールドラベルの操作などがあります。

フィールドクラスが親 FormField クラスを継承していることを思い出してください。クラスファイル libraries/src/Form/FormField.php には、フィールドの可能な属性が記述されており、XML での記述に使用できます。それが何なのか、そしてその理由が簡単に説明されています。

Creating a custom Form field type in Joomla sing the Modal Select example
子クラス (継承者) は、親クラスのメソッドを操作し、必要に応じてそれをオーバーライドすることができます。

Creating a custom Form field type in Joomla sing the Modal Select example

Joomla 5 のフィールドの表示 (HTML 出力、レイアウト)

各フィールドクラスには HTML 出力があります。クラシック MVC では、ビューはデータ出力を即座に処理しますが、Joomla には追加レイヤーであるレイアウトがあり、この CMS の最も重要な機能の 1 つであるレイアウトをオーバーライドできます。 コアレイアウトは次のとおりです。このファイルは、サイトのルートの layouts フォルダー に配置されることが予想されます。 getLayoutData() メソッドから受け取ったすべてのデータを含む $displayData の配列を渡します。どの出力レイアウトを使用するかを $layout クラスプロパティで指定します。

<?php
/**
 * Name of the layout being used to render the field
 *
 * @var    string
 * @since  3.7
 */
protected $layout = 'joomla.form.field.email';

このタイプの録音は非常に一般的です。 Joomla では、layout は、サイトのルートにあるレイアウトフォルダーからレイアウトファイルへのドット区切りのパスです。 つまり、エントリ $layout = 'joomla.form.field.email' は、次のことを意味します。レイアウトは、フィールド layouts/joomla/form/field/email.php.
をレンダリングするときに使用されます。

<?php 
use Joomla\CMS\Layout\LayoutHelper;

$displayData = [
                'src' => $this->item->image,
                'alt' => $this->item->name,
               ];

echo LayoutHelper::render(
                        'joomla.html.image',
                         $displayData
                    );

同様に、この例ではレイアウト layouts/joomla/html/image.php を使用します。一部のレイアウトは、サイトテンプレートと管理パネルの html フォルダーでオーバーライドできます。

したがって、最終的にどのようなデータがレイアウトに取り込まれ、どのように表示されるかを正確に確認したい場合は、レイアウトファイルに移動して確認してください。

Joomla 5 のモーダル選択ウィンドウでデータ選択フィールドを作成する

それでは、この記事の主なタスクに戻りましょう。

サンプルは私たちが研究する上で重要です (この記事の執筆時点では Joomla 5.0.1):

フィールドのメインクラスは libraries/src/Form/Field/ModalSelectField.php です。
Joomla 記事モーダル選択フィールド - administrator/components/com_content/src/Field/Modal/ArticleField.php
メニュータイプモーダル選択フィールド - administrator/components/com_menus/src/Field/MenutypeField.php
メニュー項目モーダル選択フィールド - administrator/components/com_menus/src/Field/MenutypeField.php
出力レイアウト - layouts/joomla/form/field/modal-select.php

この記事の執筆時点では、com_contacts からの単一の連絡先モーダル選択フィールドはまだユニバーサルフィールドタイプに変換されておらず、(この記事が書かれた時点では Joomla 5.0.2 で) 管理者にのみ存在します。 /components/com_contact/src/Field/Modal/ContactField.php。 ModalSelectField ではなく、FormField を直接継承します。

独自のフィールドを追加するためのアクションのアルゴリズムは次のとおりです:

XML ファイル内のフィールドを含む XML フォームを作成するか、SimpleXMLElement をプログラムで使用します。
オンザフライで作業する場合は、onContentPrepareForm イベントのプラグインを使用して、XML フォームを目的のフォームに追加します (その前に $form->getName() を確認してください)
フィールドクラスを作成します。
必要に応じて、フィールドの独自の HTML 出力 (レイアウト) を作成します。これについては、この記事の範囲外としておきます。そしてそれはうまくいきます。 ## フィールド XML このコードで最も重要なのは、addfieldprefix 属性です。これは、フィールドクラスの名前空間を意味します。クラス名は、addfieldprefix "" type "Field" から形成されます。この場合、フィールドクラスは JoomlaPluginWtproductbuilderProviderjoomshoppingFieldProductlistField になります。

<?php
/**
 * Name of the layout being used to render the field
 *
 * @var    string
 * @since  3.7
 */
protected $layout = 'joomla.form.field.email';

フィールドのHTML出力(レイアウト)

PHP で行われるすべてのことを明確にするには、まずフィールド出力のレイアウトを確認する必要があります。これはファイル layouts/joomla/form/field/modal-select.php 内にあります。実際、2 つの入力フィールドが出力されます。1 つは表示され、もう 1 つは非表示になります。選択した記事、連絡先、または製品のタイトルが、プレースホルダーの形式で表示されるフィールド ($valueTitle パラメーター) に入力されます。 2 番目は彼の ID - $value です。まだ何も選択していない場合は、フィールドに「記事を選択」または「製品を選択」などの語句が表示されるはずです。これは、XML フィールドまたはフィールドクラスの setup() メソッドのヒント属性に置く言語定数です。

出力レイアウトで使用できるすべてのパラメータ (プログラムまたは XML ファイルで使用できるパラメータを意味します):

<?php
/**
 * Name of the layout being used to render the field
 *
 * @var    string
 * @since  3.7
 */
protected $layout = 'joomla.form.field.email';

PHPフィールドクラス

ご想像のとおり、フィールドクラスは私のプラグインにあります。その方法はplugins/wtproductbuilder/providerjoomshopping/src/Field/ProductlistField.phpです。私は単一のモーダル記事選択フィールドを基礎として、JoomShopping オンラインストアから製品を選択するというニーズに合わせて再設計しました。親 ModalSelectField クラスを独自のクラスで拡張します。

私のタスクには製品の選択のみが含まれており、編集と作成は含まれていないため、記事の本文では製品の選択についてのみ話します。 PHP クラスは小さいので、全体を示してコメントします。

<?php 
use Joomla\CMS\Layout\LayoutHelper;

$displayData = [
                'src' => $this->item->image,
                'alt' => $this->item->name,
               ];

echo LayoutHelper::render(
                        'joomla.html.image',
                         $displayData
                    );

これとは別に、getValueTitle() メソッドが導入されました。このメソッドは、すでに選択され保存されている場合に、選択されたエンティティの名前 (製品名、記事のタイトルなど) を表示します。つまり、メニュー項目を編集し、フィールドには触れませんが、単なるIDではなく、記事のタイトル/製品名を人々が理解できるようにしたいと考えています。このメソッドは、希望のタイトルを表示します。

<field
      type="productlist"
      name="product_id"
      addfieldprefix="Joomla\Plugin\Wtproductbuilder\Providerjoomshopping\Field"
      label="Field label"
      hint="Field placeholder"
      />

より複雑な機能が必要な一部のフィールド (多言語の関連付けなど) では、FormField クラスの基本メソッドをオーバーライドするフィールドクラスの他のメソッドがあります。

setLayoutData() は、実際にフィールドをレンダリングする前にデータを前処理するメソッドです
getRenderer() - レンダリング用の追加パラメータなど

私たちの場合、そのような必要はないので、使用しません。

モーダルウィンドウのコンテンツのHTML出力

「選択」ボタンをクリックすると、モーダルブートストラップウィンドウが開き、製品のリストがで開きます。製品名または Javascript 画像をクリックすると、フィールドの製品 ID と名前が取得されます。ただし、このリスト自体の HTML を取得するには、それをどこかに実装する必要があります。つまり、そのような結論と機能はコンポーネントをサポートする必要があり、その後コンポーネントの URL にアクセスします。 com_ajax を介してプラグインにアクセスし、そこから HTML を取得します。それが私たちがやることです。</p> <p><img src="https://img.php.cn/upload/article/000/000/000/173180989961522.jpg" alt="Creating a custom Form field type in Joomla sing the Modal Select example"><br> 私のプラグインでは、onAjaxProviderjoomshopping() メソッドは製品リストの HTML 出力を返します。そこで、それらを使用して配列をループし、写真、名前、出力を取得します。コードは全体的に膨大なので、最も重要な部分を公開します。</p> <p>簡略化されたループコードの例:<br> </p> <pre class="brush:php;toolbar:false"><?php extract($displayData); /** * Layout variables * ----------------- * @var string $autocomplete Autocomplete attribute for the field. * @var boolean $autofocus Is autofocus enabled? * @var string $class Classes for the input. * @var string $description Description of the field. * @var boolean $disabled Is this field disabled? * @var string $group Group the field belongs to. <fields> section in form XML. * @var boolean $hidden Is this field hidden in the form? * @var string $hint Placeholder for the field. * @var string $id DOM id of the field. * @var string $label Label of the field. * @var string $labelclass Classes to apply to the label. * @var boolean $multiple Does this field support multiple values? * @var string $name Name of the input field. * @var string $onchange Onchange attribute for the field. * @var string $onclick Onclick attribute for the field. * @var string $pattern Pattern (Reg Ex) of value of the form field. * @var boolean $readonly Is this field read only? * @var boolean $repeat Allows extensions to duplicate elements. * @var boolean $required Is this field required? * @var integer $size Size attribute of the input. * @var boolean $spellcheck Spellcheck state for the form field. * @var string $validate Validation rules to apply. * @var string $value Value attribute of the field. * @var string $dataAttribute Miscellaneous data attributes preprocessed for HTML output * @var array $dataAttributes Miscellaneous data attribute for eg, data-* * @var string $valueTitle * @var array $canDo * @var string[] $urls * @var string[] $modalTitles * @var string[] $buttonIcons */ </pre> <p><strong>2番目</strong>。リンクタグコードには、必要なデータを含むデータ属性が含まれている必要があります。この断片は商品出力サイクルのサンプルコードにありました。<br> </p> <pre class="brush:php;toolbar:false"><?php /** * Name of the layout being used to render the field * * @var string * @since 3.7 */ protected $layout = 'joomla.form.field.email'; </pre> <h2> JavaScriptの処理。から親ウィンドウのフィールドへのデータの送信 </h2> <p>それでは、JavaScript の操作を始めましょう。記事を書く過程で、古い働き方と新しい働き方について話すことを可能にするニュアンスが生まれました。</p> <p>作業の過程で、次の JS スクリプトを接続したことを思い出します</p> <ul> <li> <strong>media/system/js/fields/modal-fields.min.js</strong> - このファイルは記事選択フィールドのクラスに接続されました。しかし、今では<strong>これは時代遅れで時代遅れの仕事方法である</strong>と言えます。このファイルはもう必要ありません。 PHP クラスでコメントアウトしました。</li> <li> <strong>media/plg_wtproductbuilder_providerjoomshopping/js/providerjoomshopping.modal.js</strong> - 独自の js ファイル。</li> </ul> <p>独自の JavaScript から始めましょう。ここでは、select-link クラスを使用して、すべてのセレクターを取得し、それらにクリックイベントのリスナーをハングします。<br> </p> <pre class="brush:php;toolbar:false"><?php use Joomla\CMS\Layout\LayoutHelper; $displayData = [ 'src' => $this->item->image, 'alt' => $this->item->name, ]; echo LayoutHelper::render( 'joomla.html.image', $displayData ); </pre> <p>ID とタイトルについてはすべて直感的ですが、データオブジェクトと postMessage に関しては、Joomla の操作に慣れている人にはわかりにくいかもしれません。</p> <h2> Joomla 3 および Joomla 4 と同様 </h2> <p>以前、Joomla 2.5、3.x、さらには 4.x でも、次のアプローチが使用されていました。フィールド出力のレイアウトでは、インラインスクリプトを使用してハンドラー関数をウィンドウにハングし、&lt から;iframe>これを window.parent[functionName] と呼びました。このコードを見てください<br> </p> <pre class="brush:php;toolbar:false"><field type="productlist" name="product_id" addfieldprefix="Joomla\Plugin\Wtproductbuilder\Providerjoomshopping\Field" label="Field label" hint="Field placeholder" /> </pre> <p>このフォームでは、記事/連絡先/メニュー項目のリスト内の各リンクの data-function 属性に関数名を指定しました。また、関数自体はインラインに配置され、場合によってはその名前が追加の ID と統合されました。たとえば、<strong>"jSelectArticle_".$this->id</strong>.</p> <p>jSelectArticle() 関数または同様のもの (jSelectProduct() があります) は、ファイル <strong>modal-fields.min.js</strong> の標準 processModalSelect() 関数のラッパーです。次に、 processModalParent() 関数を呼び出し、実行後にモーダルウィンドウを閉じます。</p> <p><img src="https://img.php.cn/upload/article/000/000/000/173180990035881.jpg" alt="Creating a custom Form field type in Joomla sing the Modal Select example"><br> この関数が機能するには、エンティティのタイプ (記事、連絡先など)、フィールドのプレフィックス (実際には HTML フィールドセレクターの ID であることが判明)、実際の ID などの一連のパラメーターを指定する必要がありました。タイトルと必要なパラメータなど</p> <p><img src="https://img.php.cn/upload/article/000/000/000/173180990296974.jpg" alt="Creating a custom Form field type in Joomla sing the Modal Select example"><br> 1 つの機能で、あらゆる機会に対応するすべてが収集されました。そこにデータがフィールドに配置されました。 </p> <h2> Joomla 5 ではどうなったのか </h2> <p>ただし、Joomla 5 では、このファイルは必要なくなりました。フィールド出力の標準レイアウトを使用する場合、modal-content-select-field アセットがそれに接続され、新しい方法で動作します。</p> <p><img src="https://img.php.cn/upload/article/000/000/000/173180990455055.jpg" alt="Creating a custom Form field type in Joomla sing the Modal Select example"><br> 現在、Joomla 5 フロントエンドは JavaScript postMessages の使用に切り替わっています。すべての古い拡張機能がまだ新しいレールに切り替える準備ができているわけではないため、JoomlaExpectingPostMessage フラグが実装されています。これにより、古いイベント呼び出しメソッドを区別できるようになります。説明した作業方法とは間接的な関係がありますが、誰かにとって役立つかもしれません。このフラグは、postMessages への完全な移行後に削除されます。</p> <p><img src="https://img.php.cn/upload/article/000/000/000/173180990563023.jpg" alt="Creating a custom Form field type in Joomla sing the Modal Select example"></p> <p>したがって、呼び出される関数の名前を持つリンクの追加の属性は必要なくなりました。代わりに、postMessage メカニズムを使用します。これを行うには、データオブジェクトで、joomla:content-select と等しい messageType パラメーターを指定する必要があります。なぜ？ JavaScript の観点から見ると、Joomla での作業は次のようになります:</p> <ul> <li>リンクをクリックしてリンク属性を取得する</li> <li>親ウィンドウにメッセージを送信 window.parent.postMessage(data) </li> <li> <strong>media/system/js/fields/modal-content-select-field.js</strong> ファイルは、メッセージイベントのリスナーを持つ親ウィンドウに接続されます。</li> <li>メッセージタイプをチェックし、joomla:content-select の場合は、値が必須フィールドに配置され、モーダルウィンドウが閉じます</li> </ul> <p><img src="https://img.php.cn/upload/article/000/000/000/173180990786501.jpg" alt="Creating a custom Form field type in Joomla sing the Modal Select example"></p> <p>Joomla のコアコードを研究し、解決策を探す過程で、自然に jSelectArticle() などの関数に出会いました。その後、postMessage に出会い、長い一意の名前を付けて MessageType を作成することにしました。これを機能させるために、(結局のところ、時代遅れであることが判明した) processModalSelect() 関数を呼び出して、独自の処理を記述しました。そして、データがフィールドに正しく挿入されたにもかかわらず、モーダルウィンドウが決して閉じようとしないという事実に直面しました。さらに検索を続けると、まず正しいタイプのイベントが見つかり、次に不必要なスクリプトが削除され、コード全体が簡素化されました。</p> <h2> まとめ </h2> <p>Joomla は、サードパーティソースからデータを操作および取得し、それをコード内で使用するための豊富なツールセットを開発者に提供します。 JForm フィールドの操作は、開発者が独自の拡張機能を作成する場合、特に一般的な範囲を超えるタスクを解決する必要がある場合に重要です。もちろん、このようなモーダルウィンドウとその中でのデータの選択はかなり特殊なケースですが、この方法では、他の JForm フィールドをオーバーライドすることも、独自の UX ロジックで独自の型を作成することもできます。</p> <h2> Joomla コミュニティリソース </h2> <ul> <li>https://joomla.org/</li> <li>Joomla コミュニティマガジンのこの記事</li> </ul> <p>以上がJoomla でカスタムフォームフィールドタイプを作成し、モーダル選択の例を使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">php</a> <a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">mvc</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">bootstrap</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Array</a> <a href="javascript:void(0);">Object</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">switch</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">include</a> <a href="javascript:void(0);">try</a> <a href="javascript:void(0);">xml</a> <a href="javascript:void(0);">Filter</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">class</a> <a href="javascript:void(0);">Interface</a> <a href="javascript:void(0);">Namespace</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">Property</a> <a href="javascript:void(0);">Event</a> <a href="javascript:void(0);">JS</a> <a href="javascript:void(0);">number</a> <a href="javascript:void(0);">function</a> <a href="javascript:void(0);">constructor</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">transition</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">ide</a> <a href="javascript:void(0);">storm</a> <a href="javascript:void(0);">https</a> <a href="javascript:void(0);">ux</a> <a href="javascript:void(0);">everything</a> <a href="javascript:void(0);">cms</a> <a href="javascript:void(0);">Access</a> <a href="javascript:void(0);">iframe</a><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="ヘッダーのみが返される場合に cURL で HTTPS 接続の問題をデバッグする方法" href="https://m.php.cn/ja/faq/1796687933.html">ヘッダーのみが返される場合に cURL で HTTPS 接続の問題をデバッグする方法</a></span><span>次の記事：<a class="dBlack" title="ヘッダーのみが返される場合に cURL で HTTPS 接続の問題をデバッグする方法" href="https://m.php.cn/ja/faq/1796687959.html">ヘッダーのみが返される場合に cURL で HTTPS 接続の問題をデバッグする方法</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ja/faq/1.html" title="cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法" class="aBlack">cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/1.html" title="cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法" class="aBlack">cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/1.html" title="cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法" class="aBlack">cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/1.html" title="cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法" class="aBlack">cURL を使用して PHP で Get リクエストと Post リクエストを実装する方法</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/2.html" title="正規表現内のすべての式記号 (概要)" class="aBlack">正規表現内のすべての式記号 (概要)</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script></html>

Joomla でカスタム フォーム フィールド タイプを作成し、モーダル選択の例を使用する

イントロ

初期データ

ちょっとした理論

Joomla のモーダル選択フィールドの可能性

Joomla 管理パネルインターフェイスのフォームコンストラクターのフィールドはどのように配置されていますか?

ロジックは Form クラスです

Joomla 5 のフィールドの表示 (HTML 出力、レイアウト)

Joomla 5 のモーダル選択ウィンドウでデータ選択フィールドを作成する

フィールドのHTML出力(レイアウト)

PHPフィールドクラス

モーダルウィンドウのコンテンツのHTML出力

Joomla でカスタムフォームフィールドタイプを作成し、モーダル選択の例を使用する