用CollapsiblePanelExtender实现一个较炫的告示

先对CollapsiblePanelExtender介绍一下。
先来看看官方对CollapsiblePanelExtende的描述：
The CollapsiblePanel is a very flexible extender that allows you to easily add Collapsible sections to your web page. This extender targets any ASP.NET Panel control. The page developer specifies which control(s) on the page should be the open/close controller for the panel, or the panel can be set to automatically expand and/or collapse when the mouse cursor moves in or out of it, respectively.

The panel is also post-back aware. On a client postback, it automatically remembers and restores its client state. This demonstrates the ability of these extenders to have some communication between the client and the server code.

The page developer can specify whether the panel should scroll when it does not expand to the full size of its contents, and can also specify whether the panel expands in the height or width dimensions.

Note: CollapsiblePanel assumes that the standard CSS box model is being used. Early versions of Internet Explorer didn't support that model completely, so please use the !DOCTYPE declaration (as found at the top of this page and enabled by default for new ASP.NET pages) to specify that the page should be rendered in IE's standards-compliant mode.

再来看看它属性的介绍：

· TargetControlID - the Panel to operate on

· CollapsedSize - The size of the target, in pixels, when it is in the collapsed state.

· ExpandedSize - The size of the target, in pixels, when it is in the opened state.

· Collapsed - Specifies that the object should initially be collapsed or expanded. Set this to match your initial size. In this case, we initially set the panel to a height of 0 to match the CollapsedSize property, so when the page first renders, we don't see the panel expanded.

· Scroll Contents - True to add a scrollbar if the contents are larger than the panel itself. False to just clip the contents.

· ExpandControlID/CollapseControlID - The controls that will expand or collapse the panel on a click, respectively. If these values are the same, the panel will automatically toggle its state on each click.

· TextLabelID - The ID of a label control where the "status text" for the panel will be placed. The panel will replace the internal HTML of this control (e.g. any HTML between the tags).

· CollapsedText - The text to show in the control specified by TextLabelID when the panel is collapsed. This text is also used as the alternate text of the image if ImageControlID is set.

· ExpandedText - The text to show in the control specified by TextLabelID when the panel is opened. This text is also used as the alternate text of the image if ImageControlID is set.

· ImageControlID - The ID of an Image control where an icon indicating the collapsed status of the panel will be placed. The extender will replace the source of this Image with the CollapsedImage and ExpandedImage urls as appropriate. If the ExpandedText or CollapsedText properties are set, they are used as the alternate text for the image.

· CollapsedImage - The path to an image used by ImageControlID when the panel is collapsed

· ExpandedImage - The path to an image used by ImageControlID when the panel is expanded

· ExpandDirection - can be "Width" or "Height" to determine whether the panel expands top-to-bottom or left-to-right.

好了，我来给个例子吧。（先安装The "Atlas" Control Toolkit,并引用到项目）

Aspx源码：

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

<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="cc1" %>

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

</head>

<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True">

</atlas:ScriptManager>

<tr >

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server">

<cc1:CollapsiblePanelProperties

SuppressPostBack ="true"

TargetControlID="Panel1"

CollapsedSize="0"

ExpandedSize="200"

Collapsed="True"

ExpandControlID="gsw"

CollapseControlID="gsw"

ScrollContents="False"

TextLabelID="Label2"

ExpandedImage ="collapse_blue.jpg"

ExpandedText="隐藏公告"

CollapsedImage ="expand_blue.jpg"

CollapsedText="显示公告"

ImageControlID="Image1"/>

</cc1:CollapsiblePanelExtender>

<asp:Label

ID="Label2" runat="server" Text="Label" Width="166px" Font-Bold="True" ForeColor="Orange" Font-Size="Small"></asp:Label><asp:Image ID="Image1" runat="server" Height="15px" Width="15px" ImageUrl="~/expand_blue.jpg" /></td>

</tr>

<tr>

<asp:Panel ID="Panel1" runat="server" BackColor="PowderBlue" Height="135px" Width="240px">

<asp:Label ID="Label1" runat="server" Text="The CollapsiblePanel is a very flexible extender that allows you to easily add Collapsible sections to your web page. This extender targets any ASP.NET Panel control. The page developer specifies which control(s) on the page should be the open/close controller for the panel, or the panel can be set to automatically expand and/or collapse when the mouse cursor moves in or out of it, respectively. " Height="190px" Width="230px"></asp:Label><br />

</marquee>

</asp:Panel>

</td>

</tr>

<tr>

<asp:Label ID="Label3" runat="server" Width="241px"></asp:Label></td>

</tr>

</table>

</form>

</body>

</html>

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;

using System.IO;

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

{

protected void Page_Load(object sender, EventArgs e)

{

Label1.Text = TQtxt();

}

protected string TQtxt()

{

string path = Request.PhysicalApplicationPath.ToString() + "GG.txt";

FileStream fs = new FileStream(path, FileMode.Open, FileAccess.Read);

StreamReader m_streamReader = new StreamReader(fs, System.Text.Encoding.Default);

m_streamReader.BaseStream.Seek(0, SeekOrigin.Begin);

string gg = "";

string strLine = m_streamReader.ReadLine();

while (strLine != null)

{

gg += strLine + "\n";

strLine = m_streamReader.ReadLine();

}

m_streamReader.Close();

return gg;

}

OK了，配上好看的图片，应该是个不错的告示牌！

posted @ 2006-07-12 11:49 桂素伟阅读(1811) 评论(0) 编辑收藏举报

刷新页面返回顶部