バージョン

igZoombar の構成

トピックの概要

目的

このトピックではコード例を使用して、ズーム動作および igZoombar™ コントロールのズーム ウィンドウを構成する方法を説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

  • igZoombar の概要: このトピックでは、igZoombar コントロールの概念的な情報を説明し、このコントロールがサポートするユーザー インタラクションや基本構成などを含む機能を紹介します。

  • igZoombar の追加: このトピックではコード例を使用して、igZoombar コントロールを HTML ページおよび ASP.NET MVC アプリケーションに追加する方法を説明します。

このトピックの内容

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

igZoombar デフォルトの構成

igZoombar デフォルト構成の概要

デフォルトで、ズーム範囲ウィンドウは igZoombar コントロールの中心に位置し、その幅全体 (= 100%) の 30% まで広がります。ズーム範囲ウィンドウのサイズは、全コントロール幅の 5% まで縮小できます。デフォルトのリフレッシュ モードは Immediate です。

igZoombar デフォルト構成の概要表

以下の表に、igZoombar プロパティとコントロールのデフォルト構成を形成する設定を示します。

プロパティ タイプ デフォルト値 説明
defaultZoomWindow.left number 35 ズーム範囲ウィンドウの始点側 (左) の端は、igZoombar コントロールの始点側 (左) の端から数えて幅全体の 35% の所に位置します。
defaultZoomWindow.width number 30 ズーム範囲ウィンドウの幅は、igZoombar コントロールの幅全体の 30% に設定されています。
zoomWindowMinWidth number 5 ズーム範囲ウィンドウのサイズは全コントロール幅の 5% まで縮小できます。
zoomAction string “immediate” デフォルトのリフレッシュ モードはImmediateです。

igZoombar 構成の概要

igZoombar 構成の概要表

以下の表は、igZoombar の構成可能な要素を示します。表の後に、要素の詳細が記載されています。

構成可能な項目 詳細 プロパティ
ズーム範囲ウィンドウの初期サイズおよび位置 ズーム範囲ウィンドウの初期幅および位置を構成できます。
ズーム範囲ウィンドウの最小サイズ ズーム範囲ウィンドウの最小幅は、ウィンドウをそれ以上縮小できない限界のサイズです。最小サイズは構成できます。
ズーム操作で最新の情報に更新 igZoombar コントロールは、実行するズーム操作に対するコントロールの反応に基づき、以下のリフレッシュ モードのいずれかに設定できます。
  • Immediate (デフォルト) - ズーム効果は、igZoombar コントロール操作に従って即座に適用されます。
  • Deferred - ズーム効果は操作を終了するまで遅延されます。
ズーム範囲ウィンドウの移動ステップ スクロールバーのナビゲーション ボタンをクリックまたはタップ、またはキーボードの右 / 左矢印キーを押すとズーム範囲ウィンドウが移動するステップを構成することができます。

ズーム範囲ウィンドウの初期サイズおよび位置の構成

概要

デフォルトで、ズーム範囲ウィンドウは 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 コントロールは、実行するズーム操作に対するコントロールの反応に基づき、以下のリフレッシュ モードのいずれかに設定できます。

  • Immediate (デフォルト) - ズーム効果は、igZoombar コントロール操作に従って即座に適用されます。
  • Deferred - ズーム効果は操作を終了するまで遅延されます。データが集約した環境でコントロールを操作する場合は igZoombar をこのモードに設定する必要があります。Immediate リフレッシュは、許容できない遅延またはアプリケーションのフリーズが発生した場合に必要となります。

リフレッシュ モードは zoomAction プロパティを使用して構成します。

プロパティ設定

以下の表では、目的の構成をプロパティ設定にマップしています。

構成するリフレッシュ モード 使用するプロパティ: 設定の選択肢:
遅延 zoomAction "deferred"
即時 zoomAction "immediate"

例

以下のコードは、igZoombar コントロールのリフレッシュ モードを Deferred に設定します。

プロパティ 値
zoomAction "deferred"

JavaScript の場合:

$("#zoom").igZoombar({ 
      zoomAction: "deferred"
});

関連コンテンツ

トピック

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

サンプル

このトピックについては、以下のサンプルも参照してください。

  • 基本のズームバー: このサンプルは、igZoombar を財務データを表示する igDataChart コントロールに統合する方法を紹介します。

オンラインで表示: GitHub