Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

Template:OutSystems/OSLanguageSwitcher
Language:

 

 

 

 

 
OutSystems

jQueryプラグインの統合

質問

カルーセルなどのjQueryプラグインをOutSystemsと統合するには、どのようにすればよいですか?

回答

Webブロックを使用して、jQueryプラグインのコード、スタイル、リソースをカプセル化します。

  1. プラグインのコード(通常は複数のファイルを含むzipアーカイブ)をダウンロードします。
  2. アーカイブ内のファイルを使用してWebブロックを作成します。
  3. Webブロックにプラグインを制御するための任意パラメータを追加します。
  4. WebブロックにエスケープされていないExpressionを追加し、プラグインを有効にするJavaScriptを実行します。
  5. WebブロックをWeb画面に追加します。
  6. 必要な場合、CSSスタイルをコンテナに割り当てます。

代わりに、モジュールの直接的なリソースとしてファイルをインポートすることができます。ただし、インポートされたリソースが他のモジュールから認識できないため、ウィジェットの共有が難しくなります。

以下の例では、jQueryプラグインのカルーセルを使用して、特定の画像を含むカルーセルをWebブロックでカプセル化します。Webブロックには以下が含まれます。

  • プラグインのJavaScript
  • プラグインのCSSスタイル
  • 一連の画像
  • 画像を参照するHTML
  • カルーセルを有効にするためのExpression

この画像は、Webブロックのストラクチャを示しています。

以下の画像は、カルーセルのCSSスタイルをWebブロックのスタイルシートとして示しています。

最後に、カルーセルのドキュメントの例に基づき、エスケープされていないExpressionをWebブロックの最後で使用してjQueryコードを開始します。

コンテナの「id」アトリビュートをjQueryに渡すには、以下の手順を実行します。

  1. コンテナのプロパティでコンテナに名前を付けます。この例では、コンテナに「carousel」という名前を付けました。
  2. JavaScriptで、name.Idを使用してOutSystemsによって生成されたidを取得します。この例では「carousel.Id」です。

別の方法として、idアトリビュートではなく固有のCSSクラスに基づくカルーセルにすることができます。

画像のaltテキスト

ただし、「rcarousel」プラグインはjQueryを使用します。jQueryを含めるには2つの方法があります。

  • レイアウトにjQueryへの参照を含めます。そのレイアウトを使用するすべてのページでjQueryが読み込まれます。
  • jQuery Webブロックを作成し、rcarouselを使用するときにこのブロックを含めます。rcarouselはjQuery Webブロックを使用できます。

以下の例では、WebブロックImportJqueryのJavaScriptとしてjQuery.jsのコンテンツを貼り付けています。

画像のaltテキスト

eSpace内にサードパーティのコードを含める場合は、eSpaceを共有する前にライセンスと著作権を必ず確認してください。

追加情報:

eSpace

jQuery rcarouselを含むサンプルeSpace。

rcarousel

Wojciech Ryrych氏による連続的なjQuery UIカルーセルと、ナビゲーションを含まないシンプルなカルーセルの例

IDは、OutSystemsによって自動的に生成されることに注意してください。アプリケーションのスタイルには、CSSクラスを使用する必要があります。

  • Was this article helpful?