DropDown:SharePoint样式的下拉菜单

 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" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > DropDown Demo </ title >
     < link  href ="StyleSheet.css"  rel ="stylesheet"  type ="text/css"   />
     < style  type ="text/css" > ...
        .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 >
     < form  id ="DropDownForm"  runat ="server" >
         < 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
         -->
         < br  />< br  />
        
         < asp:UpdatePanel  ID ="up"  runat ="server" >
             < ContentTemplate >
                 < asp:Label  ID ="lbSelection"  runat ="server"  Style ="padding:5px;"   />
             </ ContentTemplate >
             < Triggers >
                 < 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>";
    }
}