共有を埋め込む embed-share

埋め込み共有ツールは、ソーシャル共有パネルに追加されたボタンと、ツールがアクティベートされたときに表示されるモーダルダイアログボックスで構成されます。 ボタンの位置は、ソーシャル共有ツールで完全に管理されます。

埋め込み共有ボタンの外観は、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7embedshare

埋め込み共有ツールの CSS プロパティ

ボタンの幅
高さ
ボタンの高さ。
background-image
特定のボタン状態に対して表示される画像。
background-position

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

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

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

CSS クラスに CSS プロパティを設定することで、ソーシャル共有パネルからボタン display:none 削除することができます。

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

例 – 28 x 28 ピクセルで、4 つの異なるボタン状態ごとに異なる画像を表示する埋め込み共有ボタンを設定するには:

.s7smartcropvideoviewer .s7embedshare {
 width:28px;
 height:28px;
}
.s7smartcropvideoviewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7smartcropvideoviewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7smartcropvideoviewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7smartcropvideoviewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}

ダイアログボックスがアクティブな場合に web ページを覆う背景のオーバーレイは、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7embeddialog .s7backoverlay

背景オーバーレイの CSS プロパティ

opacity
背景オーバーレイの不透明度。
の背景色の
背景のオーバーレイカラー。

例 – 背景オーバーレイを 70% の不透明度でグレーに設定するには:

.s7smartcropvideoviewer .s7embeddialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

デフォルトでは、モーダルダイアログボックスはデスクトップシステムでは画面の中央に表示され、タッチデバイスでは web ページ領域全体を取ります。 どの場合でも、ダイアログボックスの位置とサイズはコンポーネントで管理されます。 このダイアログボックスは、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7embeddialog .s7dialog

ダイアログボックスの CSS プロパティ

border-radius
ダイアログボックスの境界線の半径(ダイアログボックスがブラウザー全体を取らない場合)。
の背景色の
ダイアログボックスの背景色。
未設定または 100% に設定する必要があります。この場合、ダイアログボックスはブラウザーウィンドウ全体を取り込みます(タッチデバイスでは、このモードをお勧めします)。
高さ
未設定または 100% に設定する必要があります。この場合、ダイアログボックスはブラウザーウィンドウ全体を取り込みます(タッチデバイスでは、このモードをお勧めします)。

例 – ブラウザーウィンドウ全体を使用し、タッチデバイスの背景が白くなるようにダイアログボックスを設定するには:

.s7smartcropvideoviewer .s7touchinput .s7embeddialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

ダイアログボックスヘッダーは、アイコン、タイトルテキスト、閉じるボタンから構成されます。 ヘッダーコンテナは、

.s7smartcropvideoviewer .s7embeddialog .s7dialogheader

ダイアログボックスヘッダーの CSS プロパティ

padding
ヘッダーコンテンツの内側のパディング。

アイコンとタイトルテキストは、で制御される追加のコンテナにラップされます

.s7smartcropvideoviewer .s7embeddialog .s7dialogheader .s7dialogline

ダイアログラインの CSS プロパティ

padding
ヘッダーアイコンとタイトルの内部パディング

ヘッダーアイコンは、次の CSS クラスセレクターで制御します

.s7smartcropvideoviewer .s7embeddialog .s7dialogheadericon

ダイアログボックスのヘッダーアイコンの CSS プロパティ

アイコンの幅。
高さ
アイコンの高さ。
background-image
アイコン画像。
background-position

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

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

ヘッダーのタイトルは、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7embeddialog .s7dialogheadertext

ダイアログボックスのヘッダーテキストの CSS プロパティ

フォントの太さの
フォントの線幅。
font-size
フォントの高さ。
フォントファミリーの
フォントファミリー。
padding
内部テキストのパディング。

「閉じる」ボタンは、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7embeddialog .s7closebutton

閉じるボタンの ​の CSS プロパティ

ヘッダーコンテナに対する垂直方向のボタンの位置。
right
ヘッダーコンテナに対する水平方向のボタンの位置。
ボタンの幅
高さ
ボタンの高さ。
padding
ボタンの内側のパディング。
background-image
各状態のボタン画像。
background-position

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

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

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

