mozilla

Revision 370911 of PopupGuide

  • リビジョンの URL スラグ: XUL/PopupGuide
  • リビジョンのタイトル: PopupGuide
  • リビジョンの ID: 370911
  • 作成日:
  • 作成者: nobuoka
  • 現行リビジョン いいえ
  • コメント リンク先 URL がおかしかったので修正
タグ: 

このリビジョンの内容

{{ 英語版章題("Popups and Menus") }}

ポップアップとメニュー

作成できるポップアップの種類には様々なものがあります。ポップアップとは、メニュー、もしくは、タイトルバーやボーダーなどのメインウィンドウの外郭を拡張する装飾のないフローティングウィンドウの事です。

{{ 英語版章題("Popup Types") }}

ポップアップの種類

XUL では、ポップアップメニューや他の種類のポップアップウィジェットを作成するのに、要素に取り付けられる方法や開かれる方法によって異なる様々な種類の要素が利用できます。ここではそれぞれの種類の概要を紹介します。詳細はリンク先を参照して下さい。

このガイドでは、「ポップアップ」という用語は全ての種類のポップアップを指すのに対して、「メニュー」という用語はポップアップの特定の種類を指します。具体的には、下の一覧の初めの 2 種類がメニューです。

メニュー
メニューは、ユーザによって実行される一連のコマンドがあり、それぞれのコマンドに対してボタンを設置するスペースを使いたくない時に使用されます。メニューは普段は隠されており、選択されるとコマンドの一覧が格納されたポップアップが現れます。ユーザがコマンドを選択すると、メニューは再び見えなくなります。
メニューは menupopup 要素を使って作成します。 menupopup 要素はアイテムを一覧で表示し、サブメニューを表示でき、アイテム間でのキーボードによるナビゲーションを可能にします。メニューにはメニューに関係する要素しか格納してはいけません。
コンテキストメニュー
コンテキストメニューは普通のメニューに似ていますが、ユーザがコンテキストメニューを開く時にクリックした対象に対して、格納されたコマンドが適用されるという点で異なります。大抵は、クリックされた要素に対して適用できないようなコマンドは隠されます。
パネル
パネルにはどんな内容でも格納する事ができます。パネルは既存の UI の上に一時的に何らかのコントロールを表示したい時に便利です。例えば、検索用のフィールドをポップアップで表示して、検索語句が入力されたらポップアップを消すといった事ができます。
パネルは panel 要素を使って作成します。
ツールチップ
マウスがある UI コントロールの上に置かれると、ツールチップはそのコントロールについて説明するヘルプが書かれた小さなボックスを表示します。マウスがそのコントロールから離れると、ツールチップは自動的に消えます。
ツールチップは、要素に tooltiptext 属性を設定するか、 tooltip 要素を使う事によって作成できます。

{{ 英語版章題("Working with Popups") }}

ポップアップを取り扱う

以下の追加情報はメニューやポップアップの操作に関するものです。

