バージョン

Ignite UI for jQuery を使用した作業の開始

このトピックの内容

このトピックは、以下のセクションで構成されます。

概要

Ignite UI for jQuery™ はきれいでモダンな Web アプリケーションを作成するための高度な HTML5 + ツールセットです。jQuery および jQuery UI をベースとしたチャート、データ視覚化マップ、(階層編集可能な) グリッド、ピボット グリッド、エンハンスト エディター (コンボボックス、マスクエ ディター、HTML エディター、日付ピッカー、など)、柔軟なデータソース コネクタなど、機能豊かで高性能な UI コントロールおよびウィジェットを提供します。

Ignite UI for jQuery は 2 つのバージョンで提供します。

  • オープン ソース版 - 完全なツールセットのサブセットを含む無償版。グリッドおよびデータ ビジュアライゼーションのコントロールは含まれません。詳細については、GitHub™ の Ignite UI for jQuery OSS プロジェクトを参照してください。
  • 完全版 - 完全なツールセットが含まれた有償版。

ダウンロードおよびインストール

Ignite UI for jQuery はダウンロード ページからダウンロードできます。 お使いのオペレーティング システムにより、試用版およびライセンス版の両方の製品をインストールするためにいくつかのオプションがあります。

Windows の場合。

  • プラットフォーム インストーラー: プラットフォーム インストーラーは Windows のみのオンライン インストーラであり、Ignite UI for jQuery をはじめとして、すべての Infragistics 開発ツール、そのヘルプとサンプルを管理 (インストール、更新、アンインストール) するためのウィザードのようなエクスペリエンスを提供します。

  • すべての製品のダウンロード: 製品、ヘルプ、およびサンプルを含む Windows のみのオフライン MSI インストーラー。

MacOs、Linux、Unix 、などの場合。

Ignite UI for jQuery をプロジェクトにホストする

Ignite UI for jQuery をプロジェクトにホストするために複数のオプションがあります。

Ignite UI CLI の使用

Ignite UI CLI は、Angular、React、および jQuery でアプリケーションを初期化、開発、スキャフォールディング、および処理するツールです。

CLI を使用するには、npm パッケージをグローバル モジュールとしてインストールします。

    npm install -g igniteui-cli

詳細については、「Ignite UI CLI の使用」の使用トピックを参照してください。

NPM、JSPM、NuGet の使用

Ignite UI for jQuery では、NPM,、JSPM、NuGet、複数のパッケージ マネージャーをサポートします。

NPM (Ignite UI for jQuery オープン ソースをインストールします)

    npm install ignite-ui

完全ライセンス版を構成する方法については、Ignite UI for jQuery npm パッケージの使用トピックを参照してください。

NuGet (Ignite UI for jQuery トライアル版 をインストールします)

    Install-Package IgniteUI

ライセンス版を構成する方法については、Ignite UI for jQuery NuGet パッケージの使用トピックを参照してください。

JSPM (Ignite UI for jQuery オープン ソースをインストールします)

    jspm install npm:ignite-ui

完全ライセンス版を構成する方法については、Ignite UI for jQuery コントロールで System.JS を使用トピックを参照してください。

CSS および JavaScript 参照の追加

Ignite UI for jQuery がj Query および jQuery UI ライブラリに依存するため、Ignite UI for jQuery スクリプトの前にそれへの参照を追加する必要があります。また、Ignite UI for jQuery コントロールをページに追加するために複数のオプションがあります。

  • 結合されたバンドル ファイルおよび圧縮化されたバンドル ファイルの参照 - インストールには、タイプごとにコントロールがグループ化された、結合されたファイルおよび圧縮されたファイルが含まれています。infragistics.core.js (必須)、グリッドなどの Line of Business コントロールが含まれる infragistics.lob.js、チャートなどの Data Visualization コントロールが含まれる infragistics.dv.js、すべての Excel エクスポートに関連するロジックを含む infragistics.excel-bundled.js、スプレッドシート ユーザー インターフェイスの実装を含む infragistics.spreadsheet-bundled.js、およびすべてのスケジューラに関連するロジックを含む infragistics.scheduler-bundled.js があります。詳細については、必要なリソースの手動で追加するトピックを参照してください。
  • 個別のコントロール ファイルを参照する - 詳細については、Ignite UI for jQuery での JavaScript ファイル トピックを参照してください。
  • Infragistics Loader の使用 - Infragistics Loader は Ignite UI for jQuery などのファイルを自動的に読み込みます。コントロール ファイルを手動で参照する手間を省きます。詳細については、 Infragistics Loader による必要なリソースを自動で追加する トピックを参照してください。
  • AMD Loader の使用 - Ignite UI for jQuery は AMD と互換性があるため、一般的な AMD ローダーで使用できます。

