大白鲨博客

欢迎讨论.Net技术、delphi技术、C++等技术(我的QQ号：353079102)

导航

用Atlas的Accordion实现QQ折叠效果

 

一、Accordion控件简介

Accordion控件是能够提供多个显示面版的Web控件，它一次只能显示一个面版的内容。它有多个可折叠的面版，且一次只能展开一个。Accordion内包含AccordionPane控件，每个AccordionPane控件内都有一个模版，模版内都有标题和内容。

Accordion控件有三种AutoSize模式能适应各种不同的布局：

None：在Accordion控件展开或收缩时不受限制，这会引起其他元素在页面中向上或向下移动。

Limit：在Accordion控件展开时不能超过控件的最开始设置的高度，如果显示内容太多则会出现滚动条。

Fill：Accordion控件始终精确保持和高度设置一样的尺寸。

Accordion控件也能够进行数据绑定，通过DataSource或 DataSourceID属性指定一个数据源，然后设置标题数据字段（HeaderTemplate）和内容数据字段（ContentTemplate）。

二、Accordion控件属性介绍

控件初始化代码格式如下(斜体部分的属性为可选项)：
 

<atlasToolkit:Accordion

    ID="MyAccordion"

    runat="Server"

    SelectedIndex="0"

    HeaderCssClass="accordionHeader"

    ContentCssClass="accordionContent"

    AutoSize="None"

    FadeTransitions="true"

    TransitionDuration="250"

    FramesPerSecond="40">

    <Panes>

        <atlasToolkit:AccordionPane

            HeaderCssClass="accordionHeader"

            ContentCssClass="accordionContent">

            <Header> . . . </Header>

            <Content> . . . </Content>

        </atlasToolkit:AccordionPane>       

        .

        .

        .

    </Panes>           

    <HeaderTemplate>...</HeaderTemplate>           

    <ContentTemplate>...</ContentTemplate>              

</atlasToolkit:Accordion>

        

控件的每个属性介绍如下：

SelectedIndex：已伸展开的AccordionPane控件的索引号。

HeaderCssClass：作用于标题的CSS类名。它也可以指定给Accordion 控件的HeaderCssClass属性以此作为所有AccordionPanes控件的默认属性，或者直接指定给单独AccordionPane控件的HeaderCssClass属性。

ContentCssClass：用于显示内容的CSS类名。它也可以指定给Accordion 控件的ContentCssClass属性以此作为所有AccordionPanes控件的默认属性，或者直接指定给单独AccordionPane控件的ContentCssClass属性。

FadeTransitions：为True时为渐变效果（在伸缩时颜色变淡，伸缩完后颜色恢复正常）,为false时是标准变换。

TransitionDuration：在选择某一标题后伸展和收缩过渡动画所持续的时间,单位为毫秒。

FramesPerSecond：用于伸展和收缩过渡动画每秒所需要的帧数。

AutoSize：用于限制Accordion控件展开的高度. AutoSize枚举类型取值在简介中已作过描述。

Panes：AccordionPane控件的集合。

HeaderTemplate：标题模版，其中包含的标记用于进行数据绑定来显示面版标题。ContentTemplate：内容模版，其中包含的标记用于进行数据绑来显示面版内容。

DataSource：指定数据源，必须要调用DataBind()方法进行数据绑定。

DataSourceID：用数据源的ID来指定一个数据源。

DataMember：当使用DataSourceID 来指定数据源时用于绑定的成员。

三、实例演示

1．我们先把AtlasControlToolkit.dll的控件安装到开发环境工具箱中：



 

2．添加一个页面Accordion.aspx，在页面上放一个ScriptManager控件（必须要有）和一个Accordion控件和多个AccordionPane控件。在AccordionPane模版中设置<Content></Content>和<Header></Header>的内容，代码如下：

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

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <LINK href="StyleSheet.css" type=text/css rel=stylesheet>
   <script src="Accordion.js" type="text/jscript"></script> 
    
</head>
<body >
    <form id="form1" runat="server">
    <table border="0" cellspacing="0" cellpadding="0" height="100%">
        <tr>
        <td height="100%" style="width: 20%">
        <div style="height: 20%">
        <atlas:ScriptManager ID="ScriptManager1" runat="server">
        </atlas:ScriptManager>
        
        <cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0"  HeaderCssClass="accordionHeader"  ContentCssClass="accordionContent"  TransitionDuration="250"  FramesPerSecond="40" Width="300px" Height="400px">
        <Panes>
        <cc1:AccordionPane runat="server" Width="300px" HeaderCssClass="accordionHeader" ID="AccordionPane1" ContentCssClass="accordionContent"><Content>
           本文通过介绍Atlas的最新技术的使用，使你能够理解什么是Atlas技术，对学习Atlas有很大帮助。在这里你将要跟着我做一个基本的Atlas程序，下面的程序是使用Atlas控件通过客户端脚本远程调用Webservice，然后把结果显示到Web页面上，但不需要通过把页面提交到服务器端就可以完成。
           <a href="#" onclick="window.open('http://shark.blog.ccidnet.com/blog/ccid/do_showone/tid_89856.html');return true;">点击这里阅读全文</a>
        