閉じるボタンのツールヒントとダイアログボックスのタイトルは、ローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。

例 – パディング、24 x 14 ピクセルのアイコン、太字の 16 ポイントのタイトル、28 x 28 ピクセルの「閉じる」ボタンを含むダイアログボックスヘッダーを設定する 最後に、ダイアログボックスのコンテナの上から 2 ピクセル、右から 2 ピクセルの位置を指定します。

.s7smartcropvideoviewer .s7embeddialog .s7dialogheader {
 padding: 10px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogheadericon {
    background-image: url("images/sdk/dlgembed_cap.png");
    height: 14px;
    width: 24px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7smartcropvideoviewer .s7embeddialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7smartcropvideoviewer .s7embeddialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

ダイアログフッターは、「キャンセル」ボタンで構成されています。 フッターコンテナは、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7embeddialog .s7dialogfooter

ダイアログボックスのフッター ​の CSS プロパティ

境界線
フッターをダイアログボックスの他の部分と視覚的に区別する際に使用する境界線。

フッターには、ボタンを保持する内部コンテナがあります。 次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7embeddialog .s7dialogbuttoncontainer

ダイアログボックスのボタンコンテナの CSS プロパティ

padding
フッターとボタンの間の内側のパディング。

「すべてを選択」ボタンは、次の CSS クラスセレクターで制御されます。

.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton

ボタンは、デスクトップシステムでのみ使用できます。

「すべてを選択」ボタンの CSS プロパティ

ボタンの幅
高さ
ボタンの高さ。
color
各状態のボタンのテキストの色。
の背景色の
各状態のボタンの背景色
NOTE
「すべてを選択」ボタンでは、state 属性セレクターがサポートされており、異なるボタン状態に異なるスキンを適用するために使用できます。

「キャンセル」ボタンは、次の CSS クラスセレクターで制御されます。

.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton

ダイアログボックスのキャンセルボタンの CSS プロパティ

ボタンの幅
高さ
ボタンの高さ。
color
各状態のボタンのテキストの色。
の背景色の
各状態のボタンの背景色
NOTE
キャンセル ボタンでは、state 属性セレクターがサポートされており、これを使用して、ボタンの状態に応じて異なるスキンを適用できます。

さらに、両方のボタンは共通の CSS クラスを共有します。このクラスには、他のダイアログボックスのボタンと同じ CSS 設定を含めることができます。

.s7smartcropvideoviewer .s7embeddialog .s7dialogfooter .s7button

ボタンの CSS プロパティ

フォントの太さの
ボタンのフォントの線幅。
font-size
ボタンのフォントサイズ。
フォントファミリーの
ボタンのフォントファミリー。
line-height
ボタン内のテキストの高さ。 垂直方向の位置揃えに影響します。
ボックスの影の
ドロップシャドウ。
margin-right
ボタンの右の余白。

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

例 – 64 x 34 の「キャンセル」ボタンを持つダイアログボックスのフッターを設定し、ボタンの状態ごとにテキストカラーと背景色が異なるようにするには、次の手順に従います。

.s7smartcropvideoviewer .s7embeddialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

メインダイアログ領域は、ヘッダーとフッターの間に、スクロール可能なダイアログコンテンツと、右側のスクロールパネルを含んでいます。 いずれの場合も、コンポーネントはこの領域の幅を管理し、CSS で設定することはできません。 メインダイアログ領域は、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7embeddialog .s7dialogviewarea

ダイアログボックスの表示エリアの CSS プロパティ ​

高さ
メイン ダイアログ ボックス領域の高さです。 このオプションは、ダイアログボックスがデスクトップモードで動作する場合にのみ指定してください。 ダイアログ ボックスのサイズがブラウザ ウィンドウ全体に表示される場合は、この設定は適用されません。
の背景色の
メインのダイアログボックス領域の背景色。
margin
外側余白。

例 – メインダイアログボックス領域の高さを 300 ピクセルに設定し、余白を 10 ピクセルにして背景を白くするには:

.s7smartcropvideoviewer .s7embeddialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}

すべてのフォームコンテンツ(ラベルや入力フィールドなど)は、で制御されるコンテナに格納されます

.s7smartcropvideoviewer .s7embeddialog .s7dialogbody

このコンテナの高さがメインダイアログボックスの領域よりも大きく表示される場合、コンポーネントによって垂直スクロールが自動的に有効になります。

ダイアログボックスの本文の CSS プロパティ

padding
内側のパディング

例 – フォームコンテンツの 10 ピクセルのパディングを設定するには:

.s7smartcropvideoviewer .s7embeddialog .s7dialogbody {
    padding: 10px;
}

ダイアログボックスのフォームのすべての静的ラベルは、次のコントロールで制御されます

.s7smartcropvideoviewer .s7embeddialog .s7dialoglabel

このクラスは、フォームユーザーインターフェイスの様々な場所でテキストに適用できるので、ラベルのサイズや位置の制御には適していません。

ダイアログボックスのラベルの CSS プロパティ。 ​

フォントの太さの
ラベルのフォントの線幅。
font-size
ラベルのフォントサイズ。
フォントファミリーの
ラベルのフォントファミリー。
color
ラベルのテキストの色。

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

例 – すべてのラベルを 9 ピクセルのフォントを使用してグレー、太字に設定するには:

.s7smartcropvideoviewer .s7embeddialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

埋め込みコードの上に表示されるテキストコピーのサイズは、次の CSS クラスセレクターで制御されます。

.s7smartcropvideoviewer .s7embeddialog .s7dialoginputwide

ダイアログボックス入力全体フィールドの CSS プロパティ

入力フィールドの幅。
padding
内側のパディング

例 – テキストコピーの幅を 430 ピクセルに設定し、下部に 10 ピクセルのパディングを含める場合:

.s7smartcropvideoviewer .s7embeddialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

埋め込みコードはコンテナにラップされ、次の CSS クラスセレクターで制御されます。

.s7smartcropvideoviewer .s7embeddialog .s7dialoginputcontainer

ダイアログボックス入力コンテナの CSS プロパティ

埋め込みコードコンテナの幅。
境界線
埋め込みコードコンテナを囲むボーダー。
padding
内側のパディング

例 – 埋め込みコードテキストの周囲に 1 ピクセルグレーの境界線を設定する場合は、幅を 430 ピクセルにし、10 ピクセルのパディングにします。

.s7smartcropvideoviewer .s7embeddialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 10px;
    width: 430px;
}

