#眉標=Ajax
#副標=Microsoft Ajax網頁開發(13)
#大標=開發高互動性的網頁(下)
#作者=文／王寧疆



==程式1		<box>===========
<asp:Panel ID="Panel1" runat="server" CssClass="collapsePanelHeader" Height="30px"> 
    <div style="padding:5px; cursor: pointer; vertical-align: middle;">
        <div style="float: left;">Venetian</div>
        <div style="float: left; margin-left: 20px;"><asp:Label ID="Label1" runat="server">
     (展開)</asp:Label></div>
<div style="float: right; vertical-align: middle;"><asp:Image ID="Image1" runat="server" 
   ImageUrl="~/images/expand_blue.jpg"/></div>
    </div>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" CssClass="collapsePanel">
    <br />
    <table>
        <tr>
            <td><asp:Image ID="Image2" Width=240 Height=240 runat="server" 
ImageUrl="images/Venetian1.jpg" AlternateText="Screen shots" ImageAlign="Right" style="padding:5px" />
      </td>
<td><asp:Image ID="Image5" Width=240 Height=240 runat="server" 
ImageUrl="images/Venetian2.jpg" AlternateText="Screen shots" ImageAlign="Right" style="padding:5px" />
      </td>
            <td><asp:Image ID="Image10" runat="server" AlternateText="Screen shots" Height="240" 
ImageAlign="Right" ImageUrl="images/Venetian3.jpg" Style="padding: 5px" Width="240" />
 		  </td>
<td><asp:Image ID="Image11" runat="server" AlternateText="Screen shots" Height="240" 
   ImageAlign="Right" ImageUrl="images/Venetian4.jpg" Style="padding: 5px" Width="240" />
 		   </td>
<td><asp:Image ID="Image12" runat="server" AlternateText="Screen shots" Height="240" 
ImageAlign="Right" ImageUrl="images/Venetian5.jpg" Style="padding: 5px" Width="240" />
        </td>
          </tr>
      </table>
  <br />
</asp:Panel>
==<end>==============




==程式2<box>===========
<cc1:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="Panel2" ExpandControlID="Panel1" 
CollapseControlID="Panel1" Collapsed="True" TextLabelID="Label1" ExpandedText="(收合)" CollapsedText="(展開)" ImageControlID="Image1" ExpandedImage="~/images/collapse_blue.jpg" 
     CollapsedImage="~/images/expand_blue.jpg" SuppressPostBack="true"/>
==<end>==============




==程式3		<box>===========
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/TrushCan.jpg" />
==<end>==============





==程式4	<box>===========
<asp:TemplateField HeaderText="刪除">
    <HeaderStyle Wrap="False" />
    <ItemTemplate>
        <asp:ImageButton ID="ImageButton1" CommandName="Delete" runat="server" 
     ImageUrl="images/TrushCan.jpg" />
        <cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" 
　　TargetControlID="ImageButton1" ConfirmText="確定要刪除嗎?" />
    </ItemTemplate>
</asp:TemplateField>
==<end>==============




==程式5	<box>===========
<asp:Panel ID="Panel1" runat="server" Width="100%">
<asp:Panel BorderStyle="Solid" BorderWidth="2px" BorderColor="black" ID="Panel2" runat="server" 
 Width="100%" Height="20px">
        <div class="dragMe">點中之後可以拖動</div>
    </asp:Panel>
    <asp:Panel BorderStyle="Solid" BackColor="#0B3D73" ForeColor="whitesmoke" BorderWidth="2px" 
     BorderColor="black" ID="Panel3" runat="server" Width="100%" CssClass="overflowHidden">
        <img src="images/Venetian6.jpg" />
    </asp:Panel>
</asp:Panel>
==<end>==============





==程式6	<box>===========
<cc1:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="Panel1" 
     DragHandleID="Panel2"/>
==<end>==============





==程式7	<box>===========
<asp:Label ID="lbBKColor" runat="server" Text="字型色彩" Style="width: 300px;padding-right: 50px;">
</asp:Label>
<asp:Panel ID="MenuPanel1" runat="server" CssClass="ContextMenuPane1" 
     Style="display:none;visibility:hidden;">
    <asp:LinkButton ID="Yellow" runat="server" Text="紅色" CssClass="ContextMenuItem" 
     OnClientClick='$get("TextContent").style.color="red";return false;' />
    <asp:LinkButton runat="server" ID="Green" Text="綠色" CssClass="ContextMenuItem" 
     OnClientClick='$get("TextContent").style.color="green";return false;'/>
    <asp:LinkButton runat="server" ID="Blue" Text="藍色" CssClass="ContextMenuItem" 
     OnClientClick='$get("TextContent").style.color="blue";return false;'/>
</asp:Panel>
==<end>==============





==程式8	<box>===========
<span id="TextContent" style="font-size: 24pt;">
    使用Microsoft Ajax Control Toolkit製作功能表的簡單範例
</span>
==<end>==============




==程式9	<box>===========
.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;
}
a.ContextMenuItem-Selected
{
	font-weight: bold;
}
a.ContextMenuItem:hover
{
	background-color: #FFE6A0;
	color: #003399;
	border: 1px solid #D2B47A;
	padding: 3px 18px 3px 32px;
}
==<end>==============





==程式10<box>===========
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

	然後再將網頁中的DropDownExtender控制項編輯成以下的樣子：

<cc1:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="lbBKColor" 
     DropDownControlID="MenuPanel1" />
==<end>==============