</Content>
<Header>
用VS2005创建一个基本的Atlas Web应用(1)
</Header>
</cc1:AccordionPane>

         <cc1:AccordionPane runat="server" Width="300px" HeaderCssClass="accordionHeader" ID="AccordionPane2" ContentCssClass="accordionContent"><Content>
          本文主要介绍微软新的Web开发技术中的客户端的Atlas的脚本声明语法，在这里你将要建立和前一篇文章中介绍的例子同样功能的Web程序，在前一篇文章中介绍了用客户端脚本调用Web服务，然而在这里，不是用客户端脚本，而是用客户端脚本声明来完成调用Web服务，你可以学到Atlas'声明块的基本语法、如何与Web页中的HTML元素建立关联和如何调用Web服务的基本知识。
          <a href="#" onclick="window.open('http://shark.blog.ccidnet.com/blog/ccid/do_showone/tid_90114.html');;return true;">点击这里阅读全文</a>
         
</Content>
<Header>
用VS2005创建一个Atlas Web应用程序(2)
</Header>
</cc1:AccordionPane>

         <cc1:AccordionPane runat="server" Width="300px" HeaderCssClass="accordionHeader" ID="AccordionPane3" ContentCssClass="accordionContent"><Content>
         本文要介绍的是微软新开发技术中的自动完成特性，在本例中你可以学到怎么设置自动完成功能、在自动完成功能中如何通过调用Web服务获取服务端的数据，如何把本功能和页面上的TextBox控件建立联系以便在用户输入文本时完成自动弹出下拉框功能。
         <a href="#" onclick="window.open('http://shark.blog.ccidnet.com/blog/ccid/do_showone/tid_90865.html');;return true;">点击这里阅读全文</a>
         
</Content>
<Header>
         用VS2005创建一个Atlas Web应用程序(3)
         
</Header>
</cc1:AccordionPane>

       
       <cc1:AccordionPane runat="server" Width="300px" HeaderCssClass="accordionHeader" ID="AccordionPane4" ContentCssClass="accordionContent"><Content>
         在前三篇文章中用实例的方式介绍了开发Atlas Web应用程序的基本方法和原理。从上三篇文章中我们也了解到实现客户端功能的方式有两种，一种是客户端脚本方式，一种是类似于XML格式的脚本声明块。这两种都可以实现客户端功能。在这里将做一个更详细的分析和介绍。
         <a href="#" onclick="window.open('http://shark.blog.ccidnet.com/blog/ccid/do_showone/tid_91850.html');;return true;">点击这里阅读全文</a>
         
</Content>
<Header>
        用VS2005创建一个Atlas Web应用程序(4)
         
</Header>
</cc1:AccordionPane>







       
       <cc1:AccordionPane runat="server" Width="300px" HeaderCssClass="accordionHeader" ID="AccordionPane5" ContentCssClass="accordionContent"><Content>
         本文接上一篇文章继续介绍客户端控件，在这篇文章中分两部分内容来介绍，首先介绍客户端控件的属性设置、事件处理和动作调用，然后介绍客户端控件的基本数据绑定。
         <a href="#" onclick="window.open('http://shark.blog.ccidnet.com/blog/ccid/do_showone/tid_92826.html');;return true;">点击这里阅读全文</a>
         
</Content>
<Header>
        用VS2005创建一个Atlas Web应用程序(5)
         
</Header>
</cc1:AccordionPane>



<cc1:AccordionPane runat="server" Width="300px" HeaderCssClass="accordionHeader" ID="AccordionPane6" ContentCssClass="accordionContent"><Content>
         本文接着上一篇文章继续介绍数据绑定的其他特性和数据验证。
         <a href="#" onclick="window.open('http://shark.blog.ccidnet.com/blog/ccid/do_showone/tid_93988.html');;return true;">点击这里阅读全文</a>
         
</Content>
<Header>
        用VS2005创建一个Atlas Web应用程序(6)
         
</Header>
</cc1:AccordionPane>