メニューやポップアップを開く
ほとんどのメニューやポップアップは、要素に結び付けられていれば自動的に開かれます。スクリプトを使ってポップアップを開くには、 openPopup メソッドか openPopupAtScreen を使います。ポップアップの開き方についてのより詳しい情報はポップアップを開くもしくはメニューを開くを参照して下さい。
メニューやポップアップを閉じる
ポップアップの閉じ方に関する情報はポップアップを閉じるもしくは メニューを閉じるを参照して下さい。
ポップアップの配置方法
ポップアップのスクリーン上の位置を決定する方法や、ポップアップの位置を他の要素に揃える方法は、ポップアップの配置を参照して下さい。
ポップアップが開かれているかどうか確かめる
ポップアップやメニューが開かれているかどうかを確認するには、ポップアップが開いているかどうか判別するを参照して下さい。
ポップアップを移動する
ポップアップは moveTo メソッドを使って移動する事ができます。ポップアップの移動を参照して下さい。
ポップアップをリサイズする
sizeTo メソッドを使うとポップアップの大きさを調整する事ができます。ポップアップのリサイズを参照して下さい。
メニューをボタンに取り付ける
ボタンが押された時にメニューを表示させる方法を知りたければ、メニューボタンを参照して下さい。
メニューのアイテムの機能
メニュー上のアイテムの様々な機能を学ぶには、menuitem 要素の機能をご覧下さい。
メニューのアイテムを変更する
メニューに要素を追加、挿入、削除するにはメニューの変更をご覧下さい。
ポップアップ開閉時のイベント
ポップアップが開かれる時には popupshowing イベントと popupshown イベントが発生します。ポップアップが閉じられる時には popuphiding イベントと popuphidden イベントが発生します。これらのイベントに関する情報はポップアップイベントをご覧下さい。
ポップアップ内部でのキーの扱い
メニューやパネル内部でどのようにしてキーが扱われるかについての情報はポップアップ内部でのキーの扱いを参照してください。
メニューに関するプラットフォーム固有の注意事項
Macintosh で Application メニューを作成する方法など、特定のプラットフォームでメニューを扱うときの注意事項については、プラットフォームごとの特殊なメニューに関する考察を参照して下さい。

{{ 英語版章題("Using Popups in Extensions") }}

拡張機能でポップアップを使う

拡張機能では、メニューバーのメニューやコンテキストメニューにメニューアイテムを追加する事が出来ます。さらに、全く新しいメニューを追加する事も可能です。例えば、拡張機能専用のダイアログを開くための新しいコマンドをツールメニューに追加したいことがあるかもしれません。また、ブラウザのコンテキストメニューにアイテムを追加する拡張機能の作成もよく行われます。詳しくは拡張機能におけるメニューとポップアップの使用を参照して下さい。

 

{{ languages( { "en": "en/XUL/PopupGuide", "fr": "fr/XUL/Guide_des_popups" } ) }}

このリビジョンのソースコード

<p>{{ 英語版章題("Popups and Menus") }}</p>
<h3 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.A8.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.A8.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC">ポップアップとメニュー</h3>
<p>作成できるポップアップの種類には様々なものがあります。ポップアップとは、メニュー、もしくは、タイトルバーやボーダーなどのメインウィンドウの外郭を拡張する装飾のないフローティングウィンドウの事です。</p>
<p>{{ 英語版章題("Popup Types") }}</p>
<h4 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E7.A8.AE.E9.A1.9E" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E7.A8.AE.E9.A1.9E">ポップアップの種類</h4>
<p>XUL では、ポップアップメニューや他の種類のポップアップウィジェットを作成するのに、要素に取り付けられる方法や開かれる方法によって異なる様々な種類の要素が利用できます。ここではそれぞれの種類の概要を紹介します。詳細はリンク先を参照して下さい。</p>
<p>このガイドでは、「ポップアップ」という用語は全ての種類のポップアップを指すのに対して、「メニュー」という用語はポップアップの特定の種類を指します。具体的には、下の一覧の初めの 2 種類がメニューです。</p>
<dl>
  <dt>
    <a href="ja/XUL/PopupGuide/Menus">メニュー</a></dt>
  <dd>
    メニューは、ユーザによって実行される一連のコマンドがあり、それぞれのコマンドに対してボタンを設置するスペースを使いたくない時に使用されます。メニューは普段は隠されており、選択されるとコマンドの一覧が格納されたポップアップが現れます。ユーザがコマンドを選択すると、メニューは再び見えなくなります。</dd>
  <dd>
    メニューは <code>menupopup</code> 要素を使って作成します。 <code>menupopup</code> 要素はアイテムを一覧で表示し、サブメニューを表示でき、アイテム間でのキーボードによるナビゲーションを可能にします。メニューにはメニューに関係する要素しか格納してはいけません。</dd>
  <dt>
    <a href="ja/XUL/PopupGuide/ContextMenus">コンテキストメニュー</a></dt>
  <dd>
    コンテキストメニューは普通のメニューに似ていますが、ユーザがコンテキストメニューを開く時にクリックした対象に対して、格納されたコマンドが適用されるという点で異なります。大抵は、クリックされた要素に対して適用できないようなコマンドは隠されます。</dd>
  <dt>
    <a href="/ja/docs/XUL/PopupGuide/Panels">パネル</a></dt>
  <dd>
    パネルにはどんな内容でも格納する事ができます。パネルは既存の UI の上に一時的に何らかのコントロールを表示したい時に便利です。例えば、検索用のフィールドをポップアップで表示して、検索語句が入力されたらポップアップを消すといった事ができます。</dd>
  <dd>
    パネルは <code>panel</code> 要素を使って作成します。</dd>
  <dt>
    <a href="ja/XUL/PopupGuide/Tooltips">ツールチップ</a></dt>
  <dd>
    マウスがある UI コントロールの上に置かれると、ツールチップはそのコントロールについて説明するヘルプが書かれた小さなボックスを表示します。マウスがそのコントロールから離れると、ツールチップは自動的に消えます。</dd>
  <dd>
    ツールチップは、要素に <code>tooltiptext</code> 属性を設定するか、 <code>tooltip</code> 要素を使う事によって作成できます。</dd>
