バージョン

Ignite UI for jQuery で JavaScript リソースを使用

トピックの概要

目的

このトピックでは、Web アプリケーションで Ignite UI for jQuery を操作して、必要なリソースを管理する方法について説明します。

このトピックの内容

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

Infragistics JavaScript リソースの参照

Infragistics JavaScript リソースの参照 - 概要

Ignite UI for jQuery を使用して作業する場合、Web アプリケーションで Infragistics リソースを参照してください。これらのリソースは、4 種類の方法で参照できます。

  • カスタム JavaScript ファイルを含む: これは Ignite UI for jQuery JavaScript ファイルを参照する方法です。Ignite UI for jQuery コントロールのカスタム ダウンロードを作成できます。

  • Infragistics Loader の使用: Infragistics Loader は、すべての Infragistics リソース (スタイルおよびスクリプト) を解決するために使用されます。

  • 結合および圧縮された JavaScript ファイルの使用: すべてのコンポーネントおよびその依存関係を含む結合したファイルを使用できます。

  • 特定の JavaScript ファイルの組み込み : すべての必要ファイルを手動で参照できます。

カスタム ダウンロードからインフラジスティクス JavaScript の参照

Ignite UI for jQuery カスタム ビルドを作成するには、カスタム ダウンロード ページを参照してください。カスタム ビルドには 2 つの利点があります。

  1. アプリケーションで使用されるコントロールおよび機能のみをダウンロードすることにより、最小限の JavaScript で実行することができます。
  2. JavaScript を 1 つのファイルに結合し、ブラウザーがサーバーへの要求の数を減らします。この利点により、アプリケーションのパフォーマンスを向上します。

HTML の場合:

<script src="../scripts/infragistics.js" type="text/javascript"></script>

Razor の場合:

@using Infragistics.Web.Mvc;
<!DOCTYPE html>
<html>
<head runat="server">
..    
<script src="@(Url.Content("~/scripts/infragistics.js"))" type="text/javascript"></script>

Infragistics Loader を使用した JavaScript リソースの参照

Infragistics Loader はすべての Infragistics リソース (スタイルおよびスクリプト) について解決します。必要な CSS と JavaScript ファイルへのパスを提供し、ローダーがページにフェッチするリソースを宣言する必要があります。Infragistics Loader を参照する必要があります。

HTML の場合:

<script src="Scripts/infragistics.loader.js" type="text/javascript"></script>

別の <script> 要素に、以下のような JavaScript コードを追加して Infragistics Loader を呼び出し、ウィジェット (機能) を宣言する必要があります。

JavaScript の場合:

