DropDown:SharePoint样式的下拉菜单_sharepoint网页下拉菜单-优快云博客

本文介绍如何使用 ASP.NET 和 ajaxToolKit 在网页上实现 SharePoint 风格的下拉菜单，包括必要的 CSS 样式及 C# 后端代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DropDown扩展器控件机会能够应用到任何ASP.NET服务器段控件之上，并为其提供SharePoint样式的下拉菜单。
示例运行效果：

图(1)

图(2)

图(3)

StyleSheet.css代码示例：

{

font-family: Tahoma;

font-size: 12px;

}

fieldset

{

margin: 5px;

padding: 5px;

}

.demoheading

{

padding-bottom:20px;

color:#5377A9;

font-family:Arial,Sans-Serif;

font-weight:bold;

font-size:1.5em;

}

DropDownDemo.aspx代码示例：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DropDownDemo.aspx.cs" Inherits="Chapter08_DropDownDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>DropDown Demo</title>

.ContextMenuPanel

{

border: 1px solid #868686;

z-index: 1000;

background: url(images/menu-bg.gif) repeat-y 0 0 #FAFAFA;

cursor: default;

padding: 1px 1px 0px 1px;

font-size: 11px;

}

.ContextMenuBreak

{

margin:1px 1px 1px 32px;

padding:0;

height:1px;

overflow:hidden;

display:block;

border-top: 1px solid #C5C5C5;

}

a.ContextMenuItem

{

margin: 1px 0 1px 0;

display: block;

color: #003399;

text-decoration: none;

cursor: pointer;

padding: 4px 19px 4px 33px;

white-space: nowrap;

}

a.ContextMenuItem-Selected

{

font-weight: bold;

}

a.ContextMenuItem:hover

{

background-color: #FFE6A0;

color: #003399;

border: 1px solid #D2B47A;

padding: 3px 18px 3px 32px;

}

</style>

</head>

<body>

<asp:ScriptManager ID="sm" runat="server" />

<div class="demoheading">SharePoint样式的下拉菜单</div>

<asp:Label ID="TextLabel" runat="server" Text="Select your favorite exotic ice-cream flavor"

Style="display: block; width: 300px; padding:2px; padding-right: 50px; font-family: Tahoma; font-size: 11px;" />

<asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Style="display:none;visibility:hidden;">

<asp:LinkButton runat="server" ID="Option1" Text="Mocha Blast" CssClass="ContextMenuItem" OnClick="OnSelect" />

<asp:LinkButton runat="server" ID="Option2" Text="Java Cyclone" CssClass="ContextMenuItem" OnClick="OnSelect" />

<asp:LinkButton runat="server" ID="Option3" Text="Dry Fruit" CssClass="ContextMenuItem" OnClick="OnSelect" />

</asp:Panel>

<ajaxToolkit:DropDownExtender runat="server" ID="dde"

TargetControlID="TextLabel"

DropDownControlID="DropPanel" />

<!--

TargetControlID：该扩展器目标控件的ID，即将要被添加SharePoint样式下拉菜单的控件的ID

DropDownControlID：作为下拉菜单元素显示的控件的ID

-->

<asp:UpdatePanel ID="up" runat="server">

<asp:Label ID="lbSelection" runat="server" Style="padding:5px;" />

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="Option1" EventName="Click" />

<asp:AsyncPostBackTrigger ControlID="Option2" EventName="Click" />

<asp:AsyncPostBackTrigger ControlID="Option3" EventName="Click" />

</Triggers>

</asp:UpdatePanel>

</form>

</body>

</html>

DropDownDemo.aspx.cs代码示例：

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class Chapter08_DropDownDemo : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void OnSelect(object sender, EventArgs e)

{

lbSelection.Text = "You selected <b>" + ((LinkButton)sender).Text + "</b>";

}