</dl>
<p>{{ 英語版章題("Working with Popups") }}</p>
<h4 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.82.92.E5.8F.96.E3.82.8A.E6.89.B1.E3.81.86" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.82.92.E5.8F.96.E3.82.8A.E6.89.B1.E3.81.86">ポップアップを取り扱う</h4>
<p>以下の追加情報はメニューやポップアップの操作に関するものです。</p>
<dl>
  <dt>
    メニューやポップアップを開く</dt>
  <dd>
    ほとんどのメニューやポップアップは、要素に結び付けられていれば自動的に開かれます。スクリプトを使ってポップアップを開くには、 <code>openPopup</code> メソッドか <code>openPopupAtScreen</code> を使います。ポップアップの開き方についてのより詳しい情報は<a href="ja/XUL/PopupGuide/OpenClose#Opening_a_Popup">ポップアップを開く</a>もしくは<a href="ja/XUL/PopupGuide/OpenClose#Opening_Menus">メニューを開く</a>を参照して下さい。</dd>
</dl>
<dl>
  <dt>
    メニューやポップアップを閉じる</dt>
  <dd>
    ポップアップの閉じ方に関する情報は<a href="ja/XUL/PopupGuide/OpenClose#Closing_a_Popup_with_the_hidePopup_method">ポップアップを閉じる</a>もしくは <a href="ja/XUL/PopupGuide/OpenClose#Closing_Menus">メニューを閉じる</a>を参照して下さい。</dd>
</dl>
<dl>
  <dt>
    ポップアップの配置方法</dt>
  <dd>
    ポップアップのスクリーン上の位置を決定する方法や、ポップアップの位置を他の要素に揃える方法は、<a href="ja/XUL/PopupGuide/Positioning">ポップアップの配置</a>を参照して下さい。</dd>
</dl>
<dl>
  <dt>
    ポップアップが開かれているかどうか確かめる</dt>
  <dd>
    ポップアップやメニューが開かれているかどうかを確認するには、<a href="ja/XUL/PopupGuide/OpenClose#Determining_if_a_Popup_is_Open">ポップアップが開いているかどうか判別する</a>を参照して下さい。</dd>
</dl>
<dl>
  <dt>
    ポップアップを移動する</dt>
  <dd>
    ポップアップは <code>moveTo</code> メソッドを使って移動する事ができます。<a href="ja/XUL/PopupGuide/MoveResize#Moving_a_Popup">ポップアップの移動</a>を参照して下さい。</dd>