Ignite UI for jQuery ボイラープレート HTML ページのサンプル (CDN リンクを使用)

次のコードは、Ignite UI for jQuery の使用を開始するために必要な参照 (CDN リンク) を含むボイラープレート HTML ページのサンプルを表しています。

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" />

    <style>

        /* ----- CSS Goes Here ----- */

    </style>
</head>
<body>

    <!-- ----- HTML Goes Here ----- -->

    <table id="grid"></table>

    <!-- JavaScript Library Dependencies -->
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>    
    <script>

        $(function () {

            // ----- JavaScript Goes Here ----- //

        });

    </script>

</body>
</html>

最初のコントロールの追加

直接、またはページ デザイナーを使用する、という 2 つのオプションがあります。

igGrid を直接に追加

igGrid をページ デザイナーを使用して追加

Ignite UI for jQuery ページ デザイナーは、マウスのみの使用で Ignite UI for jQuery コントロールを構成する完全なデザイナー エクスペリエンスを提供します。 ツールボックス (右側) からページ デザイン エリア (左) に igGrid を追加するために、[リストおよびピッカー] セクションから Grid コントロールをドラッグアンドドロップします。それから、プロパティ エディターを使用してグリッドを構成します。構成後、生成されたページをコピーします。

必要最低限

Ignite UI for jQuery のカスタム ダウンロード ページ には、プロジェクトで使用する Ignite UI for jQuery コントロールと機能のみを選択し、最大のページ読み込みパフォーマンスのための、最適化された JavaScript ファイルおよび CSS ファイルをダウンロードするオプションがあります。

CDN リンクの使用

プロジェクトに Ignite UI for jQuery スクリプト ファイルをホストする代わりに、Ignite UI for jQuery CDN リンクを使用できます。インターネット アプリケーションの場合、通常 CDN は、社内でホストするよりすばやくエンド ユーザーにファイルを提供できます。

以下に、Ignite UI for jQuery トライアル版のリンクをリストします。詳細については、Ignite UI for jQuery 対応 Infragistics コンテンツ配信ネットワーク (CDN) トピックを参照してください。

    <!-- Ignite UI for jQuery Required Combined CSS Files (Trial) -->
    <link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!-- JavaScript Library Dependencies -->
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files (Trial) -->
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>

TypeScript の定義

Ignite UI for jQuery® は、強い型付け、コンパイル時間のチェック、intellisense 機能を利用できるようにTypeScript の型定義を提供します。詳細については、 TypeScript での Ignite UI for jQuery の使用トピックを参照してください。

AngularJS 拡張子

Ignite UI for jQuery AngularJS 拡張子は、AngularJS アプリケーションで使用されるコントロールの両方向のデータ バインディングおよび宣言的初期化を提供します。詳細については、 AngularJS での Ignite UI for jQuery の使用トピックを参照してください。

Angular 拡張子

Ignite UI for jQuery Angular 拡張子は、Angular アプリケーションで使用されるコントロールの両方向のデータ バインディング、宣言的初期化、ネイティブ API を提供します。詳細については、GitHub で Ignite UI for jQuery Angular 拡張子 (英語) を参照してください。

ReactJS 拡張子

Ignite UI for jQuery ReactJS 拡張子は、JSX マークアップおよび React API の初期化を提供しします。詳細については、GitHub で Ignite UI for jQuery React 拡張子 (英語) を参照してください。

ASP.NET MVC ラッパー

%%ProductNameMVC% ラッパーは、モデルおよびビューチャートの初期化およびサーバー側リモート要求の処理をサポートします。詳細については、「コントロールを MVC プロジェクトに追加」トピックを参照してください。

関連コンテンツ

トピック

オンラインで表示: GitHub