色即设——设计，从网页设计师的角度出发。因为自己的的特殊性（本身是软件工程师，但是对网页设计却有浓厚的兴趣），所以我的此系列文章不仅仅从编程角度出发，还将从设计的角度出发来细数AjaxControlToolkit系列控件，告诉你这些控件最终的结构表现形式、样式，还有如何修改他们的样式使之适合于你的网页整体规划。
窥，小视也——《说文》，此小视非必小视呀。此小视的意思是：水平有限，不能望其全貌，仅能管中窥豹。所以很多地方还请高人指点则个。

相关链接：
Asp.net Ajax Control Toolkit设计编程备忘录（色眼窥观版）——第1回(柿子专辑)
Asp.net Ajax Control Toolkit设计编程备忘录（色眼窥观版）——第6回(习惯专辑）

正文：

用户体验很重要的一部分就是符合用户的使用习惯，所谓“习惯即享受”，讲的就是这个意思。虽然B/S模式项目有很多方面优秀于C/S模式项目，但是我们不得不承认，C/S模式项目在响应、用户操作习惯等方面绝对是B/S模式项目不能及的。很多用户的操作习惯都是由电脑操作系统、应用程序软件培养出来的，例如：双击、拖动、快捷键。这些用户习惯就目前的B/S项目而言，基本没有被继承下来。老是有人抱怨某某网站操作起来很别扭，很不习惯。的确，因为B/S模式项目的特殊性，很多用户习惯很难被继承。但是随着ajax的出现已经网络速度的提升，一些由电脑操作系统、应用程序软件培养出来的用户操作习惯已经可以被实现或模拟。如何让浏览者更习惯地操作B/S模式项目将是我们今天的话题。

16：Accordion
如果你的网站的用户群体是极具网络消费能力和好奇心的青少年的话，那么你一定要注意一下这个控件。因为我们利用它可以实现QQ的那种折叠功能。这种折叠不仅仅是能够节省空间那么简单，更重要的是：新颖、而且完全符合QQ用户群体的操作习惯。能够让青少年感到操作的亲切和方便，从而提高用户的体验度。
好处就说到这里，下面先列出它的属性参数：

• SelectedIndex - The AccordionPane to be initially visible 【默认展开的Panes的索引】

• HeaderCssClass - Name of the CSS class to use for the headers. This can be either applied to the Accordion as a default for all AccordionPanes, or an individual AccordionPane.【Panes头部的样式表】

• ContentCssClass - Name of the CSS class to use for the content. This can be either applied to the Accordion as a default for all AccordionPanes, or an individual AccordionPane.【Panes内容的样式表】

• FadeTransitions - True to use the fading transition effect, false for standard transitions.【是否允许透明过渡效果】

• TransitionDuration - Number of milliseconds to animate the transitions【透明过渡动画的延时（单位毫秒）】

• FramesPerSecond - Number of frames per second used in the transition animations【Panes切换动画的延时】

• AutoSize - Restrict the growth of the Accordion. The values of the AutoSize enumeration are described above【自适用尺寸类型】.

• Panes - Collection of AccordionPane controls【AccordionPane里面包含的Panes】

• HeaderTemplate - The Header template contains the markup that should be used for an pane's header when databinding【头模板】

• ContentTemplate - The Content template contains the markup that should be used for a pane's content when databinding【内容模板】

• DataSource - The data source to use. DataBind() must be called.【如果绑定数据源的话，这里是数据源】

• DataSourceID - The ID of the data source to use.【数据源ID】

• DataMember - The member to bind to when using a DataSourceID【数据成员】

这个ajax控件有点特殊，它和其他的不同，它没有目标控件，它不依附于其他原有的服务器端控件，它更像是一种独立的全新的控件。但是Accordion必须配合AccordionPane使用，因为AccordionPane才是用来呈现内容的容器。一个最简单的结构如下：

• ActiveTabChanged (Event) - Fired on the server side when a tab is changed after a postback【当tab变化发生回传后触发的服务器端事件】

• OnClientActiveTabChanged - The name of a javascript function to attach to the client-side tabChanged event【任何tab变化时触发的客户端脚本函数】

• CssClass - A css class override used to define a custom look and feel for the tabs【样式表】

• ActiveTabIndex - The first tab to show【默认展开的tab索引】

• Height - sets the height of the body of the tabs (does not include the TabPanel headers)【高】

• Width - sets the width of the body of the tabs【宽】

• ScrollBars - Whether to display scrollbars (None, Horizontal, Vertical, Both, Auto) in the body of the TabContainer【滚动条的展示方式】

TabPanel Properties

• Enabled - Whether to display the Tab for the TabPanel by default. This can be changed on the client.【此tab是否可用】

• OnClientClick - The name of a javascript function to attach to the client-side click event of the tab.【此tab发生变化时触发的客户端脚本函数】

• HeaderText - The text to display in the Tab【头文言】

• HeaderTemplate - A TemplateInstance.Single ITemplate to use to render the header【头模板】

• ContentTemplate - A TemplateInstance.Single ITemplate to use to render the body【内容模板】

• TargetControlID - The ID of a Panel to make draggable.【目标panel控件】

• DragHandleID - The ID of a control that will serve as the "drag handle" for the panel. When the user clicks and drags this control, the panel will move.【拖动句柄panel】

这个要稍微的说明一下，目标控件，必须是拖动句柄panel的父容器，也就是说目标panel包含句柄panel，用于存放内容的panel与句柄panel平级。一个最简单的示例结构如下：