Accordion：可折叠面板的集合

功能：
         实现了QQ、Msn好友分类的折叠效果，就像包含了多个CollapsiblePanels 。
常用属性：
      SelectedIndex ：该控件初次加载时展开的AccordionPane面板的索引值。
      HeaderCssClass ：该Accordion中包含的所有AccordionPane面板的标题区域所应用的CSS Class 。
      ContentCssClass ：该Accordion中包含的所有AccordionPane面板的内容区域所应用的CSS Class 。
     AutoSize ：   在展开具有不同高度的AccordionPane面板时，该Accordion的总高度的变化方式。
                            可选如下3个值：

None：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短。

                            Limit：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短，不过最高不
                                    会超过Accordion的Height属性设定值。若是其内容高度超过了Height属性设定值，则
                                    将自动显示滚动条。

                            Fill：该Accordion的高度将固定为Height属性的设定值，不随当前展开的不同高度
                                 的AccordionPane面板而变化。若是某个AccordionPane的内容高度超过了Height属性设定
                                值，则将自动显示滚动条。
FadeTransitions ：若该属性值设置为true，则在切换当前展开的AccordionPane面板时，将带有淡入淡出效果
TransitionDuration ：展开/折叠一个AccordionPane面板的过程所花费的时间，单位为毫秒。
FramesPerSecond ：播放展开/折叠AccordionPane面板动画的每秒钟帧数。
DataSourceID ：     页面中某个DataSource控件的ID，用于通过数据绑定自动生成AccordionPane面板。
<Panes> ：     该标签内将包含一系列的<ajaxToolkit:AccordionPane>标签，即Accordion- Pane的声明，用来表
                         示 Accordion中包含的面板。
<HeaderTemplate> ：在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的标题
                                     区域中的内容模板。
<ContentTemplate> :     在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的正文
                                      。区域中的内容模板
实例代码：

</head>

<body onload="focus();"><a href="http://abcdwxc.cnblogs.com/" target="_blank">Acoordion的实例-------王晓成的博客

</a>

<ul>

<li>使用可折叠控件（Accordion）并搭配 5 个可折叠面板（AccordionPane）控件，<strong>一次仅展开一个可折叠面板</strong>。 </li>

<li>当页面第一次被加载时，会自动展开<strong>第三个</strong>可折叠面板。 </li>

</ul>

</div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<ajaxToolkit:Accordion ID="Accordion1"

runat="server"

width="450px"

ContentCssClass="accordionContentDef"

HeaderCssClass="accordionHeaderDef"

RequireOpenedPane="false"

SelectedIndex="2">

<Panes>

<ajaxToolkit:AccordionPane ID="AccordionPane1"

runat="server">

Visual Basic 2005 程序开发与界面设计秘诀

</a>

</Header>

完全的范例与实作导向，颠覆传统只是纸上谈兵、高谈阔论的写法。通过众多程序范例，

务实、深度且精确地切入 Visual Basic 2005 最重要且实用的程序开发与界面设计议题。

经过本书的洗礼，相信您能扎实掌握 Visual Basic 2005 的内涵与开发精髓，迅速站上

.NET Framework此一巨人的肩膀，让您的开发生命走得更长、更稳、更辉煌。

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane2"

runat="server">

Visual Basic 2005 文件 IO 与数据存取秘诀

</a>

</Header>

学习不在多言，不仅实作，更要实战。本书秉持具体力行的思维，彻底提升读者功力为职志，

贡献了 260 个以上的程序范例，针对文件输入输出与数据存取议题，深度剖析。

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane3"

runat="server"

ContentCssClass="accordionContentCS"

HeaderCssClass="accordionHeaderCS">

Visual C# 2005 程序开发与界面设计秘诀

</a>

</Header>

通过众多程序范例，务实、深度且精确地切入Visual C# 2005 最重要且实用的程序开发与接口设计议题。

经过本书的洗礼，相信您能扎实掌握 Visual C# 2005 的内涵与开发精髓，迅速站上

.NET Framework此一巨人的肩膀，让您的开发生命走得更长、更稳、更辉煌。

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane4"

runat="server"

ContentCssClass="accordionContentCS"

HeaderCssClass="accordionHeaderCS">

Visual C# 2005 文件 IO 与数据存取秘诀

</a>

</Header>

本书秉持具体力行的思维，彻底提升读者功力为职志，贡献了 260 个以上的程序范例，

针对文件输入输出与数据存取议题，深度剖析。希望透过无私的心得分享，与大家一起再创颠峰，

将开发生命提升至一个全新的境界。

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane5"

runat="server"

ContentCssClass="accordionContentSQL"

HeaderCssClass="accordionHeaderSQL">

Microsoft SQL Server 2005 完全实战

</a>

</Header>

使用了近 600 个指令文件（.sql）与数个Windows应用程序及类库项目，详实且深入探讨

