このトピックは、Ignite UI for jQuery コントロールがタッチ対応の環境の概要、ベスト プラクティス、特定の Ignite UI for jQuery コントロールのタッチ サポートの詳細を提供します。
このトピックは、以下のセクションで構成されます。
すべての Ignite UI for jQuery コントロールがタッチ操作をサポートしています。タッチ操作と互換性のある動作をサポートするため、新しい機能とコンポーネントを追加することで、このサポートが可能になります。
タッチ操作対応環境で表示されたどの Ignite UI for jQuery コントロールも、デスクトップ プラットフォームとタッチ プラットフォームで同じ外観を持ち、同じ動作をします。たとえば、igGrid™ ウィジェットはタッチ デバイスの完全に新しいコントロールではありませんが、タッチ操作対応環境で使用できるタッチ操作に最適化された機能が組み込まれています。ほとんど構成が必要ないこの適応性により、アプリケーションにマルチプラットフォーム コントロールを持たせることができます。個々のコントロールに関する詳細については、「コントロールの概要」のセクションを参照してください。
注: Modernizr JavaScript ライブラリを Ignite UI for jQuery コントロールとともに使用することをお勧めします。これらのコントロールは Modernizr がなくても正常に動作しますが、ライブラリがページで使用できる場合、よりタッチしやすいモードに適応します。
すべての Ignite UI for jQuery コントロールは、タッチ操作対応環境で動作している場合、デフォルトで並べ替えをサポートしています。並べ替え動作は、内部 igScroll コンポーネントで制御されます。
タッチ環境でスクロール動作を使用するには、ページで igScroll スクリプトを参照する必要があります。Infragistics® Loader を使用する場合、これは自動的に参照されています。Loader を使用しない場合、手動的に参照するか、igScroll を含む infragistics.core.js ファイルを参照する必要があります。
手動的に igScroll を参照する:
HTML の場合:
<script type="text/javascript" src="js/modules/infragistics.ui.scroll.js"></script>
igScroll コンポーネントを使用して、<div>
のような他の HTML 要素をスクロールできるようにします。
HTML の場合:
<div data-scroll=”true”></div>
このようにして、igScroll コンポーネントは、タッチ対応のブラウザーでコンテナーをスクロールできるようにします。
Ignite UI for jQuery コントロールは、タッチ操作だけでなく、標準のデスクトップ Web ブラウザー操作にも最適化されています。stock コントロールを使用することに加えて、各コントロールで最高のパフォーマンスと応答を実現するため、以下に示すいくつかのベスト プラクティスに従ってください。
HTML の場合:
<meta name="viewport"
content="width=device-width,
initial-scale=1,
maximum-scale=2.5,
minimum-scale=0.1,
user-scalable=yes" />
以下の表は、タッチ対応の環境でコントロールの詳細を表示します。表の後に、アップデートされた各コントロールのその他の詳細が紹介されています。
コントロール | 説明 |
---|---|
igGrid | 一部の機能に、タッチ操作に最適化されているプロパティが組み込まれています。 |
igHierarchicalGrid | igHierarchicalGrid™ は内部的に igGrid ウィジェットを使用します。したがって、igGrid のすべてのタッチ対応機能も igHierarchicalGrid ウィジェットで使用できます。 |
igPopover | コントロールは、タッチ環境で完全に機能します。唯一の制限はアクティブ化イベントを構成できないことです。アクティブ化が設定されたイベントでも、タッチ対応デバイスでタップした場合は常にポップオーバーが表示されます。 |
igVideoPlayer | Modernizr ライブラリが使用できる場合、igVideoPlayer™ はデフォルト ブラウザーのビデオ プレーヤーにフォールバックします。 |
以下のリストに、タッチ機能をサポートするプロパティがあるか、タッチ操作対応環境で正常に動作するよう特殊な変更が必要な igGrid 機能についてまとめています。
機能 | コンテンツ |
---|---|
機能セレクター |
関連トピック関連サンプル |
非表示 |
関連トピック関連サンプル |
Groupby |
関連トピック関連サンプル |
複数選択 |
関連トピック関連サンプル |
複数並べ替え |
関連トピック関連サンプル |
行セレクター |
関連トピック関連サンプル |
ツールチップ |
関連トピック関連サンプル |
igHierarchicalGrid 機能をタッチ対応にするには、igGrid コントロールと同じように設定を構成します。
以下のリストに、タッチ機能をサポートするプロパティについて、およびタッチ操作対応環境で正常に動作するよう特殊な変更が必要な igHierarchicalGrid 機能についてまとめています。
注: igHierarchicalGrid は内部的に igGrid を使用しているため、これらの機能に関するトピックは igGrid トピックになります。唯一の例外は、2 つのグリッド間でモーダル ダイアログが異なる igHierarchicalGrid の igGrid Group By 機能です。
機能 | コンテンツ |
---|---|
機能セレクター |
関連トピック関連サンプル |
非表示 |
関連トピック関連サンプル |
Groupby |
関連トピック関連サンプル |
複数選択 |
関連トピック |
複数並べ替え |
関連トピック |
行セレクター |
関連トピック関連サンプル |
ツールチップ |
関連トピック関連サンプル |
igPopover はデフォルトでタッチ デバイスにサポートされます。タッチ環境では、activating イベントを制御できません。コントロールは常にタップで表示されます。activating として設定されるイベントは無視されます。つまり、showOn オプションの設定は無視されます。
Modernizr ライブラリがページで使用できる場合にモバイル デバイスで igVideoPlayer コントロールを実行しているとき、ブラウザーのデフォルト ビデオ プレーヤーがユーザーに表示されます。Modernizr ライブラリが使用できない場合、実際の igVideoPlayer コントロールがユーザーに表示されます (igVideoPlayer コントロールの方が、デフォルトのコントロールよりタッチ機能が少ない場合もあります)。
オンラインで表示: GitHub