電子メール共有 email-share
電子メール共有ツールは、ソーシャル共有パネルに追加されるボタンと、ツールがアクティブになったときに表示されるモーダルダイアログボックスで構成されます。 ボタンの位置は、Social 共有ツールで完全に管理されます。
電子メール共有ボタンの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emailshare
電子メール共有ツールの CSS プロパティ
このボタンは、 state
属性セレクター。ボタンの状態ごとに異なるスキンを適用するのに使用できます。
このボタンを Social 共有パネルから削除するには、 display:none
CSS プロパティを CSS クラスに設定する。
ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 — 28 x 28 ピクセルで、ボタンの 4 つの状態ごとに異なる画像を表示する電子メール共有ボタンを設定するには、次のように記述します。
.s7videoviewer .s7emailshare {
width:28px;
height:28px;
}
.s7videoviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7videoviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7videoviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7videoviewer .s7emailshare[state='disabled'] {
background-image:url(images/v2/EmailShare_dark_disabled.png);
}
ダイアログがアクティブなときに Web ページをカバーする背景オーバーレイは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7backoverlay
背面オーバーレイの CSS プロパティ
例 — 不透明度 70%を持つグレーの背景オーバーレイを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
デフォルトでは、モーダルダイアログはデスクトップシステムの画面の中央に表示され、タッチデバイスの Web ページ領域全体に表示されます。 どの場合でも、ダイアログボックスの位置とサイズはコンポーネントによって管理されます。 ダイアログは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialog
ダイアログボックスの CSS プロパティ
例 — タッチデバイスでブラウザーウィンドウ全体を使用し、背景が白であるダイアログを設定するには、次のように記述します。
.s7videoviewer .s7touchinput .s7emaildialog .s7dialog {
width:100%;
height:100%;
background-color: #ffffff;
}
ダイアログボックスのヘッダーは、アイコン、タイトルテキストおよび閉じるボタンで構成されます。 ヘッダーコンテナは、以下の CSS クラスセレクターを使用して制御します
.s7videoviewer .s7emaildialog .s7dialogheader
ダイアログボックスヘッダーの CSS プロパティ
アイコンとタイトルテキストは、
.s7videoviewer .s7emaildialog .s7dialogheader .s7dialogline
ダイアログの行の CSS プロパティ
ヘッダーのアイコンは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogheadericon
ダイアログボックスヘッダーのアイコンの CSS プロパティ
ヘッダーのタイトルは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogheadertext
ダイアログボックスのヘッダーテキストの CSS プロパティ
閉じるボタンは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7closebutton
閉じるボタンの CSS プロパティ
state
属性セレクター。ボタンの状態ごとに異なるスキンを適用するのに使用できます。「閉じる」ボタンのツールチップとダイアログボックスのタイトルは、ローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 — パディング、24 x 17 ピクセルのアイコン、太字の 16 ポイントのタイトル、28 x 28 ピクセルの閉じるボタンを含むダイアログヘッダーを設定するには、次のように記述します。 最後に、ダイアログコンテナの上から 2 ピクセル、右から 2 ピクセルの位置に配置します。
.s7videoviewer .s7emaildialog .s7dialogheader {
padding: 10px;
}
.s7videoviewer .s7emaildialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7videoviewer .s7emaildialog .s7dialogheadericon {
background-image: url("images/sdk/dlgemail_cap.png");
height: 17px;
width: 24px;
}
.s7videoviewer .s7emaildialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7videoviewer .s7emaildialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7videoviewer .s7emaildialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7videoviewer .s7emaildialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7videoviewer .s7emaildialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7videoviewer .s7emaildialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
ダイアログフッターは、「キャンセル」ボタンと「電子メールを送信」ボタンで構成されます。 フッターコンテナは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogfooter
ダイアログボックスフッターの CSS プロパティ
フッターには、両方のボタンを保持する内部コンテナがあります。 これは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogbuttoncontainer
ダイアログボックスのボタンコンテナの CSS プロパティ
「キャンセル」ボタンは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogcancelbutton
ダイアログボックスの「キャンセル」ボタンの CSS プロパティ
state
属性セレクター。ボタンの状態ごとに異なるスキンを適用するのに使用できます。電子メールを送信ボタンは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogactionbutton
ダイアログボックスのアクションボタンの CSS プロパティ
state
属性セレクター。ボタンの状態ごとに異なるスキンを適用するのに使用できます。また、両方のボタンは、他のダイアログボックスのボタンと同じ CSS 設定を含むことができる、共通の CSS クラスを共有します。
.s7videoviewer .s7emaildialog .s7dialogfooter .s7button
ボタンの CSS プロパティ
ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 — 64 x 34 の「キャンセル」ボタンと 82 x 34 の「電子メールを送信」ボタンを含むダイアログボックスフッターを設定し、ボタンの状態ごとにテキストの色と背景色が異なるようにするには、次のように記述します。
.s7videoviewer .s7emaildialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7videoviewer .s7emaildialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7videoviewer .s7emaildialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7videoviewer .s7emaildialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7videoviewer .s7emaildialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
メインダイアログ領域(ヘッダーとフッターの間)には、スクロール可能なダイアログコンテンツと、右側のスクロールパネルが含まれています。 どのような場合でも、コンポーネントがこの領域の幅を管理するので、CSS で設定することはできません。 ダイアログのメイン領域は、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogviewarea
ダイアログボックス表示領域の CSS プロパティ
state
属性セレクターを使用します。 これはに設定されています。 sendsuccess
電子メールフォームが送信され、ダイアログボックスに確認メッセージが表示されます。 確認メッセージが小さい限り、この属性セレクターを使用して、確認メッセージが表示される際のダイアログボックスの高さを小さくすることができます。例 — 最初は高さが 300 ピクセル、確認メッセージが表示されたときは高さが 100 ピクセルで、マージンが 10 ピクセルで、白の背景を使用するメインダイアログボックス領域を設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
.s7videoviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] {
height:100px;
}
すべてのフォームコンテンツ(ラベルや入力フィールドなど)は、を使用して制御されるコンテナ内に配置されます。
.s7videoviewer .s7emaildialog .s7dialogbody
このコンテナの高さがメインのダイアログボックス領域より大きい場合は、コンポーネントによって垂直スクロールが自動的に有効になります。
ダイアログボックスの本文の CSS プロパティ
例 — 10 ピクセルのパディングを持つフォームコンテンツを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7dialogbody {
padding: 10px;
}
ダイアログボックスのフォームは 1 行ごとに入力され、各行はフォームコンテンツの一部(ラベルやテキスト入力フィールドなど)を保持します。 単一のフォーム行は、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogline
ダイアログボックスの行の CSS プロパティ
例 — 各行に 10 ピクセルのパディングを持つダイアログボックスフォームを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogline {
padding: 10px;
}
ダイアログボックスフォーム内のすべての静的ラベルは、を使用して制御します。
.s7videoviewer .s7emaildialog .s7dialoglabel
このクラスは、ラベルのサイズや位置の制御には適していません。このクラスは、フォームのユーザーインターフェイスの様々な場所のテキストに適用できます。
ダイアログボックスのラベルの CSS プロパティ。
ダイアログボックスのラベルはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 — グレー、太字、9 ピクセルのフォントにすべてのラベルを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
フォーム入力フィールドの左側に表示されるすべての静的ラベルは、以下を使用して制御します。
.s7videoviewer .s7emaildialog .s7dialoginputlabel
ダイアログボックスの入力ラベルの CSS プロパティ
例 — 幅が 50 ピクセル、右揃え、パディングが 10 ピクセル、右側に 10 ピクセルのマージンがある入力フィールドラベルを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7dialoginputlabel {
margin-right: 10px;
padding: 10px;
text-align: right;
width: 50px;
}
各フォーム入力フィールドは、コンテナにまとめられます。このコンテナを使用して、入力フィールドの周囲にカスタムの境界線を設定できます。 これは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialoginputcontainer
ダイアログボックスの入力コンテナの CSS プロパティ
state
属性セレクターを使用します。 これはに設定されています。 verifyerror
ユーザーが入力データ形式に誤りがあり、インライン検証が失敗した場合。 この属性セレクターを使用すると、フォーム内の誤ったユーザー入力をハイライト表示できます。左側のラベルからダイアログボックスの本文の右端まで拡大する入力フィールド(「from」フィールドと「message」フィールドを含む)のほとんどは、次のコマンドを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialoginputwide
ダイアログボックスの入力全体のフィールドの CSS プロパティ
「宛先」入力フィールドは、右側に「電子メールを削除」ボタン用の領域が割り当てられるので、狭くなります。 これは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialoginputshort
ダイアログボックス入力の短いフィールドの CSS プロパティ
例 — 1 ピクセルのグレーの境界線を持つフォームを設定し、すべての入力フィールドの周囲に 9 ピクセルのパディングを含めるには、次のように記述します。 検証に失敗したフィールドに対して同じ境界線を赤で表示するには、幅が 250 ピクセルの「宛先」入力フィールドを使用し、残りの入力フィールドの幅を 300 ピクセルにします。
.s7videoviewer .s7emaildialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 9px;
}
.s7videoviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] {
border: 1px solid #FF0000;
}
.s7videoviewer .s7emaildialog .s7dialoginputshort {
width: 250px;
}
.s7videoviewer .s7emaildialog .s7dialoginputwide {
width: 300px;
}
E メールメッセージの入力フィールドは、次のアイテムも使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogmessage
このクラスを使用すると、基になる TEXTAREA
要素を選択します。
ダイアログボックスメッセージの CSS プロパティ
例 — 高さが 50 ピクセルの電子メールメッセージを設定し、 break-word
ワードラッピング:
.s7videoviewer .s7emaildialog .s7dialogmessage {
height: 50px;
word-wrap: break-word;
}
「別の電子メールアドレスを追加」ボタンを使用すると、ユーザーは電子メールフォームに複数のアドレスを追加できます。 これは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton
ダイアログボックスの「電子メールアドレスを追加」ボタンの CSS プロパティ
state
属性セレクター。ボタンの状態ごとに異なるスキンを適用するのに使用できます。ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 — 高さが 25 ピクセルの「別の電子メールアドレスを追加」ボタンを設定するには、12 ポイントの太字フォントを右揃えで使用し、状態ごとに異なるテキスト色と画像を使用します。
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton {
text-align:right;
font-size:12pt;
font-weight:bold;
background-position:left center;
line-height:25px;
padding-left:30px;
height:25px;
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] {
color:#666666;
background-image:url(images/sdk/dlgaddplus_up.png);
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] {
color:#000000;
background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] {
color:#000000;
text-decoration:underline;
background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] {
color:#666666;
background-image:url(images/sdk/dlgaddplus_up.png);
}
「削除」ボタンを使用すると、ユーザーはメールフォームから余分なアドレスを削除できます。 これは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton
ダイアログボックスの「電子メールを削除」ボタンの CSS プロパティ
state
属性セレクター。ボタンの状態ごとに異なるスキンを適用するのに使用できます。ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 — 25 x 25 ピクセルで、状態ごとに異なる画像を使用する「削除」ボタンを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton {
width:25px;
height:25px;
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
background-image:url(images/sdk/dlgremove_up.png);
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
background-image:url(images/sdk/dlgremove_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
background-image:url(images/sdk/dlgremove_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] {
background-image:url(images/sdk/dlgremove_up.png);
}
共有されるコンテンツは、ダイアログボックスの本文の下部に表示され、サムネール、タイトル、接触チャネル URL および説明が含まれます。 これは、次を使用して制御するコンテナにまとめられます。
.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogcontent
ダイアログボックスのコンテンツの CSS プロパティ
例 — 境界線が 1 ピクセル、パディングがない下部コンテナを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogcontent {
border: 1px dotted #A0A0A0;
padding: 0;
}
サムネール画像は、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogthumbnail
The background-image
プロパティはコンポーネントロジックによって設定されます。
ダイアログボックスのサムネール画像の CSS プロパティ
例 — 90 x 60 ピクセルで、上揃えで 10 ピクセルのパディングを使用するサムネールを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7dialogthumbnail {
height: 60px;
padding: 10px;
vertical-align: top;
width: 90px;
}
コンテンツのタイトル、起源および説明は、コンテンツのサムネールの右側のパネルにさらにグループ化されます。 これは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialoginfopanel
ダイアログボックスの情報パネルの CSS プロパティ
例 — 幅が 300 ピクセルのコンテンツ情報パネルを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7dialoginfopanel {
width: 300px;
}
コンテンツのタイトルは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogtitle
ダイアログボックスのタイトルの CSS プロパティ
例 — 太字フォントを使用し、10 ピクセルのマージンを持つコンテンツタイトルを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7dialogtitle {
font-weight: bold;
margin: 10px;
}
コンテンツの起源は、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogorigin
ダイアログボックスのコンテンツの接触チャネルの CSS プロパティ
例 — 10 ピクセルのマージンを持つコンテンツのオリジンを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7dialogorigin {
margin: 10px;
}
コンテンツの説明は、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogdescription
ダイアログボックスのコンテンツの説明の CSS プロパティ
例 — 10 ピクセルのマージンがあり、9 ポイントのフォントを使用するコンテンツの説明を設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7dialogdescription {
font-size: 9pt;
margin: 10px;
}
ユーザーが誤った入力データを入力し、インライン検証に失敗した場合、またはフォームの送信時にダイアログボックスでエラーまたは確認メッセージをレンダリングする必要がある場合は、ダイアログボックスの本文の上部にメッセージが表示されます。 これは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogerrormessage
ダイアログボックスのエラーメッセージの CSS プロパティ
state
次の値を持つ属性セレクター: verifyerror
, senderror
、および sendsuccess
. 属性セレクター verifyerror
は、インライン入力検証エラーが原因でメッセージが表示される場合に設定されます。 senderror
は、バックエンドの電子メールサービスがエラーを報告したときに設定されます。 sendsuccess
は、電子メールが正常に送信されたときに設定されます。 これにより、ダイアログボックスの状態に応じて異なるスタイルでメッセージをスタイル設定できます。エラーメッセージはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 — 10 ポイントの太字フォントを使用するメッセージを設定するには、次のように記述します。 また、線の高さが 25 ピクセル、左側に 20 ピクセルのパディングが必要で、感嘆符のアイコンを使用し、エラーが発生した場合は赤のテキストを使用し、成功した場合はアイコンと緑のテキストを使用しません。
.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
background-image: url("images/sdk/dlgerrimg.png");
color: #FF0000;
}
.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
background-image: url("images/sdk/dlgerrimg.png");
color: #FF0000;
}
.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
background-image: none;
color: #00B200;
}
.s7videoviewer .s7emaildialog .s7dialogerrormessage {
background-position: left center;
font-size: 10pt;
font-weight: bold;
line-height: 25px;
padding-left: 20px;
}
垂直方向のスクロールが必要な場合、スクロールバーがダイアログの右端近くのパネル内にレンダリングされます。このパネルは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7dialogscrollpanel
ダイアログボックスのスクロールパネルの CSS プロパティ
例 — 幅が 44 ピクセルのスクロールパネルを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7dialogscrollpanel {
width: 44px;
}
スクロールバー領域の外観は、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7scrollbar
スクロールバーの CSS プロパティ
例 — 幅が 28 ピクセルで、スクロールパネルの上、右、下から 8 ピクセルのマージンがあるスクロールバーを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7scrollbar {
bottom: 8px;
right: 8px;
top: 8px;
width: 28px;
}
スクロールバートラックは、上下のスクロールボタンの間の領域です。 このコンポーネントは、トラックの位置と高さを自動的に設定します。 トラックは、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolltrack
スクロールトラックの CSS プロパティ
例 — 幅が 28 ピクセルで、背景がグレーのスクロールバートラックを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}
スクロールバーサムは、スクロールトラック領域内で垂直方向に移動します。 サムネールの垂直方向の位置は、コンポーネントのロジックによって完全に制御されますが、サムの高さはコンテンツの量に応じて動的に変化するわけではありません。 サムの高さやその他の要素は、以下の CSS クラスセレクターを使用して設定できます。
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb
スクロールバーサムの CSS プロパティ
state
属性セレクター。サムの状態ごとに異なるスキンを適用するのに使用できます。 up
, down
, over
、および disabled
.ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 — 28 x 45 ピクセルで、上と下に 10 ピクセルのマージンがあり、状態ごとに異なるアートワークを持つスクロールバーサムを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb {
height: 45px;
padding-bottom: 10px;
padding-top: 10px;
width: 28px;
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] {
background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] {
background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] {
background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="disabled"] {
background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}
上下のスクロールボタンの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton
上下のスクロールボタンの CSS プロパティ
state
属性セレクター。ボタンの状態ごとに異なるスキンを適用するのに使用できます。 up
, down
, over
、および disabled
.例 — 28 x 32 ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定するには、次のように記述します。
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/sdk/scroll_up_over.png);
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/sdk/scroll_up_down.png);
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/sdk/scroll_down_up.png);
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/sdk/scroll_down_over.png);
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/sdk/scroll_down_down.png);
}
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/sdk/scroll_down_disabled.png);
}