jQueryプラグインの統合
質問
カルーセルなどのjQueryプラグインをOutSystemsと統合するには、どのようにすればよいですか？
回答
Webブロックを使用して、jQueryプラグインのコード、スタイル、リソースをカプセル化します。
- プラグインのコード（通常は複数のファイルを含むzipアーカイブ）をダウンロードします。
- アーカイブ内のファイルを使用してWebブロックを作成します。
- Webブロックにプラグインを制御するための任意パラメータを追加します。
- WebブロックにエスケープされていないExpressionを追加し、プラグインを有効にするJavaScriptを実行します。
- WebブロックをWeb画面に追加します。
- 必要な場合、CSSスタイルをコンテナに割り当てます。
代わりに、モジュールの直接的なリソースとしてファイルをインポートすることができます。ただし、インポートされたリソースが他のモジュールから認識できないため、ウィジェットの共有が難しくなります。
以下の例では、jQueryプラグインのカルーセルを使用して、特定の画像を含むカルーセルをWebブロックでカプセル化します。Webブロックには以下が含まれます。
- プラグインのJavaScript
- プラグインのCSSスタイル
- 一連の画像
- 画像を参照するHTML
- カルーセルを有効にするためのExpression
この画像は、Webブロックのストラクチャを示しています。
以下の画像は、カルーセルのCSSスタイルをWebブロックのスタイルシートとして示しています。
最後に、カルーセルのドキュメントの例に基づき、エスケープされていないExpressionをWebブロックの最後で使用してjQueryコードを開始します。
コンテナの「id」アトリビュートをjQueryに渡すには、以下の手順を実行します。
- コンテナのプロパティでコンテナに名前を付けます。この例では、コンテナに「carousel」という名前を付けました。
- JavaScriptで、
name.Idを使用してOutSystemsによって生成されたidを取得します。この例では「carousel.Id」です。
別の方法として、idアトリビュートではなく固有のCSSクラスに基づくカルーセルにすることができます。
ただし、「rcarousel」プラグインはjQueryを使用します。jQueryを含めるには2つの方法があります。
- レイアウトにjQueryへの参照を含めます。そのレイアウトを使用するすべてのページでjQueryが読み込まれます。
- jQuery Webブロックを作成し、rcarouselを使用するときにこのブロックを含めます。rcarouselはjQuery Webブロックを使用できます。
以下の例では、WebブロックImportJqueryのJavaScriptとしてjQuery.jsのコンテンツを貼り付けています。
eSpace内にサードパーティのコードを含める場合は、eSpaceを共有する前にライセンスと著作権を必ず確認してください。
追加情報:
jQuery rcarouselを含むサンプルeSpace。
Wojciech Ryrych氏による連続的なjQuery UIカルーセルと、ナビゲーションを含まないシンプルなカルーセルの例。
IDは、OutSystemsによって自動的に生成されることに注意してください。アプリケーションのスタイルには、CSSクラスを使用する必要があります。