</dl>
<dl>
  <dt>
    ポップアップをリサイズする</dt>
  <dd>
    <code>sizeTo</code> メソッドを使うとポップアップの大きさを調整する事ができます。<a href="ja/XUL/PopupGuide/MoveResize#Resizing_a_Popup">ポップアップのリサイズ</a>を参照して下さい。</dd>
</dl>
<dl>
  <dt>
    メニューをボタンに取り付ける</dt>
  <dd>
    ボタンが押された時にメニューを表示させる方法を知りたければ、<a href="ja/XUL/PopupGuide/MenuButtons">メニューボタン</a>を参照して下さい。</dd>
</dl>
<dl>
  <dt>
    メニューのアイテムの機能</dt>
  <dd>
    メニュー上のアイテムの様々な機能を学ぶには、<a href="ja/XUL/PopupGuide/MenuItems">menuitem 要素の機能</a>をご覧下さい。</dd>
</dl>
<dl>
  <dt>
    メニューのアイテムを変更する</dt>
  <dd>
    メニューに要素を追加、挿入、削除するには<a href="ja/XUL/PopupGuide/MenuModification">メニューの変更</a>をご覧下さい。</dd>
</dl>
<dl>
  <dt>
    ポップアップ開閉時のイベント</dt>
  <dd>
    ポップアップが開かれる時には <a href="ja/XUL/PopupGuide/PopupEvents#The_popupshowing_event">popupshowing</a> イベントと <a href="ja/XUL/PopupGuide/PopupEvents#The_popupshown_event">popupshown</a> イベントが発生します。ポップアップが閉じられる時には <a href="ja/XUL/PopupGuide/PopupEvents#The_popuphiding_event">popuphiding</a> イベントと <a href="ja/XUL/PopupGuide/PopupEvents#The_popuphidden_event">popuphidden</a> イベントが発生します。これらのイベントに関する情報は<a href="ja/XUL/PopupGuide/PopupEvents">ポップアップイベント</a>をご覧下さい。</dd>
</dl>
<dl>
  <dt>
    ポップアップ内部でのキーの扱い</dt>
  <dd>
    メニューやパネル内部でどのようにしてキーが扱われるかについての情報は<a href="ja/XUL/PopupGuide/PopupKeys">ポップアップ内部でのキーの扱い</a>を参照してください。</dd>
</dl>
<dl>
  <dt>
    メニューに関するプラットフォーム固有の注意事項</dt>
  <dd>
    Macintosh で Application メニューを作成する方法など、特定のプラットフォームでメニューを扱うときの注意事項については、<a href="ja/XUL/PopupGuide/PlatformMenus">プラットフォームごとの特殊なメニューに関する考察</a>を参照して下さい。</dd>
</dl>
<p>{{ 英語版章題("Using Popups in Extensions") }}</p>
<h4 id=".E6.8B.A1.E5.BC.B5.E6.A9.9F.E8.83.BD.E3.81.A7.E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.82.92.E4.BD.BF.E3.81.86" name=".E6.8B.A1.E5.BC.B5.E6.A9.9F.E8.83.BD.E3.81.A7.E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.82.92.E4.BD.BF.E3.81.86">拡張機能でポップアップを使う</h4>
<p>拡張機能では、メニューバーのメニューやコンテキストメニューにメニューアイテムを追加する事が出来ます。さらに、全く新しいメニューを追加する事も可能です。例えば、拡張機能専用のダイアログを開くための新しいコマンドをツールメニューに追加したいことがあるかもしれません。また、ブラウザのコンテキストメニューにアイテムを追加する拡張機能の作成もよく行われます。詳しくは<a href="/ja/docs/XUL/PopupGuide/Extensions">拡張機能におけるメニューとポップアップの使用</a>を参照して下さい。</p>
<div class="noinclude">
  &nbsp;</div>
<p>{{ languages( { "en": "en/XUL/PopupGuide", "fr": "fr/XUL/Guide_des_popups" } ) }}</p>
このリビジョンへ戻す