最初のページのボタン first-page-button
このボタンを選択またはタップすると、ユーザーはカタログの最初のページに移動します。 このボタンは、デスクトップシステムおよびタブレットのメインコントロールバーに表示されます。携帯電話では、セカンダリコントロールバーに追加されます。 CSSを使用して、このボタンのサイズ、肌、位置を調整できます。
メイン ビューア領域のCSS プロパティ
ボタンの外観は、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton
CSS プロパティ
説明
上位
メインコントロールバー（デスクトップシステムおよびタブレット）またはセカンダリコントロールバー（携帯電話）の上部境界線（パディングを含む）からの位置。
右
メインコントロールバー（デスクトップシステムおよびタブレット）またはセカンダリコントロールバー（携帯電話）の右端から、パディングを含む位置を指定します。
さんがを残しました
メインコントロールバー（デスクトップシステムおよびタブレット）またはセカンダリコントロールバー（携帯電話）の左端（パディングを含む）からの位置。
下
メインコントロールバー（デスクトップシステムおよびタブレット）またはセカンダリコントロールバー（携帯電話）の下部境界（パディングを含む）からの位置。
幅
ボタンの幅。
の高さ
ボタンの高さ。
背景画像
特定のボタン状態に対して表示される画像。
background-position
CSS スプライトを使用する場合は、アートワークスプライト内に配置します。
CSS スプライトも参照してください。
NOTE
このボタンは、
state属性セレクターをサポートしています。このセレクターを使用すると、異なるスキンを異なるボタンの状態に適用できます。ボタンツールのヒントはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 – 28 x 28 ピクセルで、メインコントロールバーの左端から4 ピクセルと220 ピクセルに配置された最初のページボタンを設定する。 最後に、4つの異なるボタンの状態ごとに異なる画像が表示されます。
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton {
bottom:4px;
left:220px;
width:32px;
height:32px;
}
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton [state='up'] {
background-image:url(images/v2/FirstPageButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton [state='over'] {
background-image:url(images/v2/FirstPageButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton [state='down'] {
background-image:url(images/v2/FirstPageButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton [state='disabled'] {
background-image:url(images/v2/FirstPageButton_dark_disabled.png);
}
recommendation-more-help
dynamic-media-developer-resources-help-aem-viewers-ref