このトピックではコード例を使用して、ズーム動作および igZoombar
™ コントロールのズーム ウィンドウを構成する方法を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igZoombar の概要: このトピックでは、igZoombar
コントロールの概念的な情報を説明し、このコントロールがサポートするユーザー インタラクションや基本構成などを含む機能を紹介します。
igZoombar の追加: このトピックではコード例を使用して、igZoombar
コントロールを HTML ページおよび ASP.NET MVC アプリケーションに追加する方法を説明します。
このトピックは、以下のセクションで構成されます。
デフォルトで、ズーム範囲ウィンドウは igZoombar
コントロールの中心に位置し、その幅全体 (= 100%) の 30% まで広がります。ズーム範囲ウィンドウのサイズは、全コントロール幅の 5% まで縮小できます。デフォルトのリフレッシュ モードは Immediate です。
以下の表に、igZoombar
プロパティとコントロールのデフォルト構成を形成する設定を示します。
プロパティ | タイプ | デフォルト値 | 説明 |
---|---|---|---|
defaultZoomWindow.left | number | 35 | ズーム範囲ウィンドウの始点側 (左) の端は、igZoombar コントロールの始点側 (左) の端から数えて幅全体の 35% の所に位置します。 |
defaultZoomWindow.width | number | 30 | ズーム範囲ウィンドウの幅は、igZoombar コントロールの幅全体の 30% に設定されています。 |
zoomWindowMinWidth | number | 5 | ズーム範囲ウィンドウのサイズは全コントロール幅の 5% まで縮小できます。 |
zoomAction | string | “immediate” | デフォルトのリフレッシュ モードはImmediateです。 |
以下の表は、igZoombar
の構成可能な要素を示します。表の後に、要素の詳細が記載されています。
構成可能な項目 | 詳細 | プロパティ |
---|---|---|
ズーム範囲ウィンドウの初期サイズおよび位置 | ズーム範囲ウィンドウの初期幅および位置を構成できます。 | |
ズーム範囲ウィンドウの最小サイズ | ズーム範囲ウィンドウの最小幅は、ウィンドウをそれ以上縮小できない限界のサイズです。最小サイズは構成できます。 | |
ズーム操作で最新の情報に更新 |
igZoombar コントロールは、実行するズーム操作に対するコントロールの反応に基づき、以下のリフレッシュ モードのいずれかに設定できます。
|
|
ズーム範囲ウィンドウの移動ステップ | スクロールバーのナビゲーション ボタンをクリックまたはタップ、またはキーボードの右 / 左矢印キーを押すとズーム範囲ウィンドウが移動するステップを構成することができます。 |
デフォルトで、ズーム範囲ウィンドウは igZoombar
コントロールの始点側 (左) の端から数えてその幅全体の 35% の所に位置し、ズーム範囲ウィンドウの幅はコントロールの幅全体の 30% に設定されています。これにより、ズーム範囲ウィンドウはスクロール可能な範囲の中心に効果的に配置されます。
ウィンドウの幅を変更して、範囲内のどこにでも配置できます。
以下の表では、目的の構成をプロパティ設定にマップしています。すべてのプロパティは、コントロールの始点側 (左) の端から数えた、その幅全体に対するパーセンテージの数として設定されます。
構成の目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
ズーム範囲ウィンドウの始点側 (左) の端の位置 | defaultZoomWindow.left | 任意のパーセンテージ数 |
ズーム範囲ウィンドウの幅 | defaultZoomWindow.width | 任意のパーセンテージ数 |
以下のコードは、以下の設定の結果、igZoombar
コントロールの初期化の際に、範囲の右端に配置されるズーム範囲ウィンドウを示します。
プロパティ | 値 |
---|---|
defaultZoomWindow.left | 70 |
defaultZoomWindow.width | 30 |
JavaScript の場合:
$("#zoom").igZoombar({
defaultZoomWindow: {
left: 70,
width: 30
}
});
ズーム範囲ウィンドウの最小幅は、ウィンドウをそれ以上縮小 (ズームイン) できない限界のサイズです。この制限により、igZoombar
と統合した範囲ベースのコントロールのズームしきい値が igZoombar
よりも小さい場合に発生する競合を防止します。ズーム範囲ウィンドウの最小幅を設定すると、しきい値を超えないように抑止できます。
ズーム範囲ウィンドウの最小幅は構成できます。デフォルトで、最小幅は igZoombar
コントロールの幅全体の 5% に設定されています。
以下の表は、任意の構成とそれを管理するプロパティ設定のマッピングを示します。
構成の目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
ズーム範囲ウィンドウの最小サイズ | zoomWindowMinWidth | コントロールの始点側 (左) の端から数えた、その幅全体に対する任意のパーセンテージ数 |
以下のコードは、ズーム範囲ウィンドウの最小幅を igZoombar
コントロールの始点側 (左) の端から数えて、その幅全体の 10% の所に設定します。
プロパティ | 値 |
---|---|
zoomWindowMinWidth | 10 |
JavaScript の場合:
$("#zoom").igZoombar({
zoomWindowMinWidth: 10
});
リフレッシュ モードは、igZoombar
が添付されているコンポーネントのリフレッシュ動作を制御します。igZoombar
コントロールは、実行するズーム操作に対するコントロールの反応に基づき、以下のリフレッシュ モードのいずれかに設定できます。
igZoombar
コントロール操作に従って即座に適用されます。igZoombar
をこのモードに設定する必要があります。Immediate リフレッシュは、許容できない遅延またはアプリケーションのフリーズが発生した場合に必要となります。リフレッシュ モードは zoomAction プロパティを使用して構成します。
以下の表では、目的の構成をプロパティ設定にマップしています。
構成するリフレッシュ モード | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
遅延 | zoomAction | "deferred" |
即時 | zoomAction | "immediate" |
以下のコードは、igZoombar
コントロールのリフレッシュ モードを Deferred に設定します。
プロパティ | 値 |
---|---|
zoomAction | "deferred" |
JavaScript の場合:
$("#zoom").igZoombar({
zoomAction: "deferred"
});
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
アクセシビリティの遵守 (igZoombar): このトピックは、igZoombar
コントロールのアクセシビリティ機能を説明し、このコントロールを含むページのアクセシビリティ遵守を実現する方法に関する情報を提供します。
既知の問題と制限 (igZoombar): このトピックでは、igZoombar
コントロールの既知の問題と制限、その回避策について説明します。
jQuery および MVC API リファレンス リンク (igZoombar): このトピックでは、igZoombar
コントロールと ASP.NET MVC ヘルパーに関する API 参照ドキュメントへのリンクを提供します。
このトピックについては、以下のサンプルも参照してください。
igZoombar
を財務データを表示する igDataChart
コントロールに統合する方法を紹介します。オンラインで表示: GitHub