SQL Server 2005 的“数据库创建”、“Transact-SQL程序设计”与 XML 等三大核心领域，

打下不可动摇的根基。

</Content>

</ajaxToolkit:AccordionPane>

</Panes>

</ajaxToolkit:Accordion>

</div>

<p />

<table>

<td>

是否使用<strong>“淡出效果”</strong>：

</td>

</tr>

<td>

设定<strong>「AutoSize」</strong>模式：

<option value="2">Limit</option>

</select>

</td>

</tr>

</table>

</div>

</form>

</body>

样式如下：

/* 预设的标头样式表 */

.accordionHeaderDef

{

border: 2px solid #0B0109;

background-color: #8B7149;

font-weight: bold;

padding: 5px;

margin-top: 5px;

cursor: pointer;

text-align: center;

}

/* 预设的内容样式表 */

.accordionContentDef

{

border: thick ridge #FFD8D8;

background-color: #A7D9AF;

border-top: none;

padding: 5px;

padding-top: 10px;

text-align: left;

}

/* 预设的标头之超级链接样式表 */

.accordionHeaderDef a

{

color: #FFFFCC;

text-decoration: none;

}

/* 当鼠标移过预设的标头之超级链接样式表 */

.accordionHeaderDef a:hover

{

background-color: LightSlateGray;

color: Yellow;

text-decoration: underline overline;

}

/* C# 类的标头样式表 */

.accordionHeaderCS

{

border: 2px solid #040D0D;

background-color: #B4CDCD;

font-weight: bold;

padding: 5px;

margin-top: 5px;

cursor: pointer;

text-align: center;

}

/* C# 类的内容样式表 */

.accordionContentCS

{

border: thick ridge #2FFBFB;

background-color: #F0D8DB;

border-top: none;

padding: 5px;

padding-top: 10px;

text-align: left;

}

/* C# 类的标头之超级链接样式表 */

.accordionHeaderCS a

{

color: #0000FF;

text-decoration: none;

}

/* 当鼠标移过 C# 类的标头之超级链接样式表 */

.accordionHeaderCS a:hover

{

background-color: LightSlateGray;

color: Yellow;

text-decoration: underline overline;

}

/* SQL 类的标头样式表 */

.accordionHeaderSQL

{

border: 2px solid #0C0C0A;

background-color: #9C8C5A;

font-weight: bold;

padding: 5px;

margin-top: 5px;

cursor: pointer;

text-align: center;

}

/* SQL 类的内容样式表 */

.accordionContentSQL

{

border: thick ridge #FFD8D8;

background-color: #E7E3C9;

border-top: none;

color: #000000;

padding: 5px;

padding-top: 10px;

text-align: left;

}

/* SQL 类的标头之超级链接样式表 */

.accordionHeaderSQL a

{

color: #FFFFFF;

text-decoration: none;

}

/* 当鼠标移过 SQL 类的标头之超级链接样式表 */

.accordionHeaderSQL a:hover

{

background-color: LightSlateGray;

color: Yellow;

text-decoration: underline overline;

}

</style>

脚本代码如下：

// 设定「淡出效果」属性。

function toggleFade()

{

// 找出 ID 属性值为 Accordion1_AccordionExtender 的手风琴折之行为。

var behavior = $find('Accordion1_AccordionExtender');

if (behavior)

{

// 设定是否使用淡出效果。

behavior.set_FadeTransitions(!behavior.get_FadeTransitions());

// 显示淡出效果所花费的时间要多久（单位：毫秒）。

// 若不指定时，这个时间会是 250 毫秒。

behavior.set_TransitionDuration(1000);

// 于淡出效果的转换中，每秒要使用多少个画格（Frame）。

// 若不指定时，会使用 40 个画格。

behavior.set_FramesPerSecond(100);

}

// 设定自动调整大小（AutoSize）的模式。

function changeAutoSizeMode()

{

// 找出 ID 属性值为 Accordion1_AccordionExtender 的手风琴折之行为。

var behavior = $find('Accordion1_AccordionExtender');

// 找出 ID 属性值为 AutoSizeMode 的项目。

var ctrl = $get('AutoSizeMode');

if (behavior)

{

// 定义 AutoSize 变量。

var size;

// 取得所指定的 AutoSize 模式。

switch (ctrl.selectedIndex)

{

// None 模式。

case 0:

behavior.get_element().style.height = '400px';

size = AjaxControlToolkit.AutoSize.None;

break;

// Fill 模式。

case 1:

behavior.get_element().style.height = '400px';

size = AjaxControlToolkit.AutoSize.Fill;

break;

// Limit 模式。

case 2:

behavior.get_element().style.height = '400px';

size = AjaxControlToolkit.AutoSize.Limit;

break;

}

// 设定 Accordion1_AccordionExtender 的手风琴折之 AutoSize 行为。

behavior.set_AutoSize(size);

}

</script>

运行结果如下：

posted on 2007-10-26 09:36 王晓成阅读(2196) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

公告