大きい [ 前のページ ] ボタン

最終更新日： 2024年7月22日
  • トピック：

作成対象：

  • 開発者
  • ユーザー

このボタンを選択またはタップすると、カタログ内の前のページに移動します。 このボタンはメイン コントロール バーに表示されます。 このボタンは、画面の領域を節約するために携帯電話には表示されません。 このボタンのサイズ、スキンおよび位置は、CSS を使用して設定できます。

メインビューア領域の CSS プロパティ

ボタンの外観は、次の CSS クラスセレクターで制御します。

.s7ecatalogviewer .s7ecatleftbutton .s7panleftbutton

CSS プロパティ説明
天メイン コントロール バーの上端からパディングを含めて配置します。
rightメインコントロールバーの右端からパディングを含めて配置します。
leftメイン コントロール バーの左の境界線からパディングを含めて配置します。
下メイン コントロール バーの下枠からパディングを含めて配置します。
幅ボタンの幅。
高さボタンの高さ。
background-image特定のボタン状態に対して表示される画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

CSS スプライト ール 参照してください。

NOTE
このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。

例 – 56 x 56 ピクセルの大きな「前のページ」ボタンを、垂直方向に中央に配置し、左側のビューアの境界線にアンカーして、4 つの異なるボタンの状態ごとに異なる画像を表示するように設定します。

.s7ecatalogviewer .s7ecatleftbutton .s7panleftbutton {
bottom:50%;
margin-bottom:-28px;
left:0px;
width:56px;
height:56px;
}
.s7ecatalogviewer .s7ecatleftbutton .s7panleftbutton [state='up'] {
background-image:url(images/v2/LeftButton_dark_up.png);
}
.s7ecatalogviewer .s7ecatleftbutton .s7panleftbutton [state='over'] {
background-image:url(images/v2/LeftButton_dark_over.png);
}
.s7ecatalogviewer .s7ecatleftbutton .s7panleftbutton [state='down'] {
background-image:url(images/v2/LeftButton_dark_down.png);
}
.s7ecatalogviewer .s7ecatleftbutton .s7panleftbutton [state='disabled'] {
background-image:url(images/v2/LeftButton_dark_disabled.png);
}

Experience Manager