注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

飞天心宏的博客

依稀旧梦似曾见,相逢只恨缘太迟

 
 
 

日志

 
 
关于我

出身数学,爱好文学,从事软件开发工作。一个阳光、幽默、热爱生活的男孩子,在追求理想的路上风雨无阻,勇往直前,崇尚“梦想有多远,我们就走多远”!

Ajax控件之Accordion  

2008-07-30 18:56:04|  分类: Ajax Toolkit |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  折叠控件Accordion ,实现的手风琴效果。可以在不同的选项卡中选择。

效果下图:(通过点击不同的头标签,可以浏览相应的内容)

Ajax控件之Accordion - 飞天心宏 - 飞天心宏的博客

   现在我们简单介绍一下面用到的Accordion的要用到的几个重要属性:  
          SelectedIndex=“0”   //刚进页面显示第一个AccordionPane中的内容
          AutoSize="Limit"   //AutoSize选择Limit表示超出宽度和长度显示流动条
          Width="450px"   宽度
          Height="350px"  高度
          ContentCssClass="accordionContent"  //内容样式
          HeaderCssClass="accordionHeader"     //头部样式     
          FadeTransitions="true"              //true表示使用淡入效果
          TransitionDuration="250"         //淡入时间(单位毫秒)
          FramesPerSecond="40"              //每秒帧数

下面是实现具体过程:

  首先是样式:(注:accordionHeader是头部样式,accordionContent是内容样式, cursor: pointer;表示的是当鼠标移动到该位置时变成手形,其他的应该大家很容易理解了,如果有不熟悉的,大家可以参考CSS资料   )

.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
 font-family: Arial, Sans-Serif;
 font-size: 15px;
 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:Yellow;
}

a:active

 color: #CC0099;
}

程序清单:

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

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" 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>AJAX控件之Accordion</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body >
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  
    <div>
       
    </div>
    <cc1:Accordion ID="Accordion1" runat="server"
          SelectedIndex="0"
          AutoSize="Limit"
          Width="450px"
          Height="350px"
          ContentCssClass="accordionContent"
          HeaderCssClass="accordionHeader"             
          FadeTransitions="true"
          TransitionDuration="250"
          FramesPerSecond="40">
    <Panes>
        <cc1:AccordionPane ID="AccordionPane1" runat="server">
            <Header>
             <a href=""  onclick="return false;" class="accordionLink">华东交通大学</a>
            </Header>
            <Content>
             <p>华东交通大学位于物华天宝、人杰地灵的英雄城南昌,是一所以工为主,经、管、文、理等学科协调发展的多科性大学。</p>
             <p>华东交通大学坐落于自古以来有着“物华天宝、人杰地灵”美誉的英雄城—南昌。学校环境优美,校园面积2800余亩,树木葱郁,鸟语花香,孔目湖蜿蜒其间,山青水秀,景色怡人,使华东交通大学成为教学、科研、学习和生活的好地方。</p>
             <p>乘车路线1: 南昌火车站-(2路外线)->青山路口-(223路)->华东交通大学</p>
             <p>乘车路线2: 长途汽车站-(1路、2路外线)->青山路口-(223路)->华东交通大学</p>
             <p>乘车路线3: 南昌昌北机场-(机场专线车或的士)->华东交通大学</p>
            </Content>
        </cc1:AccordionPane>
        <cc1:AccordionPane ID="AccordionPane2" runat="server">
            <Header>
             <a href=""  onclick="return false;"  class="accordionLink">华东交通大学</a>
            </Header>
            <Content>
             <p>华东交通大学位于物华天宝、人杰地灵的英雄城南昌,是一所以工为主,经、管、文、理等学科协调发展的多科性大学。</p>
             <p>华东交通大学坐落于自古以来有着“物华天宝、人杰地灵”美誉的英雄城—南昌。学校环境优美,校园面积2800余亩,树木葱郁,鸟语花香,孔目湖蜿蜒其间,山青水秀,景色怡人,使华东交通大学成为教学、科研、学习和生活的好地方。</p>
             <p>乘车路线1: 南昌火车站-(2路外线)->青山路口-(223路)->华东交通大学</p>
             <p>乘车路线2: 长途汽车站-(1路、2路外线)->青山路口-(223路)->华东交通大学</p>
             <p>乘车路线3: 南昌昌北机场-(机场专线车或的士)->华东交通大学</p>
            </Content>
        </cc1:AccordionPane>
        <cc1:AccordionPane ID="AccordionPane3" runat="server">
            <Header>
             <a href=""  onclick="return false;" class="accordionLink">华东交通大学</a>
            </Header>
            <Content>
             <p>华东交通大学位于物华天宝、人杰地灵的英雄城南昌,是一所以工为主,经、管、文、理等学科协调发展的多科性大学。</p>
             <p>华东交通大学坐落于自古以来有着“物华天宝、人杰地灵”美誉的英雄城—南昌。学校环境优美,校园面积2800余亩,树木葱郁,鸟语花香,孔目湖蜿蜒其间,山青水秀,景色怡人,使华东交通大学成为教学、科研、学习和生活的好地方。</p>
             <p>乘车路线1: 南昌火车站-(2路外线)->青山路口-(223路)->华东交通大学</p>
             <p>乘车路线2: 长途汽车站-(1路、2路外线)->青山路口-(223路)->华东交通大学</p>
             <p>乘车路线3: 南昌昌北机场-(机场专线车或的士)->华东交通大学</p>
            </Content>
        </cc1:AccordionPane>       
    </Panes>
    </cc1:Accordion>
    </form>
</body>
</html>

 

最后说明一下:在视图状态你放了一个Accordion控件,可能看不到,这样我们就可以在源中编辑代码。

  在使用Accordion中,我们用到三个AccordionPane控件,这些也是不能在视图中直接拖进去的,都应该在源中。

  评论这张
 
阅读(567)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018