CollapsiblePanel控件
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body style="font-weight: bold; color: white; text-align: center">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Panel ID="Panel1" runat="server" Height="30px" Width="275px">
<div style="background-image: url(images/bg.png); width: 275px; height: 30px">
新春祝福
<asp:Label ID="Label1" runat="server" Text="收缩"></asp:Label>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/expand.jpg" /></div>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" Height="150px" Style="color: red" Width="275px">
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/AJAX.gif" /><br />
文宇博客欢迎化您的到来<br />
<a href=http://blog.csdn.net/meng1986>文宇专栏</a></asp:Panel>
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="Panel1" CollapsedImage="~/images/expend.jpg" ExpandControlID="Panel1" ExpandedImage="~/images/collapse.jpg" ImageControlID="Image1" SuppressPostBack="True" TargetControlID="Panel2" TextLabelID="Label1">
</cc1:CollapsiblePanelExtender>
</form>
</body>
</html>
用于实现控件的伸缩
首先放两个Panle 第一个Panle Width:275px Height:150px,第二个Width:275px,Height30px
拖入一个div到第一个Panle中设置位置宽275,高30
背景:图象bg.png
字体:颜色:white,粗体:绝对,粗体
在收缩处加入Imge,ImageURL/expand.jgp
插入CollapsiblePanelExtender控件, 并且绑定Panel2
设置Panel2的属性/CollapsiblePanelExtender/CollapseControlID:收缩的id通过Panel1进行收缩
ExpandControlID绑定Panel1
Panel2用TextLabelID绑定 Label1
Panel2CollapsedText:写入扩展,ExpandeText收缩
ExpandDirection: 收缩扩展方向水平或垂直
ImageContents:Image1,就是那天在收缩旁边的小图标
SuppressPostBack:true
2890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
