このトピックでは、Web アプリケーションで Ignite UI for jQuery を操作して、必要なリソースを管理する方法について説明します。
このトピックは、以下のセクションで構成されます。
Ignite UI for jQuery を使用して作業する場合、Web アプリケーションで Infragistics リソースを参照してください。これらのリソースは、4 種類の方法で参照できます。
カスタム JavaScript ファイルを含む: これは Ignite UI for jQuery JavaScript ファイルを参照する方法です。Ignite UI for jQuery コントロールのカスタム ダウンロードを作成できます。
Infragistics Loader の使用: Infragistics Loader は、すべての Infragistics リソース (スタイルおよびスクリプト) を解決するために使用されます。
結合および圧縮された JavaScript ファイルの使用: すべてのコンポーネントおよびその依存関係を含む結合したファイルを使用できます。
特定の JavaScript ファイルの組み込み : すべての必要ファイルを手動で参照できます。
Ignite UI for jQuery カスタム ビルドを作成するには、カスタム ダウンロード ページを参照してください。カスタム ビルドには 2 つの利点があります。
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 はすべての 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,
…
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>
Modernizr、JQuery、および JQuery UI JavaScript ライブラリは、Ignite UI for jQuery を含むプロジェクトに必ず必要なライブラリです。Modernizr ライブラリがブラウザの機能を検出し、これによってコントロールはタッチまたは非タッチ環境であるかを識別することができます。
上述のライブラリを追加する必要がある参照。
HTML の場合:
<script scr="../scripts/modernizr.js" type="text/javascript"></script>
HTML の場合:
<script src="../scripts/jquery.js" type="text/javascript"></script>
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 機能に依存し、それを内部で使用するためです。
ローカライズ リソースの参照方法には２通りあります。
以下の例では、上述の JavaScript ファイルがすでにあるものと仮定して、ブルガリア語ローカライズ リソースを追加しています。
以下のコード例では、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>
JavaScript ファイルは、Infragistics CDN 上のホスト環境でも使用可能です。CDN を使用する利点の詳細は、「Infragistics コンテンツ配信ネットワーク (CDN)」のトピックを参照してください。
HTML の場合:
<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.loader.js">
</script>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
Ignite UI for jQuery の JavaScript ファイル: このトピックは、Ignite UI for jQuery™ に含まれるコントロールを使用して作業するために必要な JavaScript ファイルへの参照です。
Infragistics Loader の使用: このトピックでは、Infragistics Loader を使用して Ignite UI for jQuery を使用して作業するために必要なリソースを管理する方法について説明します。
Ignite UI for jQuery のスタイル設定とテーマ設定: アプリケーションの設計時間の設定に関する指示、生産で CSS を使用するためのオプション、およびテーマの作成またはカスタマイズに関する概要です。
Ignite UI for jQuery 対応 Infragistics コンテンツ配信ネットワーク (CDN): Ignite UI for jQuery 対応 Infragistics Content Delivery Network (CDN) の使用方法。
オンラインで表示: GitHub