実際の埋め込みコードテキストは、次の CSS クラスセレクターで制御されます。

.s7smartcropvideoviewer .s7embeddialog .s7dialoginputcontainer

ダイアログボックス入力コンテナの CSS プロパティ

ワードラップ
ワードラップのスタイル。

例 – ワードラッピングを使用するように埋め込みコードを設定する break-word は:

.s7smartcropvideoviewer .s7embeddialog .s7dialogmessage {
    word-wrap: break-word;
}

埋め込みサイズのラベルとドロップダウンはダイアログボックスの下部にあり、次の CSS クラスセレクターで制御されるコンテナに配置します。

.s7smartcropvideoviewer .s7embeddialog .s7dialogembedsizepanel

ダイアログボックス埋め込みサイズパネルの CSS プロパティ

padding
内側のパディング

例 – 10 ピクセルのパディングを持つ埋め込みサイズパネルを設定するには:

.s7smartcropvideoviewer .s7embeddialog .s7dialogembedsizepanel {
    padding: 10px;
}

埋め込みサイズラベルのサイズと配置は、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7embeddialog .s7dialogembedsizepanel

ダイアログボックス埋め込みサイズパネルの CSS プロパティ

垂直方向の位置揃え
垂直方向のラベルの配置。
ラベルの幅。

例 – 埋め込みサイズ ラベルを上揃えおよび幅 80 ピクセルに設定するには:

.s7smartcropvideoviewer .s7embeddialog .s7dialogembedsizelabel {
    vertical-align: top;
    width: 80px;
}

