共用方式為


在功能表控制項上使用影像

更新:2007 年 11 月

您可以使用影像來表示滑鼠指標移到功能表項目上時可用的其他子功能表項目,也可以使用影像來分隔靜態或動態功能表項目,或是充當整個功能表或功能表項目層級的背景。

您還可以指定要用的影像,以及使用階層式樣式表 (CSS) 和 Menu 控制項的屬性指定影像的顯示方式。

使用預設的快顯影像

您可以使用兩個屬性 (或兩者皆可) 來指定表示 Menu 控制項第一次呈現時不顯示的子功能表項目。若要使用預設影像來表示靜態功能表項目有子功能表項目,請將 StaticEnableDefaultPopOutImage 屬性設為 true;若要為有子項目的動態功能表項目使用預設影像,請將 DynamicEnableDefaultPopOutImage 屬性設為 true。如果將這兩個屬性 (或兩者皆可) 的值設為 false,則會隱藏每個有子項目之功能表項目上的預設黑色箭號影像。

下列範例會將這兩個值都設為 true,這樣任何一個有子項目的靜態或動態功能表項目將顯示預設的黑色箭號影像。

    <asp:Menu ID="Menu1"  
        StaticEnableDefaultPopOutImage="true"
        DynamicEnableDefaultPopOutImage="true">

指定自訂指示器圖示

若要使用已為指示器 (Indicator) 圖示所建立的自訂影像,可以將指派值給 StaticPopOutImageUrlDynamicPopOutImageUrl 屬性。每個這些屬性都會指定檔案位置和表示要用的影像名稱。StaticPopOutImageUrl 屬性會決定靜態功能表項目所需的影像,而 DynamicPopOutImageUrl 會決定動態功能表項目所需的影像。

下列範例會將靜態和動態指示器圖示設為 Images 目錄中的 Greenarrow.gif 影像。

    <asp:Menu ID="Menu1" Runat="server" 
        StaticPopOutImageUrl="~/images/greenarrow.gif"
        DynamicPopOutImageUrl="~/images/greenarrow.gif">

指定分隔線影像

同一層級的功能表項目可以由分隔線影像隔開彼此。您可以指定分隔線影像,是要出現在指定層級的功能表項目上方或下方,還是要用於靜態或動態功能表的所有層級。有四個屬性是用來指定分隔線影像,其中兩個用於靜態功能表項目的頂端和底端分隔線,另兩個用於動態功能表項目的頂端和底端分隔線:

下列範例會指定 Greenseparator.gif 影像出現在每個靜態功能表項目下方。

    <asp:Menu ID="Menu2" Runat="server" 
        StaticBottomSeparatorImageUrl="~/greenseparator.gif">

指定捲軸影像

如果指定很多功能表項目,則用來顯示動態功能表項目的快顯視窗 (Pop-Up Window) 可能不夠展開到足以顯示所有功能表項目。Menu 控制項會自動建立捲軸,所以使用者可以捲動整個功能表項目清單,而您可以使用 ScrollDownImageUrlScrollUpImageUrl 屬性來將自訂箭號或其他影像指派給捲軸上的向上或向下圖示。

下列範例將示範如何使用這兩個屬性來指定捲軸箭號的自訂影像。

    <asp:Menu ID="Menu1" Runat="server" 
        ScrollUpImageUrl="~/images/greenuparrow.gif"
        ScrollDownImageUrl="~/images/greenuparrow.gif"

指定 CSS 中的影像大小

處理影像的方式會對 Menu 控制項顯示影像的方式有相當大的影響。例如,當網頁最先顯示而瀏覽器尚未快取用於 Menu 控制項的影像時,這些影像可能會似乎閃動或「跳躍」,直到瀏覽器判斷出影像大小為止。在樣式表 (CSS) 中指定用於 Menu 控制項的影像大小,即可避免上述情況發生。

如果您要在功能表項目上使用影像,請先在 HTML 標記中使用影像,以指派類別名稱給功能表項目的 WebControl.CssClass 屬性,然後就可以在 CSS 中指示影像的大小。下列範例會將類別名稱 "menuitem" 指派給 StaticMenuItemStyleDynamicMenuItemStyle 屬性。

<StaticMenuItemStyle CssClass="menuitem" />
<DynamicMenuItemStyle CssClass="menuitem" />

在包含功能表的網頁所參考的 CSS 檔案中,您可能會接著參考功能表項目的 CSS 類別,然後設定影像大小。

下列範例會參考 CSS 類別 "menuitem",並指定用來表示功能表項目有子項目時的 40x40 像素影像。

.menuitem {} /*Style code for each menu item goes here. */
.menuitem img 
{
  width: 40px;
  height: 40px;
}

請參閱

工作

逐步解說:在 Web 網頁上顯示功能表

逐步解說:以程式設計方式控制 ASP.NET 功能表

概念

ASP.NET Web 伺服器控制項和 CSS 樣式

功能表控制項概觀

參考

Menu