グローバル属性~“popover”属性

“popover”属性について

“popover”属性は要素がポップオーバー要素であることを表します。

ポップオーバー要素は非表示状態と表示状態の2つの状態を持ち、表示状態になるまでは描画されず、表示状態になると他のコンテンツの上に重なって表示されます。

“popover”属性の値が“auto”の場合、ポップオーバー要素は自動状態になります。自動状態のポップオーバー要素は表示させる時に他に表示状態のポップオーバー要素があればそれらを閉じます。ただし、表示されるポップオーバー要素の祖先となるポップオーバー要素は閉じられません。自動状態のポップオーバー要素はライト・ディスミスすることができます。

“popover”属性の値が“manual”の場合、ポップオーバー要素は手動状態になります。手動状態のポップオーバー要素は表示される時に他のポップオーバー要素を閉じません。また、手動状態のポップオーバー要素はライト・ディスミスすることができません。

ポップオーバー要素の表示と非表示

非表示状態のポップオーバー要素は“popovertargetaction="show"”が指定された要素による操作、もしくはスクリプトの“showPopover()”メソッドによって表示状態にできます。

表示状態のポップオーバー要素は“popovertargetaction="hide"”が指定された要素による操作、もしくはスクリプトの“hidePopover()”メソッドによって非表示状態にできます。

“popovertargetaction="toggle"”が指定された要素による操作、もしくはスクリプトの“togglePopover()”メソッドはポップオーバー要素が非表示状態の場合は表示状態に、表示状態の場合は非表示状態にします。

“popovertargetaction”属性は同じ要素の“popovertarget”属性の属性値として指定したID名を持つポップオーバー要素を操作します。これらの属性は以下の要素に指定することができます。

• “button”要素
• “type="submit"”が指定された“input”要素
• “type="image"”が指定された“input”要素
• “type="reset"”が指定された“input”要素
• “type="button"”が指定された“input”要素

指定できる値

値が空文字列の場合は“auto”、無効な文字列の場合は“manual”とみなされます。

サンプルコード

“popover="auto"”

<p><button popovertarget="pop-1" popovertargetaction="show">開く</button></p>

<div popover="auto" id="pop-1">

<p>2009年、80km離れた場所に4GBのデータを送信するのにADSL回線と伝書鳩のどちらが速いのかという検証が行われました。</p>
<p>その結果、伝書鳩はメモリスティックからデータを取り出すのにかかった時間を含めて2時間ほどかかりました。</p>
<p>しかし、ADSL回線ではその間に4%のデータしか転送できていませんでした。</p>
<p>つまり伝書鳩はインターネットよりも高速で通信できることが証明されたのです。知っていましたか？</p>
<p><button popovertarget="pop-1" popovertargetaction="hide">閉じる</button></p>

</div>

開く

2009年、80km離れた場所に4GBのデータを送信するのにADSL回線と伝書鳩のどちらが速いのかという検証が行われました。

その結果、伝書鳩はメモリスティックからデータを取り出すのにかかった時間を含めて2時間ほどかかりました。

しかし、ADSL回線ではその間に4%のデータしか転送できていませんでした。

つまり伝書鳩はインターネットよりも高速で通信できることが証明されたのです。知っていましたか？

閉じる

“popover="manual"”

<p><button popovertarget="pop-2" popovertargetaction="show">開く</button></p>

<div popover="manual" id="pop-2">

<p>東京ではウサギの飼育に高額の税金がかけられていたことがあります。巡査の初任給が6円だった時代にウサギ1羽につき毎月1円もの税金が課されていました。知っていましたか？</p>
<p><button popovertarget="pop-2" popovertargetaction="hide">閉じる</button></p>

</div>

開く

東京ではウサギの飼育に高額の税金がかけられていたことがあります。巡査の初任給が6円だった時代にウサギ1羽につき毎月1円もの税金が課されていました。知っていましたか？

閉じる