HoverMenuExtenderコントロール
HoverMenuExtenderコントロールは、マウスが対象のコントロール上にある時、UIメニューがコントロールの隣りに浮き上がる機能を付加するエクステンダコントロールです。今回は利用していませんが、GridViewコントロールをHoverMenuExtenderコントロールで拡張することで、［EDIT］［DELETE］などのボタン部分をホバーメニュー化させることも可能となります。PopupControlExtenderコントロールと似ていますが、クリックしなくてもコントロールを表示させられるのが特徴と言えます。
| プロパティ名 | 概要 |
| PopupControlID | ホバーさせるメニューコントロールIDを設定。 |
| TargetControlID | ホバーメニューコントロールのトリガーとなるコントロールIDを設定。 |
| HoverCssClass | ホバーメニューが表示されている間のトリガーコントロールのCSSを設定。 |
| PopupPostion | ホバーメニューのポップアップ位置を上下左右、TargetControl上の5つから設定。 |
| PopDelay | マウスがTargetControlから外れた際にホバーメニューが消えるまでの時間をミリセカンドで設定。デフォルトは100。 |
リンクボタン上にマウスがある時に、いくつかのコントロールを含んだパネルをホバーさせるには、次のように設定します。
<asp:LinkButton ID="LinkButton1" runat="server"
Text="これはリンクボタン"></asp:LinkButton><br /> <asp:Panel ID="HoverPanel1" CssClass="HoverPanel" runat="server"
Height="50px" Width="200px"> <asp:LinkButton ID="LinkButton2" runat="server"
Text="これもリンクボタン" PostBackUrl="~/Default.aspx" /><br /> <asp:Button ID="Button1" runat="server" Text="これはボタン"/> </asp:Panel> <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server"
TargetControlID="LinkButton1" PopupControlID="HoverPanel1"
PopupPosition="Bottom" HoverCssClass="pophover" PopDelay="1000" />
サンプルを実行すると図28～29のようになります（ダウンロードサンプルのファイルは「/HoverMenuExtender/HoverMenuExtender.aspx」です）。
CalendarExtenderコントロール
CalendarExtenderコントロールは、テキストボックスに付与することができるAJAX機能付きのカレンダーコントロールです。ExtenderですのでTargetControlIDプロパティを設定しますが、対象のプロパティではなく、自身のプロパティ内に設定すべきプロパティを設定します。日付をクリックする際にカレンダーのヘッダー部分を選択することで月＞年と設定の範囲を広げていくことが可能です。選択した日付を自動的にテキストボックスに表示することも可能です。このCalendareExtenderコントロールはローカライゼーション対応されたコントロールの1つで、ScriptManagerコントロールのEnableScriptGlobalizationプロパティとEnableScriptLocalizationをTrueに設定すると、一部を日本語で表示することも可能です。しかし、現時点では実行画像を見てもらうと分かるように、完全な日本語表示にはならない点に注意が必要です。
| プロパティ名 | 概要 |
| CssClass | カレンダーに適応するCSSを設定。 |
| Format | テキストに反映されるフォーマットを設定。 |
| PopupButtonID | ボタンやイメージなどをトリガーにカレンダーをポップアップさせる時のIDを設定。ただしTargetControlIDの設定も必要。 |
| TargetControlID | カレンダーをポップアップさせる「TextBoxコントロール」のIDを設定。 |
テキストボックスにフォーカスがある状態でカレンダーをポップアップさせて、選択した日付をdd MMMM yyyyの型で表示させるには、次のように設定します。
<ajaxToolkit:CalendarExtender ID="CalendarExtender1"
runat="server" Format="dd MMMM yyyy" TargetControlID="TextBox1" />
サンプルを実行すると図30～32のようになります（ダウンロードサンプルのファイルは「/CalendarExtender/CalendarExtender.aspx」です）。
まとめ
前回と今回で、Control Toolkitの中で使用頻度が高いと思われる入力ページ補助コントロールについて解説してきました。実際に触れてみると、非常に簡単に設定できるコントロールがあることが分かっていただけたかと思います（もちろん少し大変なコントロールも）。Microsoftからの正式なサポートが得られない以上、なかなかプロジェクトに組み込みづらいControl Toolkitですが、個々のコントロールの完成度は非常に高く、カスタマイズも可能となっていますので、本記事を参考にぜひプロジェクトに組み込んでいただければ幸いです。