埋め込みサイズ コンボボックスの幅は、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7embeddialog .s7combobox

コンボボックスの CSS プロパティ

コンボボックスの幅。
NOTE
コンボボックスでは、true および false の可能な値を持つ expanded 属性セレクターがサポートされています。 true の値は、コンボボックスに事前定義済みの埋め込みサイズのいずれかが表示される場合に使用されるので、使用可能なすべての幅を取る必要があります。 false の値は、コンボボックスで「カスタムサイズ」オプションが選択されている場合に使用されます。そのため、カスタムの幅および高さの入力フィールドを配置できるように、値を縮小する必要があります。

例 – 事前定義済みの項目を表示する場合に埋め込みサイズ コンボボックスの幅を 300 ピクセルに、カスタムサイズを表示する場合に幅 110 ピクセルに設定する:

.s7smartcropvideoviewer .s7embeddialog .s7combobox[expanded="true"] {
    width: 300px;
}
.s7smartcropvideoviewer .s7embeddialog .s7combobox[expanded="false"] {
    width: 110px;
}

コンボボックステキストの高さは、特別な内部要素によって定義され、次の CSS クラスセレクターで制御されます。

.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxtext

コンボボックステキストの CSS プロパティ

高さ
コンボボックスのテキストの高さ。

例 – 埋め込みサイズ コンボボックスのテキストの高さを 40 ピクセルに設定するには:

.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxtext {
    height: 40px;
}

コンボボックスの右側には「ドロップダウン」ボタンがあり、次の CSS クラスセレクターで制御されます。

.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton

コンボボックスボタンの CSS プロパティ

コンボボックス内の垂直方向のボタンの位置。
right
コンボボックス内の水平ボタンの位置。
ボタンの幅
高さ
ボタンの高さ。
background-image
各状態のボタン画像。
background-position

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

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

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

例 – 「ドロップダウン」ボタンを 28 x 28 ピクセルに設定し、状態ごとに別々の画像を持つ場合:

.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton {
 width:28px;
 height:28px;
}
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}

コンボボックスが開かれたときに表示される埋め込みサイズのリストを含むパネルは、次の CSS クラスセレクターで制御されます。

.s7smartcropvideoviewer .s7embeddialog .s7comboboxdropdown

パネルのサイズと位置は、コンポーネントによって制御されます。 CSS を使用して変更することはできません。

コンボボックスドロップダウンの CSS プロパティ

境界線
パネルの境界線。

例 – コンボボックスパネルの境界線を 1 ピクセルのグレーに設定するには:

.s7smartcropvideoviewer .s7embeddialog .s7comboboxdropdown {
    border: 1px solid #CCCCCC;
}

ドロップダウンパネル内の 1 つの項目。次の CSS クラスセレクターで制御されます。

.s7smartcropvideoviewer .s7embeddialog .s7dropdownitemanchor

ドロップダウンアイテムアンカーの CSS プロパティ

の背景色の
項目の背景。

例 – コンボボックスのパネル項目の背景を白に設定するには:

.s7smartcropvideoviewer .s7embeddialog .s7dropdownitemanchor {
    background-color: #FFFFFF;
}

コンボボックスパネル内で選択された項目の左側に表示されるチェックマーク。以下の CSS クラスセレクターで制御されます。

.s7smartcropvideoviewer .s7embeddialog .s7checkmark

チェックボックスの CSS プロパティ

アイコンの幅。
高さ
アイコンの高さ。
background-image
項目画像。
background-position

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

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

例 – チェックマークアイコンを 25 x 25 ピクセルに設定するには:

.s7smartcropvideoviewer .s7embeddialog .s7checkmark {
    background-image: url("images/sdk/cboxchecked.png");
    height: 25px;
    width: 25px;
}

埋め込みサイズ コンボボックスで「カスタムサイズ」オプションを選択すると、ダイアログボックスの右側に 2 つの追加入力フィールドが表示され、ユーザーがカスタム埋め込みサイズを入力できます。 これらのフィールドは、次の CSS クラスセレクターで制御されるコンテナにラップされます。

