★ AjaxControlToolkit 微软出的ajax.net 工具使用教程四 CollapsiblePanelExtender控件的使用

最新推荐文章于 2024-09-15 17:04:49 发布

shibs

最新推荐文章于 2024-09-15 17:04:49 发布

阅读量1k

点赞数

分类专栏： AJAX 文章标签：工具微软 microsoft server fckeditor stylesheet

AJAX 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用Aosu易博通，一分钱不花，实现网文自动摘抄，博客写作方便又快捷，和您现在看到的一样！自主嵌入Google广告，还能赚取美金！现在就下载

src="http://aosustudio.com.cn//Upload/Articles/070325/fd048511-18fd-4b65-a776-a48ec09fc11d/3860cd0b-402e-4bd0-8593-64fb0d37a21b.html" frameborder="0" width="100%" scrolling="no" height="270">

新建一个AjaxControlToolkitWebSite 项目，把下面的代码复制到你的页面：

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

<!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 id="Head1" runat="server">
    <title>Untitled Page</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager id="MasterScriptManager" EnableScriptGlobalization="false" runat="Server">
</asp:ScriptManager>

    <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
            TargetControlID="ContentPanel"
            ExpandControlID="TitlePanel"
            CollapseControlID="TitlePanel"
            Collapsed="True"
            TextLabelID="Label1"
            ExpandedText="(Hide Details...)"
            CollapsedText="(Show Details...)"
            ImageControlID="Image1"
            ExpandedImage="~/images/collapse_blue.jpg"
            CollapsedImage="~/images/expand_blue.jpg"
            SuppressPostBack="true">
    </ajaxToolkit:CollapsiblePanelExtender>

     <asp:Panel ID="TitlePanel" runat="server" CssClass="collapsePanelHeader">
           <asp:Image ID="Image1" runat="server" ImageUrl="~/images/expand_blue.jpg"/>  
           Who am I ?  
           <asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label>
    </asp:Panel>

    <asp:Panel ID="ContentPanel" runat="server" CssClass="collapsePanel">
        <h1>
            <br />
            Just your average MS Joe ...</h1>
         If you would like to contact me you can send email from my blog at either
        of the following web sites.<p>
            <a href="http://www.JoeOn.net">http://www.JoeOn.net</a></p>
        <p>
            <a href="http://blogs.msdn.com/JoeStagner">http://blogs.msdn.com/JoeStagner</a></p>
        <p>
            I'm a Program Manager on the Microsoft web Tools and Platform. 
        </p>
        <p>
            While my team is based in Redmond WA, I live in New England USA with my beautiful
            wife and children and work wherever the job takes me. I joined Microsoft in 2001
            after starting, building, and selling a .COM firm in New York City. I began as a
            strategic advisor to independent software venders (ISV), moved to a position as
            a Developer Technology Expert ad Technical Evangelist, and after three years I moved
            to the web Tools and Platform Team.</p>
        <p>
            <img align="right" border="0" height="150" src="images/JoeStagUK.gif" width="150" /></p>
        <h2>
            What do I do at Microsoft ?</h2>
        <p>
            You would think this should be an easy question, but it's actually not.
        </p>
        <p>
            My job has many parts.
        </p>
        <p>
            To communicate with Microsoft's web Development Customers, to know as much as I
            can about all web development technologies, those made by Microsoft and those made
            by everyone else, and to communicate from the world to the web development product
            teams and from the web development product teams to the development community.
        </p>
    </asp:Panel>

</form>
</body>
</html>

样式文件代码：

.collapsePanel {
width: 640px;
height:0px;
background-color:white;
overflow:hidden;
}

.collapsePanelHeader{
width:640px;
height:20px;
color: Yellow;
background-color: Black;
font-weight:bold;
float:left;
padding:5px;
cursor: pointer;
vertical-align: middle;
}

.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

.accordionLink
{
background-color: #D3DEEF;
color: white:
}

.watermark {
background: #FFAAFF;
}

.popupControl {
background-color:#AAD4FF;
position:absolute;
visibility:hidden;
border-style:solid;
border-color: Black;
border-width: 2px;
}

.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}

.sampleStyleA {
background-color:#FFF;
}

.sampleStyleB {
background-color:#FFF;
font-family:monospace;
font-size:10pt;
font-weight:bold;
}

.sampleStyleC {
background-color:#ddffdd;
font-family:sans-serif;
font-size:10pt;
font-style:italic;
}

.sampleStyleD {
background-color:Blue;
color:White;
font-family:Arial;
font-size:10pt;
}

今日热点：