$.ig.loader({
    scriptPath: '{IG Resources root}/js/',
    cssPath: '{IG Resources root}/css/'
});                     
$.ig.loader('igGrid.Paging.Updating', 
     function () {
     // Create a couple of igGrids 
        $("#grid1").igGrid({
        virtualization: false,
        autoGenerateColumns: true,
        jQueryTemplating: false,
…

結合および圧縮された JavaScript ファイルの参照

Ignite UI for jQuery が機能するには、ベース JavaScript ファイルを含めていくつかのリソースを手動で参照する必要があります。

以下に Infragistics JavaScript ファイルの結合したスクリプトを示します。

HTML の場合:

<script src="../scripts/infragistics.core.js" type="text/javascript"></script>
<script src="../scripts/infragistics.lob.js" type="text/javascript"></script>
<script src="../scripts/infragistics.dv.js" type="text/javascript"></script>

Razor の場合:

@using Infragistics.Web.Mvc;
<!DOCTYPE html>
<html>
<head runat="server">
..    
<script src="@(Url.Content("~/scripts/infragistics.core.js"))" type="text/javascript"></script>
<script src="@(Url.Content("~/scripts/infragistics.lob.js"))" type="text/javascript"></script>
<script src="@(Url.Content("~/scripts/infragistics.dv.js"))" type="text/javascript"></script>

外部 JavaScript リソースの参照

外部 JavaScript リソースの参照 - 概要

ModernizrJQuery、および JQuery UI JavaScript ライブラリは、Ignite UI for jQuery を含むプロジェクトに必ず必要なライブラリです。Modernizr ライブラリがブラウザの機能を検出し、これによってコントロールはタッチまたは非タッチ環境であるかを識別することができます。

JavaScript ライブラリの参照

上述のライブラリを追加する必要がある参照。

  • Modernizr ライブラリ:

HTML の場合:

<script scr="../scripts/modernizr.js" type="text/javascript"></script>
  • JQuery ライブラリ:

HTML の場合:

<script src="../scripts/jquery.js" type="text/javascript"></script>
  • JQuery UI ライブラリ:

HTML の場合:

<script src="../scripts/jquery-ui.js" type="text/javascript"></script>

注: 参照は、上記の順序で追加する必要があります。

ローカライズ リソースの参照

ローカライズ リソースの参照 - 概要

Ignite UI for jQuery には、英語 ([en])、日本語 ([ja])、ロシア語 ([ru])、ブルガリア語 ([bg])、ドイツ語 ([de])、スペイン語 ([es])、およびフランス語 ([fr]) 言語のリソースが付属しています。

Infragistics リソースを追加したあと、Web アプリケーションの script フォルダーには modules フォルダーが作られます。modules フォルダーのもとにモジュラー ウィジット (igGrid) のローカライズ リソースを 1 つのファイルに結合する必要があります。

i18n フォルダーは modules フォルダーの中にあり、ウィジットを英語、ブルガリア語、ロシア語、ドイツ語、スペイン語、フランス語にローカライズする JavaScript ファイルを保持します。

JavaScript ファイルは、jQuery エディターに日付、数字、通貨などのローカライズ フォーマットを提供します。これらは、../js/modules/i18n/regional にあります (js は、npm パッケージのインストール フォルダー内の JavaScript ファイルのルート フォルダー)。

注: 地域設定は結合スクリプト ファイルの一部ではありません。したがって、結合スクリプト ファイルを使用する場合にはそれらを参照する必要があります。

注: 注: Infragistics Loader を使用しない場合、ローカライズ スクリプトは常に実際の JavaScript ファイルより前に組み込む必要があります。地域スクリプトについても同様です。

注: Infragistics Loader を使用しない場合で、地域設定を構成したいとき infragistics.util ファイルをすべての地域 JavaScript ファイルより前に組み込む必要があります。これは、地域 JavaScript ファイルが infragistics.util 機能に依存し、それを内部で使用するためです。

ローカライズ リソースの参照方法には2通りあります。

  • Infragistics リソース (スタイルおよびスクリプト) およびローカライズ リソースについて解決する Infragistics Loader の使用。
  • ローカライズ スクリプトを手動で参照。

以下の例では、上述の JavaScript ファイルがすでにあるものと仮定して、ブルガリア語ローカライズ リソースを追加しています。

コード例: Infragistics Loader を使用したローカライズ リソースの参照

以下のコード例では、Infragistics Loader を使用してローカライズ リソースを組み込む方法を示します。ウィジェットのローカライズは、ロケール オプションによって制御されます。

JavaScript の場合:

$.ig.loader({
            scriptPath: '{IG Resources root}/js/',
            cssPath: '{IG Resources root}/css/',
            resources: 'igHierarchicalGrid.*',
            locale: “bg”,
            regional :”en-GB”
        });
//Continue loading the widget

注: Infragistics エディターで jQuery UI 日付の選択ウィジットを使用するよう構成されている場合、日付の選択の地域設定を別に設定する必要があります。

ページで jquery-ui-i18n.js を参照する必要があります。

地域設定も指定する必要があります。$.datepicker.setDefaults($.datepicker.regional['ru']);

エディターの地域設定を設定するとき、ページで以下のファイルを参照する必要があります。

infragistics.ui.regional-i18n.js

コード例: ローカライズ リソースのマニュアル参照

以下のコード例では、ローカライズ リソースの参照をマニュアルで追加しています。上記のように、ローカライズ リソースは、他の Infragistics スクリプトに先行してください。

HTML の場合:

<!-- Needed JavaScript libraries -->
<!-- Modernizr library -->
<script scr="../scripts/modernizr.js" type="text/javascript"></script>
<!-- JQuery library -->
<script src="../scripts/jquery.js" type="text/javascript"></script>
<!-- JQuery UI library -->
<script src="../scripts/jquery-ui.js" type="text/javascript"></script>

<!-- Bulgarian locale -->
 <script src="../scripts/modules/js/i18n/infragistics-bg.js" type="text/javascript"></script> 
<!-- English (en-BG) regional settings -->
    <script src="../scripts/modules/i18n/regional/infragistics.ui.regional-en-GB.js" type="text/javascript"></script>

Infragistics コンテンツ配信ネットワーク (CDN)

Infragistics コンテンツ配信ネットワーク (CDN) の概要

JavaScript ファイルは、Infragistics CDN 上のホスト環境でも使用可能です。CDN を使用する利点の詳細は、「Infragistics コンテンツ配信ネットワーク (CDN)」のトピックを参照してください。

HTML の場合:

<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.loader.js">
</script>

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

オンラインで表示: GitHub