.s7smartcropvideoviewer .s7embeddialog .s7dialogcustomsizepanel

ダイアログボックスのカスタムサイズパネルの CSS プロパティ

left
「埋め込みサイズ」コンボボックスからの距離。

例 – カスタムサイズの入力フィールドパネルをコンボボックスの右側の 20 ピクセルに設定するには:

.s7smartcropvideoviewer .s7embeddialog .s7dialogcustomsizepanel {
    left: 20px;
}

各カスタムサイズ入力フィールドは、境界線をレンダリングし、フィールド間の余白を設定するコンテナにラップされます。 次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7embeddialog .s7dialogcustomsize

ダイアログボックスのカスタムサイズの CSS プロパティ

境界線
入力フィールドの周囲の境界線。
入力フィールドの幅。
margin
フィールドの余白を入力します。
padding
入力フィールドのパディング。

例 – カスタムサイズの入力フィールドを 1 ピクセルのグレーの境界線、余白、パディングを持ち、幅が 70 ピクセルになるように設定するには:

.s7smartcropvideoviewer .s7embeddialog .s7dialogcustomsize {
    border: 1px solid #CCCCCC;
    margin-right: 20px;
    padding-left: 2px;
    padding-right: 2px;
    width: 70px;
}

垂直方向のスクロールが必要な場合、スクロールバーはダイアログボックスの右端の近くのパネルにレンダリングされます。このパネルは、次の CSS クラスセレクターで制御されます。

.s7smartcropvideoviewer .s7embeddialog .s7dialogscrollpanel

ダイアログボックスのスクロールパネルの CSS プロパティ

パネル幅をスクロールします。

例 – スクロールパネルの幅を 44 ピクセルに設定する

.s7smartcropvideoviewer .s7embeddialog .s7dialogscrollpanel {
    width: 44px;
}

スクロールバー領域の外観は、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7embeddialog .s7scrollbar

スクロールバーの CSS プロパティ

スクロール バーの幅。
スクロールパネルの上部からオフセットされた垂直スクロールバー。
スクロールパネルの下部からオフセットされた垂直スクロールバー。
right
水平スクロールバーをスクロールパネルの右端からオフセットします。

例 – 幅 28 ピクセルで、スクロールパネルの上、右および下から 8 ピクセルのマージンを持つスクロールバーを設定するには、次のようにします。

.s7smartcropvideoviewer .s7embeddialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

スクロールバートラックは、上部と下部のスクロールボタンの間の領域です。 トラックの位置と高さが自動的に設定されます。 トラックは、次の CSS クラスセレクターで制御します

.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolltrack

スクロールバートラックの CSS プロパティ

トラックの幅
の背景色の
背景色を追跡する。

例 – 幅 28 ピクセルで背景がグレーのスクロールバーのトラックを設定するには:

.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

スクロールバーの親指は、スクロールトラック領域内で垂直に移動します。 垂直方向の位置は、コンポーネントのロジックによって完全に制御されます。 ただし、コンテンツの量に応じて親指の高さが動的に変化することはありません。 親指の高さやその他の側面は、次の CSS クラスセレクターで設定できます。

.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb

スクロールバーのサムネールの CSS プロパティ

親指の幅
高さ
親指の高さ
padding-top
トラックの上部の間の垂直方向のパディング。
padding-bottom
トラックの下部の間の垂直方向のパディング。
background-image
特定のサムネール状態で表示される画像。
NOTE
Thumb は、updownoverdisabled などの異なるサムステートに異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

例 – 28 x 45 ピクセルのスクロールバーの親指を設定し、上下に 10 ピクセルのマージンがあり、状態ごとに異なるアートワークを持つ場合:

.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

上部と下部のスクロールボタンの外観は、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

CSS の top、left、bottom、right プロパティを使用してスクロールボタンを配置することはできません。 代わりに、ビューアロジックによって自動的に配置されます。

上下のスクロールボタンの CSS プロパティ

ボタンの幅
高さ
ボタンの高さ。
background-image
特定のボタン状態に対して表示される画像。
background-position

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

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

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

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

例 – 28 x 32 ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定するには:

.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8