<cc1:AccordionPane runat="server" Width="300px" HeaderCssClass="accordionHeader" ID="AccordionPane7" ContentCssClass="accordionContent"><Content>
         本文接着上一篇文章的内容继续介绍Atlas客户端控件的行为特性和Atlas客户端组件。
         <a href="#" onclick="window.open('http://shark.blog.ccidnet.com/blog/ccid/do_showone/tid_94688.html');;return true;">点击这里阅读全文</a>
         
</Content>
<Header>
        用VS2005创建一个Atlas Web应用程序(7)
         
</Header>
</cc1:AccordionPane>


<cc1:AccordionPane runat="server" Width="300px" HeaderCssClass="accordionHeader" ID="AccordionPane8" ContentCssClass="accordionContent"><Content>
         在ASP.NET "Atlas"框架中，你能够使用客户端控件和组件以脚本编程方式或声明方式开发非常丰富的UI应用程序，同样，您也能够像添加客户端控件一样把服务器控件添加到新的或已存在的应用程序中。本文介绍ASP.NET "Atlas"的服务器控件的使用和它的工作原理。
         <a href="#" onclick="window.open('http://shark.blog.ccidnet.com/blog/ccid/do_showone/tid_95790.html');;return true;">点击这里阅读全文</a>
         
</Content>
<Header>
        用VS2005创建一个Atlas Web应用程序(8)
         
</Header>
</cc1:AccordionPane>


<cc1:AccordionPane runat="server" Width="300px" HeaderCssClass="accordionHeader" ID="AccordionPane9" ContentCssClass="accordionContent"><Content>
         本文接着上一篇文章，介绍UpdatePanel控件触发条件的使用。
         <a href="#" onclick="window.open('http://shark.blog.ccidnet.com/blog/ccid/do_showone/tid_95817.html');;return true;">点击这里阅读全文</a>
         
</Content>
<Header>
        用VS2005创建一个Atlas Web应用程序(9)
         
</Header>
</cc1:AccordionPane>


<cc1:AccordionPane runat="server" Width="300px" HeaderCssClass="accordionHeader" ID="AccordionPane10" ContentCssClass="accordionContent"><Content>
         本文介绍Atlas服务端的一个很重要的控件ScriptManager，另外简单介绍一下服务器控件TimerControl。
         <a href="#" onclick="window.open('http://shark.blog.ccidnet.com/blog/ccid/do_showone/tid_96067.html');;return true;">点击这里阅读全文</a>
         
</Content>
<Header>
        用VS2005创建一个Atlas Web应用程序(10)
         
</Header>

</cc1:AccordionPane>


        </Panes>
        
        </cc1:Accordion>
            &nbsp;
        </div>
        </td>
        <td>
         是否进行渐变: <input id="fade" type="checkbox" onclick="toggleFade();" value="false" /><br />
        尺寸调整模式: <select id="autosize" onchange="changeAutoSize();" style="width: 75px">
            <option value="0" selected>None</option>
            <option value="1">Fill</option>
            <option value="2">Limit</option>
        </select>
        </td>
        </tr>
       
       </table>
    
        
    </form>
</body>
</html>

      Accordion.js文件的脚本程序为（当选择“是否进行渐变”和“尺寸调整模式”后用脚本程序进行相应处理）：

function pageLoad()　//初始化控件属性
{
   var ac = $object("Accordion1");
   var behavior=ac.get_behaviors()[0];
   behavior.set_AutoSize("None");
   //behavior.set_FadeTransitions(false);
}

function toggleFade() //当用户选择id="fade"复选框时设置FadeTransitions属性
{
    var ac = $object("Accordion1");
    var behavior=ac.get_behaviors()[0];
    if (behavior) 
    {
         behavior.set_FadeTransitions(!behavior.get_FadeTransitions());
    }
 }
            
 function changeAutoSize() //当用户选择下拉框某一项时设置AutoSize属性
 {
     var ac = $object("Accordion1");
     var behavior=ac.get_behaviors()[0];
     var ctrl = $('autosize');
     if (behavior) 
     {
         var size = "None";
         switch (ctrl.selectedIndex) 
         {
              case 0 :
                behavior.control.element.style.height = "100%";
                size = "None";
                break;
              case 1 :
                behavior.control.element.style.height = "400px";
                size = "Fill";
                break;
              case 2 :
                 behavior.control.element.style.height = "400px";
                 size = "Limit";
                 break;
         }
         behavior.set_AutoSize(size);
     }
     if (document.focus) 
     {
          document.focus();
     }
 }

 

3．运行Accordion.aspx，效果如下图：




演示源码下载

posted on 2006-10-10 10:56  大白鲨  阅读(393)  评论(0)    收藏  举报