在TabContain里面用Accordion控件
上个礼拜一个上海的同行问我一个问题：在TabContain里面用Accordion控件是否可以实现，他说他的实现有问题，这种情况我也没有做过，当时也特别忙，前两个礼拜的工作忙死我了。借次发泄一下：前台网站国庆活动真的多，一些专卖店，支付中介也这个时候跑来凑热闹，都想早点上线，和市场部的人沟通，还要帮同事解决一些ajax的问题，忙地我一个头两个大，看着自己的邮箱里面的邮件，都不晓得那些已经处理了哪些还在处理中。云里雾里的啦。今天早上来好好整理了下，安排好了时间现在才送口气。做了下那个同行的问题：在开发环境显示的界面是：
看得到Accordion在页面上的显示就像报错了不能使用一样的。其实大胆一点试着运行下是没有问题的。我一直不敢大量的在我们的网站中使用ajax，就是怕有这些莫名奇怪的问题抛出来，不晓得ajax怎么弄的，有的时候真的不敢想像它会把我们的页面弄成什么样子，这点我觉得是ajax设计的不太好的地方。不过还好。看到的效果依然是我们想看到的效果：
这样是没有问题的。只是在做这个页面的时候先要将这两个控件中的内容分开来做，然后将Accordion里面的内容移到TabContain相应的地方就好了，代码也很简单：
源代码
1
<asp:ScriptManager ID="ScriptManager1" runat="server">
2 </asp:ScriptManager>
3 <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="13px" Width="1196px">
4 <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
5 <ContentTemplate>
6 在TabContainer控件中测试Accordion控件
7 <cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" SelectedIndex="0" RequireOpenedPane="false"
8 FadeTransitions="true" FramesPerSecond="40" TransitionDuration="200" SuppressHeaderPostbacks="true">
9 <HeaderTemplate>
10 <asp:Label Text="AccordionPane is used in many panels ,it can hidder other panens only visible one for customers"
11 ID="lbExplex" runat="server"></asp:Label>
12 </HeaderTemplate>
13 <ContentTemplate>
14 <asp:Label Text="AccordionPane is used in many panels ,it can hidder other panens only visible one for customers"
15 ID="lbExplex" runat="server"></asp:Label>
16 </ContentTemplate>
17 <Panes>
18 <cc1:AccordionPane ID="AA" runat="server">
19 <Header>
20 <br />
21 <a href="#">How to use this control --Accordion</a>
22 <br />
23 </Header>
24 <Content>
25 this control is userd in many panels ,it can visible one and hidden others<br>
26 TransitionDuration 这个属性的值是设置点击某项后显示该项的时间<br>
27 FramesPerSecond 这个属性的值是设置当前显示项的隐藏时间<br>
28 FadeTransitions=true表示显示出来的时候颜色是逐渐变化的
29 </Content>
30 </cc1:AccordionPane>
31 <cc1:AccordionPane ID="AAB" runat="server">
32 <Header>
33 <br />
34 <a href="#">Accordion控件属性介绍</a>
35 <br />
36 </Header>
37 <Content>
38 a )RequireOpenedPane:当单击控件的Pane中的header时，是否关闭打开的Pane。当值为True时，则不关闭该Pane;当值为False时，则关闭该Pane。
39 <br />
40 b )SuppressHeaderPostBacks:当在客户端单击控件的Pane中的header中的元素时，是否阻止其进行回传。当值为True时，则阻止其回传；当值为False时，则不阻止其回传。
41 <br />
42 c )FadeTransitions:当值为True时，则使用淡入淡出的转化效果；当值为False时，则使用标准的转化效果。
43 <br />
44 d )TransitionDuration:设定转换的时间(或速度)。数值越小，转换越快；数值越大，转换越慢。
45 <br />
46 e )FramesPerSecond:每秒的帧数。
47 <br />
48 f )SelectedIndex:设定页面初始导入时显示的Pane。值为0，为第一个；值为1，为第二个。
49 <br />
50 g )HeaderCssClass:设定Pane中header的css样式。
51 <br />
52 h )ContentCssClass:设定Pane中Content的css样式。
53 </Content>
54 </cc1:AccordionPane>
55 <cc1:AccordionPane ID="A1" runat="server">
56 <Header>
57 <br />
58 <a href="#">新蛋介绍</a>
59 <br />
60 </Header>
61 <Content>
62 <div style="background-color: Gray">
63 中国新蛋网是依托著名的美国新蛋网而创立的新一代专业电子商务消费服务网站，利用强大的全球化集约采购优势、丰富的电子商务管理服务经验和最先进的互联网技术为您提供最新最好的电脑配件、数码产品和时尚用品。
64 中国新蛋网秉承集团“让购物成为享受”的宗旨，致力于为用户提供丰富的商品、便捷的购物方式和完善的售后服务，打造世界一流网上购物体验。中国新蛋网严格按照国家法规政策正规经营，经营的产品皆为正规渠道引进合法缴税的原装正品，有着完善的保修、退货与售后服务制度。为了让您更准确全面的了解您所需要的商品，我们的每一件商品都提供
65 100% 实样的高清晰数码照片、详尽的技术性能指标和制造厂商的介绍。另外，新蛋网还采用多种便捷的支付方式和安全快速的配送体系，通过先进的互联网技术进行订单的实时跟踪，并保证每一位客户资料的安全与保密。
66 过去的几年里，您的支持与厚爱使得新蛋网一直保持惊人的速度成长。在电子商务环境日益成熟的今天，我们将一如既往的努力，力争为广大新老客户提供最愉快的网上购物体验
67 </div>
68 </Content>
69 </cc1:AccordionPane>
70 <cc1:AccordionPane ID="A2" runat="server">
71 <Header>
72 <br />
73 <a href="#">新单配送</a>
74 <br />
75 </Header>
76 <Content>
77 新蛋配送为新蛋快递（上海外环内）。 新蛋快递（上海外环内）订单的配送时间为周一至周六的上午9：00 至 13：00，下午14：00 至 18：00。 顾客在新蛋网下订单时选择新蛋快递的物流方式，我们将提供三个时间段供您选择。
78 因新蛋原因未能准时送达的订单，新蛋承诺给顾客减免运费（以积分形式）。 为了保证您的货品准时送达，请顾客务必正确选择自己所在区域。 新蛋快递上班时间，暂为周一至周六。
79 北京新蛋配送方式为新蛋快递（北京五环内）。 新蛋快递（北京五环内）订单的配送时间为周一至周六的上午9：00 至下午18：00，每天配送截至上一工作日下午17点之前出库的订单。
80 因新蛋原因未能准时送达的订单，新蛋承诺给顾客减免运费（以积分形式）。 为了保证您的货品准时送达，请顾客务必正确选择自己所在区域。 新蛋快递上班时间，暂为周一至周六。
81 </Content>
82 </cc1:AccordionPane>
83 <cc1:AccordionPane ID="A3" runat="server" Font-Overline="true" BackColor="Navy">
84 <Header>
85 <br />
86 <a href="#">售后服务</a>
87 <br />
88 </Header>
89 <Content>
90 新蛋网将严格按照国家三包法规，针对相关产品履行修理、更换和退货的责任和义务。 同时新蛋也建议您：“如果相关产品的厂商有售后服务点，最好将保修件直接寄送到售后服务点保修，那将大大节省您宝贵的等待时间！！”
91 （我们会在产品备注栏里注明相关售后服务点的地址、联络方式或查询方法，供您查询）
92 </Content>
93 </cc1:AccordionPane>
94 <cc1:AccordionPane ID="AccordionPane1" runat="server" Font-Overline="true" BackColor="Navy">
95 <Header>
96 <br />
97 <a href="#">测试事件</a>
98 <br />
99 </Header>
100 <Content>
101 测试事件测试事件测试事件测试事件测试事件测试事件
102 </Content>
103 </cc1:AccordionPane>
104 </Panes>
105 </cc1:Accordion>
106 <br />
107 <br />
108 <br />
109 <br />
110 </ContentTemplate>
111 <HeaderTemplate>
112 中国上海新蛋
113 </HeaderTemplate>
114 </cc1:TabPanel>
115 <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
116 <HeaderTemplate>
117 美国新蛋
118 </HeaderTemplate>
119 </cc1:TabPanel>
120 <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
121 <HeaderTemplate>
122 台湾新蛋
123 </HeaderTemplate>
124 </cc1:TabPanel>
125 <cc1:TabPanel ID="TabPanel4" runat="server" HeaderText="TabPanel4">
126 <HeaderTemplate>
127 成都新蛋
128 </HeaderTemplate>
129 </cc1:TabPanel>
130 </cc1:TabContainer>
看得到Accordion在页面上的显示就像报错了不能使用一样的。其实大胆一点试着运行下是没有问题的。我一直不敢大量的在我们的网站中使用ajax，就是怕有这些莫名奇怪的问题抛出来，不晓得ajax怎么弄的，有的时候真的不敢想像它会把我们的页面弄成什么样子，这点我觉得是ajax设计的不太好的地方。不过还好。看到的效果依然是我们想看到的效果：
这样是没有问题的。只是在做这个页面的时候先要将这两个控件中的内容分开来做，然后将Accordion里面的内容移到TabContain相应的地方就好了，代码也很简单：
源代码
1
<asp:ScriptManager ID="ScriptManager1" runat="server">2
</asp:ScriptManager>3
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="13px" Width="1196px">4
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">5
<ContentTemplate>6
在TabContainer控件中测试Accordion控件7
<cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" SelectedIndex="0" RequireOpenedPane="false"8
FadeTransitions="true" FramesPerSecond="40" TransitionDuration="200" SuppressHeaderPostbacks="true">9
<HeaderTemplate>10
<asp:Label Text="AccordionPane is used in many panels ,it can hidder other panens only visible one for customers"11
ID="lbExplex" runat="server"></asp:Label>12
</HeaderTemplate>13
<ContentTemplate>14
<asp:Label Text="AccordionPane is used in many panels ,it can hidder other panens only visible one for customers"15
ID="lbExplex" runat="server"></asp:Label>16
</ContentTemplate>17
<Panes>18
<cc1:AccordionPane ID="AA" runat="server">19
<Header>20
<br />21
<a href="#">How to use this control --Accordion</a>22
<br />23
</Header>24
<Content>25
this control is userd in many panels ,it can visible one and hidden others<br>26
TransitionDuration 这个属性的值是设置点击某项后显示该项的时间<br>27
FramesPerSecond 这个属性的值是设置当前显示项的隐藏时间<br>28
FadeTransitions=true表示显示出来的时候颜色是逐渐变化的29
</Content>30
</cc1:AccordionPane>31
<cc1:AccordionPane ID="AAB" runat="server">32
<Header>33
<br />34
<a href="#">Accordion控件属性介绍</a>35
<br />36
</Header>37
<Content>38
a )RequireOpenedPane:当单击控件的Pane中的header时，是否关闭打开的Pane。当值为True时，则不关闭该Pane;当值为False时，则关闭该Pane。39
<br />40
b )SuppressHeaderPostBacks:当在客户端单击控件的Pane中的header中的元素时，是否阻止其进行回传。当值为True时，则阻止其回传；当值为False时，则不阻止其回传。41
<br />42
c )FadeTransitions:当值为True时，则使用淡入淡出的转化效果；当值为False时，则使用标准的转化效果。43
<br />44
d )TransitionDuration:设定转换的时间(或速度)。数值越小，转换越快；数值越大，转换越慢。45
<br />46
e )FramesPerSecond:每秒的帧数。47
<br />48
f )SelectedIndex:设定页面初始导入时显示的Pane。值为0，为第一个；值为1，为第二个。49
<br />50
g )HeaderCssClass:设定Pane中header的css样式。51
<br />52
h )ContentCssClass:设定Pane中Content的css样式。53
</Content>54
</cc1:AccordionPane>55
<cc1:AccordionPane ID="A1" runat="server">56
<Header>57
<br />58
<a href="#">新蛋介绍</a>59
<br />60
</Header>61
<Content>62
<div style="background-color: Gray">63
中国新蛋网是依托著名的美国新蛋网而创立的新一代专业电子商务消费服务网站，利用强大的全球化集约采购优势、丰富的电子商务管理服务经验和最先进的互联网技术为您提供最新最好的电脑配件、数码产品和时尚用品。64
中国新蛋网秉承集团“让购物成为享受”的宗旨，致力于为用户提供丰富的商品、便捷的购物方式和完善的售后服务，打造世界一流网上购物体验。中国新蛋网严格按照国家法规政策正规经营，经营的产品皆为正规渠道引进合法缴税的原装正品，有着完善的保修、退货与售后服务制度。为了让您更准确全面的了解您所需要的商品，我们的每一件商品都提供65
100% 实样的高清晰数码照片、详尽的技术性能指标和制造厂商的介绍。另外，新蛋网还采用多种便捷的支付方式和安全快速的配送体系，通过先进的互联网技术进行订单的实时跟踪，并保证每一位客户资料的安全与保密。66
过去的几年里，您的支持与厚爱使得新蛋网一直保持惊人的速度成长。在电子商务环境日益成熟的今天，我们将一如既往的努力，力争为广大新老客户提供最愉快的网上购物体验67
</div>68
</Content>69
</cc1:AccordionPane>70
<cc1:AccordionPane ID="A2" runat="server">71
<Header>72
<br />73
<a href="#">新单配送</a>74
<br />75
</Header>76
<Content>77
新蛋配送为新蛋快递（上海外环内）。 新蛋快递（上海外环内）订单的配送时间为周一至周六的上午9：00 至 13：00，下午14：00 至 18：00。 顾客在新蛋网下订单时选择新蛋快递的物流方式，我们将提供三个时间段供您选择。78
因新蛋原因未能准时送达的订单，新蛋承诺给顾客减免运费（以积分形式）。 为了保证您的货品准时送达，请顾客务必正确选择自己所在区域。 新蛋快递上班时间，暂为周一至周六。79
北京新蛋配送方式为新蛋快递（北京五环内）。 新蛋快递（北京五环内）订单的配送时间为周一至周六的上午9：00 至下午18：00，每天配送截至上一工作日下午17点之前出库的订单。80
因新蛋原因未能准时送达的订单，新蛋承诺给顾客减免运费（以积分形式）。 为了保证您的货品准时送达，请顾客务必正确选择自己所在区域。 新蛋快递上班时间，暂为周一至周六。81
</Content>82
</cc1:AccordionPane>83
<cc1:AccordionPane ID="A3" runat="server" Font-Overline="true" BackColor="Navy">84
<Header>85
<br />86
<a href="#">售后服务</a>87
<br />88
</Header>89
<Content>90
新蛋网将严格按照国家三包法规，针对相关产品履行修理、更换和退货的责任和义务。 同时新蛋也建议您：“如果相关产品的厂商有售后服务点，最好将保修件直接寄送到售后服务点保修，那将大大节省您宝贵的等待时间！！”91
（我们会在产品备注栏里注明相关售后服务点的地址、联络方式或查询方法，供您查询）92
</Content>93
</cc1:AccordionPane>94
<cc1:AccordionPane ID="AccordionPane1" runat="server" Font-Overline="true" BackColor="Navy">95
<Header>96
<br />97
<a href="#">测试事件</a>98
<br />99
</Header>100
<Content>101
测试事件测试事件测试事件测试事件测试事件测试事件102
</Content>103
</cc1:AccordionPane>104
</Panes>105
</cc1:Accordion>106
<br />107
<br />108
<br />109
<br />110
</ContentTemplate>111
<HeaderTemplate>112
中国上海新蛋113
</HeaderTemplate>114
</cc1:TabPanel>115
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">116
<HeaderTemplate>117
美国新蛋118
</HeaderTemplate>119
</cc1:TabPanel>120
<cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">121
<HeaderTemplate>122
台湾新蛋123
</HeaderTemplate>124
</cc1:TabPanel>125
<cc1:TabPanel ID="TabPanel4" runat="server" HeaderText="TabPanel4">126
<HeaderTemplate>127
成都新蛋128
</HeaderTemplate>129
</cc1:TabPanel>130
</cc1:TabContainer>