スマートサンプル（サンプル商品一覧照会）

!++++

Ver.5　[ 機能を見る ] [ 機能設定を見る ]
Ver.6　[ 機能を見る ] [ 機能設定を見る ]

!----

1. はじめに

スマートデバイスオプションを利用して、明細ブロックが画面幅に応じてレスポンシブ表示されるサンプルです。
画面幅が狭く横スクロールが発生する明細ブロックについて、明細幅が閾値（本サンプルでは 1000px）以上の場合は縦方向に自動切替し、横スクロールなしで閲覧できる方法を紹介します。

2. 利用条件

この機能を利用するには、スマートデバイスオプションの有償ライセンスが必要です。

3. サンプル機能の内容と確認ポイント

このサンプルは、明細テーブルの幅が閾値（本サンプルでは 1000px）を上回る場合に、テーブルを縦方向に切り替えて横スクロールが発生しないようにする仕組みを示しています。

設定の手順は次の通りです。

1. 明細ブロックの用意
   　レスポンシブ対象となる明細ブロックを用意します。

2. Client-side JavaScriptによるレスポンシブ制御
   TALON スマートデバイスオプションで提供する API を利用して制御を実装します。
   これらは標準機能には含まれない API であり、スマートデバイスオプション専用の拡張機能です。
   　- setResponsivePro : 対象の明細ブロックをレスポンシブ対象として登録
   　- setResponsiveMediaWidth : レスポンシブを有効化する画面幅の閾値（例：1000px）を指定 

3. CSS 設定（必要に応じて）
   ヘッダー領域（#topHeader）を非表示にする設定を行います。

補足：
　- 閾値 1000px は例示であり、環境に応じて調整可能です。
　- CSS の設定で !important を指定する場合がありますが、必須ではありません。
　  環境に応じて必要な場合のみ利用してください。

 

🔍 確認いただけるポイント

1. 指定した明細ブロックに、レスポンシブ設定が適用されていること。

2. ヘッダー領域が非表示となっていること。