JavaScript のポップアップ・メニュー

> > > > >

ポップアップ・メニュー・コンポーネントは、メイン・ビューに接続されます。このポップアップ・メニューは、ビュー内を右クリックすることで起動されます。

ポップアップ・メニューを使用するには、最初に次のスクリプトを含める必要があります。

ポップアップ・メニュー・コンポーネントは、IlvPopupMenu です。

<script TYPE="text/javascript" src="script/IlvAbstractPopupMenu.js"></script>
<script TYPE="text/javascript" src="script/framework/IlvPopupMenu.js"></script>

ポップアップ・メニューは、コンテキストまたは静的にすることができます。

静的ポップアップ・メニュー

このメニューは、静的 (呼び出されたときのコンテキストによって異なることがない) で、IlvMenu インスタンスおよび IlvMenuItem インスタンスを使用して HTML ファイルで定義されます。このメニューは、クライアント・サイドのピュア・オブジェクトで、メニューを生成するためのサーバーとの往復通信がありません。

HTML ファイルでの静的ポップアップ・メニューの定義 (JViews Framework レベル)

//Creates the pop-up menu.
var popupMenu = new IlvPopupMenu();

//Creates the menu model.
var root = new IlvMenu("root");
var item1 = new IlvMenuItem("item1", true, "alert('item1 clicked')");
var item2 = new IlvMenuItem("item2", true, "alert('item2 clicked')");
root.add(item1);
root.add(item2);

//Sets the menu model to the pop-up menu.
popupMenu.setMenu(root);

[...]

//Sets the pop-up menu to the view.
view.setPopupMenu(popupMenu);

サーバー・サイドでは、サーブレット・サポートを構成して、ポップアップ・メニューのサーバー・サイド・アクションを処理する必要があります。

ポップアップ・メニュー向けサーブレット・サポートの構成 (JViews Framework レベル)

public class XmlGrapherServlet extends IlvManagerServlet {
  public XmlGrapherServlet() {
    [...]
    getSupport().setPopupEnabled(true);
 }
 [...]
}

コンテキスト・ポップアップ・メニュー

このポップアップ・メニューは、次に基づいてサーバーが動的に生成します。

ビューに設定された現在のインタラクターの menuModelId プロパティー。
ユーザーがポップアップ・メニューをトリガーしたときに選択されているオブジェクト。

クライアント・サイドでは、ポップアップ・メニューを宣言し、それをビューに設定するだけです。

コンテキスト・ポップアップ・メニューの宣言およびビューへの設定: クライアント・サイド (JViews Framework レベル)

var popupMenu = new IlvPopupMenu();

//Sets the pop-up menu to the view
view.setPopupMenu(popupMenu);

サーバー・サイドでは、サーブレット・サポートを構成して、ポップアップ・メニューを処理し、メニューを生成するファクトリーを設定する必要があります。

サーブレット・サポートの構成およびファクトリーの設定: サーバー・サイド (JViews Framework レベル)

public class XmlGrapherServlet extends IlvManagerServlet {

  public XmlGrapherServlet() {
    getSupport().setPopupEnabled(true);
    getSupport().getPopupMenuSupport().setMenuFactory
      (new XmlGrapherMenuFactory());
  }
  [...]
}

ファクトリーは、IlvMenuFactory インターフェースを実装する必要があります。

ポップアップ・メニューのスタイリング

ポップアップ・メニューのスタイル設定は、次のプロパティーの CSS クラス名を設定することで行うことができます。

itemStyleClass: メニュー項目に適用される基本 CSS クラス名。
itemHighlightedStyleClass: 項目の上にカーソルがあるときにベース・スタイルに優先して適用されるスタイル。
itemDisabledStyleClass: カーソルが使用不可に設定されているときにベース・スタイルに優先して適用されるスタイル。

以下の例は、CSS を使用してポップアップ・メニューのスタイルを設定する方法を示しています。

JViews Framework レベル

  [...]

<style>
.PopupMenuItem {
  background: #21bdbd;
  color: black;
  font-family: sans-serif;
  font-size: 12px;
}

.PopupMenuItemHighlighted {
  background: #057879;
  font-style: italic;
  color: white;
}

.PopupMenuItemDisabled {
  background-color: #EEEEEE;
  font-style: italic;
  color: black;
}
</style>

  [...]

<script>

var popupMenu = new IlvPopupMenu();
popupMenu.setItemStyleClass('PopupMenuItem');
popupMenu.setItemHighlightedStyleClass('PopupMenuItemHighlighted');
popupMenu.setItemDisabledStyleClass('PopupMenuItemDisabled');

</script>

現在のセクション

クライアントの開発