Accordion：可折叠面板的集合

最新推荐文章于 2021-06-09 17:29:18 发布

??yy

最新推荐文章于 2021-06-09 17:29:18 发布

阅读量133

点赞数

文章标签： c# javascript 数据库 ViewUI

功能：
         实现了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 >

< div class ="description" >

< ul >

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

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

</ ul >

</ div >

< form id ="form1" runat ="server" >

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

</ asp:ScriptManager >

< div align ="center" >

< ajaxToolkit:Accordion ID ="Accordion1"

runat ="server"

width ="450px"

ContentCssClass ="accordionContentDef"

HeaderCssClass ="accordionHeaderDef"

RequireOpenedPane ="false"

SelectedIndex ="2" >

< Panes >

< ajaxToolkit:AccordionPane ID ="AccordionPane1"

runat ="server" >

< Header >

< a href ="" onclick ="return false;" >

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

</ a >

</ Header >

< Content >

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

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

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

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

</ Content >

</ ajaxToolkit:AccordionPane >

< ajaxToolkit:AccordionPane ID ="AccordionPane2"

runat ="server" >

< Header >

< a href ="" onclick ="return false;" >

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

</ a >

</ Header >

< Content >

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

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

</ Content >

</ ajaxToolkit:AccordionPane >

< ajaxToolkit:AccordionPane ID ="AccordionPane3"

runat ="server"

ContentCssClass ="accordionContentCS"

HeaderCssClass ="accordionHeaderCS" >

< Header >

< a href ="" onclick ="return false;" >

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

</ a >

</ Header >

< Content >

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

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

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

</ Content >

</ ajaxToolkit:AccordionPane >

< ajaxToolkit:AccordionPane ID ="AccordionPane4"

runat ="server"

ContentCssClass ="accordionContentCS"

HeaderCssClass ="accordionHeaderCS" >

< Header >

< a href ="" onclick ="return false;" >

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

</ a >

</ Header >

< Content >

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

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

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

</ Content >

</ ajaxToolkit:AccordionPane >

< ajaxToolkit:AccordionPane ID ="AccordionPane5"

runat ="server"

ContentCssClass ="accordionContentSQL"

HeaderCssClass ="accordionHeaderSQL" >

< Header >

< a href ="" onclick ="return false;" >

Microsoft SQL Server 2005 完全实战

</ a >

</ Header >

< Content >

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

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

打下不可动摇的根基。

</ Content >

</ ajaxToolkit:AccordionPane >

</ Panes >

</ ajaxToolkit:Accordion >

</ div >

< p />

< div align ="center" >

< table >

< tr align ="left" >

< td >

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

< input id ="FadeMode" type ="checkbox" onclick ="toggleFade();" value ="false" />

</ td >

</ tr >

< tr align ="left" >

< td >

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

< select id ="AutoSizeMode" onchange ="changeAutoSizeMode();" >

< option value ="0" selected > None </ option >

< option value ="1" > Fill </ option >

< 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>

脚本代码如下：

< script language = " javascript " type = " text/javascript " >

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

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 >

运行结果如下：

??yy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Accordion：可折叠面板的集合

功能：实现了QQ、Msn好友分类的折叠效果，就像包含了多个CollapsiblePanels 。常用属性： SelectedIndex ：该控件初次加载时展开的AccordionPane面板的索引值。 HeaderCssClass ：该Accordion中包含的所有AccordionPane面板的标题区域所应用的CSS Class 。...
复制链接

扫一扫